アメブロ カスタマイズ&集客コンサルタント

集客にお困りですか?ブログを作ったはいいけど「作っただけ…。」売上につながるブログへと変身を遂げよう!!

こんにちは、アメブロカスタマイズの松田です。

今回は、アメブロの
メニューバー(グローバルメニュー)
の設置に仕方をご紹介させていただきます。

このメニューバーがあると、ブログをパッと見た時に、どのような内容がブログに書かれているのか、何が重要なのか、何を紹介しているのか、などを一瞬で見て理解することが出来ます。

さらにはバーの中のボタンをクリックすることによってそのページへとすぐ飛べるようになるので、このメニューバーがあるだけで大変分かりやすく、見やすいページになります。

さて、その設置方法ですが、まずはアメブロのスキン(テンプレート)をCSSが編集できる、【CSS編集用デザイン】にしていないと設置できません。
【CSS編集用デザイン】適応方法はコチラ

まず、フリースペース内に下記HTMLを記述します↓

<div id="navi"><a id="menu01" href="メニュー1のURL">メニュー1</a><a id="menu02" href="メニュー2のURL">メニュー2</a><a id="menu03" href="メニュー3のURL">メニュー3</a><a id="menu04" href="メニュー4のURL">メニュー4</a><a id="menu05" href="メニュー5のURL">メニュー5</a></div>


フリースペースにこちらを記述したら保存します。フリースペースは以上です。
次はCSSの編集になります。
CSS編集の画面で、CSSが記述してあるスペースに下記を記述してください。一番下とかに記述するとよいでしょう。

次は、CSSの記述です。CSSの編集ページにいき、
下記CSSを追加してください。自分の好きなように背景の色や、サイズなどを調整して、保存してください。


#navi {
position:absolute;
top:250px; /*-- ヘッダー画像との距離 --*/
margin-top: 20px;/*--上と下の間隔--*/
}
#menu01 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu01:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu02 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu02:hover {
background:url(マウスを載せたときの画像URL
) no-repeat;
}

#menu03 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu03:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu04 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu04:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu05 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu05:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu06 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu06:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}



メニューバーの設置は、上記を追加するだけですが、間違って他のCSS部分をいじってしまったりしてブログの表示が変わってしまったりすることもあります。

心配な方は記述する前に、記述前のCSSを全てコピーして、メモ帳などに貼り付けておくなどをしておくと良いでしょう。

一度間違った状態で保存してしまうと、元には戻せませんので
こういったバックアップを取っておくのは大事ですね。