アメブロ 旧CSSグローバルメニューの作り方(シンプル編)

amebloo3

アメブロカスタマイズをするなら必須!なグローバルメニュー。作り方を載せてみます。

アメブロ グローバルメニューの作り方

グローバルメニュー設置方法として大きく2つあります。
タグでの色指定・画像指定。
今回は最も簡単なタグ指定の方法について載せてみます。

サイドバーでフリースペースを掲載する

アメブロ→設定・管理→サイドバーの配置設定でフリースペースを加えます

ameblo

リンク先をフリースペースに入力します。

設定・管理→フリースペースにグローバルメニューのタグを入れます

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

改行するとナビがずれるので、改行せずに入力してください。

メニューが4つの方は、<li><a href=”#”>メニュー5</a></li>は削除しましょう。

「#」にリンク先のURLを、「メニュー」のところは表示したい文字を入れます。

下のタグを入れます。

(デザインの変更でCSS編集用デザインに変更しておいてください)

ブログデザインCSSをスクロール

/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

(4) その他、拡張

*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/

/* その他、拡張があれば記述 */

と記載があるところの下に下記をコピペします。


/*グローバルメニュー*/
/*▼▼▼ 変更しない ▼▼▼*/

.skinContentsArea{
position:relative;
}

#headerMenu{
position:absolute;
margin:0;
padding:0;
}

#headerMenu ul.menu{

margin:0;
padding:0;
list-style: none;

}

#headerMenu ul.menu li{
display:inline;
}

#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}

/*▲▲▲ 変更しない ▲▲▲*/

/*▼▼▼ サイズ・位置など ▼▼▼*/

.skinContentsArea{
padding-top:60px; /* ボタン設置用スペース */
}
#headerMenu{
top:0px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
width:980px; /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
width:196px; /* ボタンの幅 */
line-height:30px; /* ボタンの高さ */
font-size:13px; /* ボタンの文字サイズ */
}
/*▲▲▲ サイズ・位置など ▲▲▲*/
/*▼▼▼ ボタンの色・文字装飾・背景など ▼▼▼*/
#headerMenu ul.menu li a{ /* 通常時 */
color:#000000; /* 文字色(白) */
font-weight:bold; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#cc99ff; /* 背景色 */
background-image:url(★); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#000000; /* 文字色(白) */
font-weight:bold; /* 太字(なし) */
text-decoration:none; /* 下線(あり) */
background-color:#cc66ff; /* 背景色 */
background-image:url(★); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
/*▲▲▲ ボタンの色・背景など ▲▲▲*/

オレンジの箇所はグローバルメニューの大きさ設定です。
ボタンの幅で5つメニューがある方は196pxのままでOK。
4つの方は、245pxになります。高さはだいたい30~40pxが妥当かと思います。

赤字になっているところは、本体設定です。リンク色や背景色の設定になります。
原色大辞典などを見て、文字色と背景色を変更しておきましょう。

設置例

amebloo3

こんな感じで設定できました。お試しくださいね!

他のデザインのカスタマイズのためのCSSはこの本を見ればバッチリ。私も使用しています。