FC2ブログのテンプレート工房

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。
今回はこのメニューの背景を画像にしてロールオーバーさせるカスタマイズを紹介します。ロールオーバーとはマウスを乗せたときに画像が変わることです。

通常画像とマウスオーバー画像の２つを切り替えて表示しようとすると、マウスオーバーしてから画像を読み込むために一瞬遅れて画像が表示されます。

このタイムラグを解消するために、１つの背景画像の「見える部分」を制御して、画像のロールオーバーを実現します。

まずメニューに表示したい画像を用意します。
メニューのサイズにあわせた画像を用意してください。
Sample A


そしてマウスを乗せたときに表示したい画像を用意します。
Sample B


これを画像編集ツール等を使って１つの画像にしてください。
Sample C


画像を１つに編集できたらそのファイルをアップロードしてください。
そしてスタイルシートの末尾に以下を加えてください。

/* メニュー画像 */
#menu_bar li a {
background-image: url("Sample C に相当する画像のURL");
}

/* ロールオーバー（画像切り替え） */
#menu_bar li a:hover {
background-position:left bottom;
}

リンク部分ではないメニューバー全体の背景も画像にしたい場合は、更に以下も追加してください。
Sample Aに相当するような画像がいいかも知れません。

/* メニュー全体背景 */
#menu_bar {
background-image: url("メニュー全体背景に使う画像のURL");
}

メニュー画像を個別に設定したい場合

HTMLを編集します。
変更を加えたいメニューに適当なクラス名を設定してください。
ここでは例としてmenu01,menu02,menu03と設定します。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li class="menu01"><a href="#">メニュー１</a></li>
<li class="menu02"><a href="#">メニュー２</a></li>
<li class="menu03"><a href="#">メニュー３</a></li>
</ul>
<!--▲ メニューバー ▲-->

そしてスタイルシートの末尾に以下を加えてください。
各クラス名に画像を設定します。

#menu_bar li.menu01 a {
background-image: url("menu01に表示したい画像のURL");
}

#menu_bar li.menu02 a {
background-image: url("menu02に表示したい画像のURL");
}

#menu_bar li.menu03 a {
background-image: url("menu03に表示したい画像のURL");
}

用意した画像自体に文字がある場合、画像の上に表示されるリンクテキストは不要になります。
そのようなときには「text-indent:-9999px;」を加えてください。

#menu_bar li.menu01 a {
background-image: url("menu01に表示したい画像のURL");
text-indent:-9999px;
}

#menu_bar li.menu02 a {
background-image: url("menu02に表示したい画像のURL");
text-indent:-9999px;
}

#menu_bar li.menu03 a {
background-image: url("menu03に表示したい画像のURL");
text-indent:-9999px;
}

これでメニューバーの画像ロールオーバーができます。

関連記事

• メニューバーに検索フォームを表示 (2009/07/23)
• メニューバーの中央寄せ (2009/07/22)
• ページ送りナビゲーション (2009/07/09)
• メニューバーの画像ロールオーバー (2009/07/05)
• メニューバーのドロップダウン (2009/07/03)
• はてなブックマークの表示 (2009/06/24)
• ファビコンの作り方 (2009/06/22)