グローバルメニューの設置

グローバルメニューとはヘッダーの下にある

大きなメニューバーのことです。

これがあると、ユーザーにやさしいですし、

ブログのデザインに凝っているなと思われたりします。

簡単なので是非やってみましょう。

今回も前回のヘッダーと同様に基本的にはコードを足すだけです。

前回ヘッダーのコートを足した部分を見てください。

ヘッダーのコードのすぐ下にコードを足してください。

/* グローバルメニューの追加 */
#wrap,.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;
}
#wrap,.skinContentsArea{
padding-top:45px;
}
#headerMenu{
top:0px;
left:0px;
width:980px;
}
#headerMenu ul.menu li a{
width:196px;
line-height:40px;
font-size:14px;
}
#headerMenu ul.menu li a{
color:#0066ff;
font-weight:normal;
text-decoration:none;
background-image:url();
background-repeat:repeat;
}
#headerMenu ul.menu li a:hover{
color:##ff0033;
font-weight:normal;
text-decoration:underline;
background-image:url();
background-repeat:repeat;
}

灰色になっている部分が2か所ありますよね。

上の方は何もしていない時のメニューバーが
下の方はメニューバーにマウスが乗ったホバー状態の時のメニューバーとなります。
マウスが乗った時に色が変化するようになり分かりやすくなります。。

今回も前回同様にお好みのメニュー画像を探して
ＵＲＬを張り付けていきます。
「メニューバー　素材」で検索すると、たくさんメニューバーが見つかるかとおもいます。

お好みのメニューバーが見つかったら前回同様に
ダウンロードしたのちにアメブロにアップロードしてください。

そしてＵＲＬを2か所に張り付けるだけ。
マウスが乗った時に色が変化しなくてもいいなら、下の部分
#headerMenu ul.menu li a:hover{
color:##ff0033;
font-weight:normal;
text-decoration:underline;
background-image:url();
background-repeat:repeat;
}
は削除してしまって問題ないです。

今回はこれだけでなくもう1操作だけします。

サイドバーのフリースペースをクリックしてください。

ここにコードを入れます。

以下のコードを入力してください。

<div id="headerMenu"><ul class="menu"><li><a href="URL">メニュー１</a></li><li><a href="URL">メニュー２</a></li><li><a href="URL">メニュー３</a></li><li><a href="URL">メニュー４</a></li><li><a href="URL" >メニュー５</a></li></ul></div>

メニュー○の部分を変えれば、表示される文字が変わります。
URLの部分にリンクさせたいページのURLを書き換えます。

例えば一番左をプロフィールに変えたいのであれば、僕の場合
<li><a href="URL">メニュー１</a></li>という部分を

<li><a href="http://profile.ameba.jp/○○/">プロフィール</a></li>
に変えるだけです。

今回は以上となります。

エルのブログ

ブログの説明を入力します。

グローバルメニューの設置