長々と書いてきましたが、CSSのロールオーバーの基本的な考え方はなんとなく分かっていただけたでしょうか。

今日は『完結編』ということでWebourgeonのフッターのメニューを実際に作ってみたいと思います。

カスタムメニューの呼び出し方

Webourgeon フッターの作り方〜カスタムメニューを画像に置き換える(1)でカスタムメニューを作りました。このメニューはTwenty Tenのデフォルトのままでは呼び出せません。

<?php wp_nav_menu( array( 'container_class' => 'footer-navigation', 'theme_location' => 'secondary' ) );?>

テーマファイルに「wp_nav_menu」を使って呼び出しています。「container_class」でこのメーニューの囲みにつけるクラス名を指定しています。

メニューのHTMLを確認しよう

ではソースを確認してみましょう。

<div class="footer-navigation">
<ul id="menu-footer-navigation" class="menu">
<li id="menu-item-131" class="go-home menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-131"><a href="http://webourgeon.net/">go-home</a></li>
<li id="menu-item-132" class="follow-me menu-item menu-item-type-custom menu-item-object-custom menu-item-132"><a href="http://twitter.com/Webourgeon_com">follow-me</a></li>
<li id="menu-item-133" class="contact-me menu-item menu-item-type-custom menu-item-object-custom menu-item-133"><a href="#second">contact-me</a></li>
<li id="menu-item-134" class="go-top menu-item menu-item-type-custom menu-item-object-custom menu-item-134"><a href="#wrapper">go-top</a></li>
</ul>
</div>

ナビゲーションの囲みに「footer-navigation」というクラス名がついています。また、それぞれのメニューに管理画面でつけたクラス名が付け足されています。

置き換える画像を確認

普通にメニューの画像がくっついている場合は簡単ですが、今回は置き換えたい画像の位置も幅もバラバラです。
もう一度作った画像を確認してみましょう。（すごく小さいのでクリックして拡大画像で見て下さい。。）

メニューに置き換えたい部分を囲んで、それぞれの部分の左からの距離（始点）と幅を書いてあります。この位置と幅が大事ですよ！

ではCSSで組んでいきます。

メニュー全体に背景画像を指定

メニューのアイテムだけの背景画像ですと、その他の部分が出ませんので、全部の画像をまず背景にしてしまいます。

.footer-navigation{
    background-image: url(img/footer-navigation.gif);
    background-repeat: no-repeat;
    height: 90px;
}

ロールオーバーも含んだ一枚の絵ですが、高さ指定していますので、上半分しか表示されません。

こんな感じになりました。

リストを横並びにする

リストをfloatで横並びにします。リストマークも外してしまいましょう。余計なmarginやpaddingも消しておきましょう。

.footer-navigation li{
    float: left;
    list-style: none;
    padding: 0;
    margin:  0;
}

メニューのアイテムを指定の位置まで動かす

リストが左に隙間無く寄っていますので、これを該当する背景画像の位置と重なる所まで動かしてあげたいと思います。

色々な方法が考えられますが、今回は「position」を使ってみたいと思います。これですと面倒な計算があまりいらなくなります。

まず「footer-navigation」に 「position: relative」を設定して位置を決める基準にします。

.footer-navigation{
　　 position: relative;
}

まず、始めの「go-home」は先ほどの画像を見ていただくと、左から43pxの位置から始まっている事が分かります。絶対配置を使って左からの距離を指定します。

.footer-navigation .go-home a{
　 display: block;
    position: absolute;
    left: 43px;
    width: 147px;
    height: 90px;   
}

一緒にリンクさせたいエリアの幅、高さも指定します。「 display: block」も忘れずに。

続くメニューアイテムもそれぞれ左から218px、513px、764pxですので同じように指定します。

.footer-navigation .follow-me a{
    display: block;
    position: absolute;
    left: 218px;
    width: 137px;
    height: 90px;    
}

.footer-navigation .contact-me a{
    display: block;
    position: absolute;
    left: 513px;
    width: 145px;
    height: 90px;   
}
.footer-navigation .go-top a{
    display: block;
    position: absolute;
    left: 764px;
    width: 117px;
    height: 90px;  
}

（まとめて書ける所はまとめてしまってかまいません。分かりやすくするためにこのように書いておきます。）

どうでしょうか。うまく位置が重なっていますね。

背景画像とロールオーバーを指定

背景画像の指定をします。

.footer-navigation .go-home a{
    background-image: url(img/footer-navigation.gif);
    background-repeat: no-repeat;
    background-position: -43px 0;
}

「background-position」の値がマイナスになっています。

そのまま「go-home」に背景を表示させると背景画像の一番端が基準点にあってしまうので、背景画像を左に43pxずらしてあげる訳です。普通は右方向にずらすので、マイナスの値になります。

ロールオーバーです。

.footer-navigation .go-home a:hover{
    background-position: -43px -94px;
}

上にずらしますから、これもマイナスの値ですね。94pxと中途半端なのは、2枚の画像をぴったりとくっつけなかったためです。くっついている場合は、画像の高さになりますね。Webourgeon フッターの作り方〜カスタムメニューを画像に置き換える(3)もに詳しく書いてあります。

また、今回のケースでは、もともと背景画像が指定されているので、「a」には背景画像を特に指定せず、「a:hover」のみに指定しても動きます。この辺りは、ケース　バイ　ケースで良い方法を選ぶといいと思います。

全てに同じように「background-position」を指定して、最後に例の「text-indent: -9999px」でテキストを飛ばしてしまえば完成です。お疲れさまでした。

この方法は、ほんの一例です。いろいろな方法がありますから、ぜひ、ご自分のサイトにあわせたアレンジをして、楽しくカスタマイズして下さいね。