Webourgeon フッターの作り方として、カスタムメニューを画像に置き換える方法について書いています。

前回は背景画像の表示についてとテキストを画像に置き換えるところまでを書きました。今日はその背景画像をCSSでロールオーバーさせる仕組みについて書きたいと思います。

これが分かれば、Twenty Tenテーマのヘッダー部分のデザイン変更(1)〜サイトのロゴをいれてみるではテキストの横にロゴを表示させるのみでしたが、全体を画像にする事もできます。

理解してしまえば、一粒で2度、3度、おいしいですよ。がんばっていきましょう。

通常時とロールオーバーの2種類の画像を用意する

通常時とロールオーバーの2種類の画像を用意します。2つの画像を縦にきっちり並べます。左端もそろえて、隙間無く並べましょう。

こんな感じです。上が通常時、下がロールオーバー用です。

背景画像を表示させる

画像にしたいHTMLはこれです。

<p><a href="#">色も変えたいよね</a></p>

まずこのa要素に普通に背景を表示させてみましょう。

a{
	width:250px;
	height:40px;
	background:url("sample-2.jpg") left  top no-repeat;
}

前回のように、高さ、幅も指定してみます。さて、どうなるでしょうか？

おやおや？きちんと表示されませんね。高さも幅も指定しているのにどうしてでしょうか？

これは「a」というのが「インライン要素」だからです。「インライン要素」は基本的には高さや幅を持てません。

ですから、おまじないの言葉、

a{
	display: block;
}

を入れてあげます。これで、高さや幅を持つ事ができるようになります。

無事に表示されました。

ロールオーバーを設定する

次はロールオーバーです。先ほど作った画像を見て下さい。

高さや幅はこのようになっています。これがどのようのに背景として表示されているかというと。。。

左上を基準に、通常時に表示したい画像の大きさ分が、表示範囲になっています。

これをマウスオーバーで、下の方の画像に取り替えたいのですから、

このように背景の画像が上に40px分、ずれてくれればいいわけです。

a:hover{
		background:url("sample-2.jpg")  0 -40px no-repeat;
}

基準点に対して、マイナスの数値になることに注目してください。

今回のケースでは数値ではなく、

a:hover{
		background:url("sample-2.jpg")  left bottom no-repeat;
}

このようにキーワードで位置を指定しても同じ結果になりますが、この後上下左右にくっつけた画像での置き換えをしますので、この「マイナス」の数値になる事をよく覚えておいて下さいね。

まとめて書きます。

a{
	width:250px;
	height:40px;
	background:url("sample-2.jpg") left  top no-repeat;
	display: block;
	text-indent: -9999px;
}
a:hover{
	background:url("sample-2.jpg")  0 -40px no-repeat;
}

サンプルはこちらです。