ヘッダーの上に画像でナビゲーションを追加しよう

アメブロカスタマイズ担当Webデザイナーの佐野です。

今回はヘッダーの上にナビゲーションメニューを画像で表示してみたいと思います。
以前記事にしたヘッダーの下に追加するナビゲーションと似ていますね。

なお、アメデコでは「カスタム可能」な中にある「CSS編集用デザイン」を元に
記事を書かせて頂いておりますので、そちらをご了承頂いた上でご覧ください。

今回もjQueryやナビゲーションの画像を使用するので事前に「jQueryでフッターを作ってみよう」や「ヘッダーの下にナビゲーションを画像でカスタマイズしよう」を見て使い方やナビゲーションのカスタマイズの詳しい方法を見ておいてくださいね。

それでは早速やっていきましょう。

<div id="headerNaviArea">
<ul>
<li id="menu01"><a href="#" title="メニュータイトル名1">メニュータイトル名1</a></li>
<li id="menu02"><a href="#" title="メニュータイトル名2">メニュータイトル名2</a></li>
<li id="menu03"><a href="#" title="メニュータイトル名3">メニュータイトル名3</a></li>
<li id="menu04"><a href="#" title="メニュータイトル名4">メニュータイトル名4</a></li>
<li id="menu05"><a href="#" title="メニュータイトル名5">メニュータイトル名5</a></li>
</ul>
</div>

この内容がヘッダーの上に入る内容の元になります。
それでは、このHTMLをCSSでカスタマイズしていきましょう。

CSSの編集に追加する内容

#headerNaviArea {
	margin: 0 auto;
	width: 980px;
	height: 60px;
}

#headerNaviArea ul{
	margin: 0;
	padding: 0;
}
#headerNaviArea ul li{
	float: left;
	list-style:none;
}
#headerNaviArea ul li a{
	background-image: url("画像のURL");
	background-repeat: no-repeat;
	text-indent: -9999px;
	height: 60px;
	display: block;
}

/*ヘッダーメニュー01*/
#headerNaviArea ul li#menu01 a{
	width: 196px;
	background-position: 0 0;
}
#headerNaviArea ul li#menu01 a:hover{
	background-position: 0 -60px;
}

/*ヘッダーメニュー02*/
#headerNaviArea ul li#menu02 a{
	width: 196px;
	background-position: -196px 0;
}
#headerNaviArea ul li#menu02 a:hover{
	background-position: -196px -60px;
}

/*ヘッダーメニュー03*/
#headerNaviArea ul li#menu03 a{
	width: 196px;
	background-position: -392px 0;
}
#headerNaviArea ul li#menu03 a:hover{
	background-position: -392px -60px;
}

/*ヘッダーメニュー04*/
#headerNaviArea ul li#menu04 a{
	width: 196px;
	background-position: -588px 0;
}
#headerNaviArea ul li#menu04 a:hover{
	background-position: -588px -60px;
}

/*ヘッダーメニュー05*/
#headerNaviArea ul li#menu05 a{
	width: 196px;
	background-position: -784px 0;
}
#headerNaviArea ul li#menu05 a:hover{
	background-position: -784px -60px;
}

まずこちらをCSSの編集へ追加してください。
皆様のブログの雰囲気に合うようにてオレンジ色の部分を変更してください。
※ナビゲーションの画像の作り方によって、それぞれのメニューに設定しているサイズが違いますのでご注意ください。ナビゲーションの作り方自体は「ヘッダーの下にナビゲーションを画像でカスタマイズしよう」で少し解説しております。

それでは最初に書いたHTMLを表示できる様にしましょう。

フリープラグインに追加する内容

<script type="text/javascript">
$(".skinFrame2").before('<div id="headerNaviArea"><ul><li id="menu01"><a href="#" title="メニュータイトル名1">メニュータイトル名1</a></li><li id="menu02"><a href="#" title="メニュータイトル名2">メニュータイトル名2</a></li><li id="menu03"><a href="#" title="メニュータイトル名3">メニュータイトル名3</a></li><li id="menu04"><a href="#" title="メニュータイトル名4">メニュータイトル名4</a></li><li id="menu05"><a href="#" title="メニュータイトル名5">メニュータイトル名5</a></li></ul></div>');
</script>

上記のjQueryの内容を解説していきたいと思います。
これは、オレンジ色の箇所の要素の前に赤色の内容を追加するというjQueryです。
最初に用意したHTMLを赤色の部分に一行にしてから追加してください。

CSSとフリープラグインをそれぞれ追加したらブラウザで確認してみましょう。



タイトルなどがあるエリアの上にナビゲーションが設置されていれば完成です。

皆様もナビゲーションを画像でカスタマイズしてみてはいかがでしょうか？
最後まで記事を読んでくれてありがとうございました！