ヘッダーメニューの設置方法［その３］

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。
　　　　　　

FC2ブログランキング

「ヘッダーメニューの設置方法」については、
アメブロカスタマイズで人気NO１になっています。

今回は、前回に引き続き、その３として別解を
載せていきます。

［その３］背景にメニュー画像全体を設定する方法（文字入れ有りの場合）

この方法だと一枚の大きな画像として使用できるので、
おもしろい使い方もできそうですね。

この場合は、フリースペースに入力するHTMLは、
今までとは異なっており、次のようになりますので、注意してくださいね。

［フリースペースへ入力するHTML］

<ul id="gnavi"><li class="menu1"><a
href="#">TOPページへ</a></li><li
class="menu2"><a href="#" target="_blank">ページ１</a></li><li
class="menu3"><a href="#">ページ２</a></li><li
class="menu4"><a href="#" target="_blank">ページ３</a></li><li
class="menu5"><a href="#" target="_blank">ページ４</a></li></ul>

［画像の保存］

まず、次のような文字入りの画像をgimpで作成します。

次にこの画像をブログにアップロードし、画像のURLを決定します。

［CSS］は、次の通りです。

/*■ヘッダーメニューの設置■*/

/*◆ メニュー全体の位置設定 ◆*/
#gnavi{
position:absolute; /* メニューの位置固定 */
top:329px; /* メニューの上下位置設定 */
left:0px; /* メニューの左右位置設定 */
width:950px; /* メニューの幅設定 */
}

/*◆ メニュー横並び設定 ◆*/
#gnavi li{
float:left;
}

/*◆ メニュー通常時の設定 ◆*/
ul#gnavi li a {
display :block;
height:50px; /* メニューの高さ設定 */
width:190px;/* メニューの横幅設定 */
background :url(http://×××［上記画像のURLを入力する］) no-repeat;
}

/*◆ 各メニューの設定 ◆*/
/* ヘッダーメニュー1 */
ul#gnavi li.menu1 a {/* 通常時 */
background-position:0 0;
}
ul#gnavi li.menu1 a:hover {/* マウスオン時 */
background-position:0 -50px;
}
/* ヘッダーメニュー2 */
ul#gnavi li.menu2 a {/* 通常時 */
background-position:-190px 0;
}
ul#gnavi li.menu2 a:hover {/* マウスオン時 */
background-position:-190px -50px;
}
/* ヘッダーメニュー3 */
ul#gnavi li.menu3 a {/* 通常時 */
background-position:-380px 0;
}
ul#gnavi li.menu3 a:hover {/* マウスオン時 */
background-position:-380px -50px;
}
/* ヘッダーメニュー4 */
ul#gnavi li.menu4 a {/* 通常時 */
background-position:-570px 0;
}
ul#gnavi li.menu4 a:hover {/* マウスオン時 */
background-position:-570px -50px;
}
/* ヘッダーメニュー5 */
ul#gnavi li.menu5 a {/* 通常時 */
background-position:-760px 0;
}
ul#gnavi li.menu5 a:hover {/* マウスオン時 */
background-position:-760px -50px;
}

/*◆ テキストの非表示の設定 ◆*/
ul#gnavi li a span {
display :block;
padding-top :7px;
text-indent :-9999px;
}

アメブロカスタマイズで人気NO１と言えば？

ヘッダーメニューの設置方法［その２］