アメブロにメニューバーを設置する方法 【タイトル下、タイトル上、横メニュー】

※カスタム可能/CSS編集用デザイン（新スキン）用です

ブログのタイトルの下や上にメニューバーをつける方法です。タイトルは画像化していても標準のテキストのままでもどちらでもOKです。

実現するには、「CSS、フリースペース、フリープラグイン」の３か所の設定が必要です。

タイトル下にメニューバーをつける方法

CSSへの追加

デザインの変更のCSSの編集の最後に追加してみてください

.skinHeaderArea{
 width:980px;
}
.skinHeaderFrame {
 position:relative;
 width:980px;
 margin:0 auto;
}

.menubar ul {
 margin:0;
 padding:0;
 list-style-type:none;
}

.menubar ul li {
 width:195px;
 float:left;
 height:30px;
 line-height:30px;
 text-align:center;
 font-weight:bold;
 margin-right:1px;
}

.menubar ul li a { /*メニュー*/
 display:block;
 text-decoration:none;
 color:#ffffff; /*文字色*/
 background-color:#c52202; /*背景色*/
 font-size:14px;
}
.menubar ul li a:hover { /*マウスカーソルを合わせたとき*/
 color:#ffffff; /*文字色*/
 background-color:#e64000; /*背景色*/
}

メニューの色を変更するには、「.menubar ul li a」のあたりの部分を変更してください。
メニューにマウスカーソルを合わせた時の色などは「.menubar ul li a:hover」当たりの部分を変更してください。

フリースペースへの追加

サイドバーのフリースペース編集に追加してみてください

<div class="menubar"><ul><!--
--><li><a href="#">メニュー1</a></li><!--
--><li><a href="#">メニュー2</a></li><!--
--><li><a href="#">メニュー3</a></li><!--
--><li><a href="#">メニュー4</a></li><!--
--><li><a href="#">メニュー5</a></li><!--
--></ul></div>

#の部分をリンク先のURLに書き換えてみてくださいね。

フリープラグインへの追加

サイドバーのプラグインの追加のフリープラグインに追加

<	script type="text/javascript" src="https://www.google.com/jsapi"></script>
<	script type="text/javascript">google.load("jquery", "1.6");</script>

jQueryを読み込んでいない場合は、これを一番上に追加

<script>
$(function(){
$('.menubar').insertAfter('.skinHeaderArea');
});
</script>

これは、フリープラグインのどこでもよいので追加

タイトル上にメニューバーをつける方法

<script>
$(function(){
$('.menubar').insertBefore('.skinHeaderArea');
});
</script>

フリープラグインの部分をこのように変更。
insertAfterがinsertBeforeに変更するだけですね。