以前に
横メニューバーをブログタイトル下に表示する方法を紹介しました。
今回はこのメニューの背景を画像にしてロールオーバーさせるカスタマイズを紹介します。ロールオーバーとはマウスを乗せたときに画像が変わることです。
通常画像とマウスオーバー画像の2つを切り替えて表示しようとすると、マウスオーバーしてから画像を読み込むために一瞬遅れて画像が表示されます。
このタイムラグを解消するために、1つの背景画像の「見える部分」を制御して、画像のロールオーバーを実現します。
まずメニューに表示したい画像を用意します。
メニューのサイズにあわせた画像を用意してください。
Sample A

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

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

画像を1つに編集できたらそのファイルをアップロードしてください。
そしてスタイルシートの末尾に以下を加えてください。
/* メニュー画像 */
#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="#">メニュー1</a></li>
<li class="menu02"><a href="#">メニュー2</a></li>
<li class="menu03"><a href="#">メニュー3</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;
}
これで
メニューバーの画像ロールオーバーができます。