カスタムメニューを画像に置き換える方法についての、リクエストをいただきました。

Webourgeonのブログでもサイト上部やフッターのメニューをカスタムメニューを使って作り、画像に置き換えています。ということで、「Webourgeonのフッターの作り方」を大公開！

いえ。大公開ってほどのものでもないですが。。

本当はもっとかっちりしたメニューっぽいメニューの方がいいんでしょうが、こんな不規則な感じでもいけますよってことで、おつきあい下さい。

カスタムメニューにクラスを割り振る

カスタムメニューの内容を画像に置き換えようする場合、どのメニューをどの画像に置き換えるか、という区別をしなくてはなりません。

そのためにメニューのアイテム一つ一つにクラス名を振ってあげたいと思います。

カスタムメニューの設定画面を見てみます。普段の表示ですと、「ナビゲーションラベル」「タイトルの属性」しか設定できるところがありませんね。これではクラス名をつけられません。

そこで、メニュー設定のページの右上にある「表示オプション」というタブを開きます。

そうすると「画面に表示」「詳細メニュー設定を表示」というメニューが現れます。「詳細メニュー設定を表示」の左から2番目に「CSS クラス」とありますので、そこにチェックをいれると、メニューを作成する部分に「CSS class (オプション)」というエリアができます。

これでクラス名を設定できるようになりました。

Webourgeonでは「go-home」「follow-me」「contact-me」「go-top」というメニューを作って、同じ名前のクラス名をつけています。こんな感じですね。

画像を用意する

今作ったメニューに対応する画像を作ります。普段はモノクロのメニューですが、マウスオーバーをするとカラーになるようにしたいので、画像をモノクロ、カラーの2種類用意します。

画像を用意する時のポイントは「1つの画像にまとめる」ことです。

メニューとして最終的に表示したいデザインで、メニューアイテムに対応する画像を並べます。
そして、その真下にカラーの画像を並べます。

上下の同じ画像の位置をぴったり合わせておくと設定が楽です。ずれてしまうと、マウスオーバーのときに画像がガクンと動いてしまったりするので慎重に！

今回は、イラストっぽくしたかったので、それぞれをかなり自由な感じで並べました。

こんな風になっています。上下がそれぞれ組みになってます。マウスオーバーが下の画像です。カラーにしたり、ちょっと付け足したりしています。

ここまでが下準備です。次回にどのようにCSSを設定するかを説明します。