アメブロdeアクセスアップ

すごいアメブロテンプレートで、メールフォームを設置する方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:サイドバーカスタマイズ

メールフォームをサイトバーに設置する方法を、ご紹介していたんですが、
すごいアメブロテンプレートを使って、
サイドバーメニューと同じ感じで、メニュータイトルを付けてみましょう。

 

 

 

 

私が大好きなテンプレート。
【すごいアメブロテンプレート】

一番スタンダードな、テンプレートを使用して、
メールフォームをサイドバーに設置してみました。

完成はこちらです。

 

すごアメテン

こんな感じで、サイドバーメニューもつけちゃったりする方法です。

 

これだと、きっとどのテンプレートでも、
CSS可能のテンプレートなら、できるはずです。

 

 

フリースペースは、とっても便利なものなのですが、
そのまま設置しても、サイドバーメニューのような、
メニューもつけることができないし、囲みもすることができません。

 

 

なので、CSSをちょっと追加して、
他のサイドバーメニューと同じような感じになれば、いいんじゃない?

 

ということで、やってみました。

 

 

でも、ちょっと見てみてね。

 

サイドバーのメニューの装飾部分。

 

サイドメニュー

← ここね。

 

ちがうじゃん。

 

・・・・と感じちゃったかしら?

 

 

 

 

 

 

 

 

 

そうなんです。

別のすごアメテンから、パクってきました!!

 

 

なぜならば、このすごいアメブロテンプレートの、構造に秘密がありました。

 

 

 

普通だったら、メニューのタイトルは、空白のものが多いんですね。
※ポイント画像はありますが・・・

 

 

 

CSSや、イメージフォルダの中身を確認すると、
このプレミアムタイプは、メニュータイトルを、1枚の画像として作成してあるんです。

 

 

 

そのCSSの仕組みなどは、割愛しますが、
空白のメニュータイトル画像がなかった・・・・・

 

 

 

ので、ちょっと違うヤツでも大丈夫かしら?

 

 

これが、アレンジカスタマイズの第一歩ですよ!!

 

 

なかったら、違うところからもってきたり、
自分で作ったりするのが、カスタマイズの楽しさです。

 

 

 

今回は、自分で作る時間がなかったので、
持ってきてしまいました。

 

 

これは、すごいアメブロテンプレートの【Eye Catch】版から、
持ってきたものです。

 

 

こういうことも、ありかなぁ~と思って、作成してみました。

 

今回は、フリースペースとCSSもちょこっといじります。

 

 

でも、コピーして、貼りつけるだけなので、
簡単ですよ!!

 

やってみましょう。

 

 

 

hana2サイトバーのメニューと同じ感じにする方法。

 

※サイドバーにメールフォームが設置してあるという前提で、
解説していきます。

 

すごアメテンの、【Eye Catch】版から、CSSの一部をコピーします。

どこかというと・・・・

/*■■■ Side Setting ■■■*/

というところを、探してください。

下のほうです。(テキストエディタでみると、507行目あたり)

 

CSSのコピーをする

 

そのすぐ下あたりに、

/* サイドバーメニュータイトル */

という部分があります。

ここに、サイドバーメニューのタイトルの設定が、
記載されているんです。

 

 

 

ここの部分を、コピーして、メモに貼って保存しておいてください。

ここから →

/* サイドバーメニュータイトル */
.skinMenuHeader {
    width:300px;/*見出し画像の横幅を設定*/
    height:38px;/*見出し画像の高さを設定*/
    margin:0 0 2px;
    line-height:2.0;
    padding:2px 0 3px 25px;
    border:none;
    background:transparent url(http://nomadelinks.xsrv.jp/ame/img/2c/green/sidemenu.png) no-repeat 0 0;
}
.skinMenuHeader {
    background-position/*\**/:0 0\9;
}
.skinMenuTitle {
    font-size:108%;
    *font-size:110%;
    font-weight:bold;
    color:#302A2E;
}

← ここまで!!

 

 

02_org_p

 

CSSは、{ }で、一つの操作の指示を伝えています。

この囲みがないと、プログラムが反映されません。
ですから、コメントアウト(/* サイドバーメニュータイトル */ ← この部分のことです。)
から、} までを、コピーしてくださいね。

 

 

そしたら、変更したいアメブロに入ってもらって、
マイページから、デザインの変更 CSSの変更を選んで、
CSSを変更していきます。

 

 

 

この時、万が一失敗した場合、すぐ元に戻せるように、
今使っているCSSの部分を全部コピーして、テキストエディタに貼っておきましょう。

 

CSSのコピーが準備されたら、先ほど【Eye Catch】版から、コピーした、
サイドバーメニューの設定ソースを、一番下に張り付けます。

 

 

この時に、自分が何をやったのかわかるように、
コメントアウトをしておきます。
同じ名前だと、反映しませんので、名前も変更しておきます。

 

こんな感じです。

 

コメントアウト

 

出来たら、いったん保存してください。

 

次に、フリースペースの編集を行います。

 

サイドバーから、フリースペース編集をクリック。

 

 

メールフォーム設置のソースの上に、
このソースを張り付けてください。

 

 

<div class="skinMenu"><div class="skinMenuHeader2"><span class="skinMenuTitle">
ここに、メニュータイトルを記入してください。</span></div><div class="skinMenuBody">

 

※↑ のソースをコピーしてもいいですが、
スペースが入っています。全部のスペースを削除してから、
フリースペースに、貼ってくださいね。

 

 

そして、一番下に

 

</div></div></div>

 

を張ってください。

 

こんな感じです。

※赤いマーキングの部分が、追加したCSSの部分です。

 

フリースペースCSS貼りつけ後

貼り終えら、プレビューで確認してみましょう。

 

 

big-check_b09プレビューでうまく表示されない場合は、
フリースペースのソースの中に、スペースや改行が入っているかどうか

最後の</div>タグが、3つついているかどうか、確認してください。
フリースペースに、改行タブや空白が入っていると、表示されないときがあります。

 

プレビューで確認してOKだったら、保存して完了です。

 

 

 

お疲れ様でした。お疲れ様でした!!

 

 

 

メニュータイトルも、つけることができましたね。

 

いい感じでしょう????

もう一度見てみましょう。

 

すごいアメブロテンプレート サンプルサイト

 

すごいアメブロテンプレートでも、 違うテンプレートでも、
CSS変更が可能なテンプレートだったら、
同じ要領でできますので、やってみてくださいね。

 

 

今後は、ほかのカスタマイズもご紹介していきます。

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.