ヘッダー下のグローバルメニューに(画像)設置方法

はじめに

以前のヘッダー下にグローバルメニュー（グローバルナビ）設置方法と殆ど変わりません。

何故かと言うと、気づいた人もいるかと思いますがグローバルメニュー（グローバルナビ）設置方法のCSSに画像のURLを追加するスペースも含んでいたのです。

そのスペースに画像URLを追記して下さい。

一応、ヘッダー下にグローバルメニュー（グローバルナビ）設置方法のCSS・HTMLを下記に表示しておきます。

最下部にメニューボタンの画像も用意してますので、ご自由にお使い下さい。

※このページの説明で解らない場合は、以前の記事「グローバルメニュー（グローバルナビ）設置方法( ´▽｀)bここを読んでみよう！ 」をお読み下さい。

ヘッダー下のグローバルメニューに(画像)設置方法

画像の赤枠のようにメニューボタンを画像にする方法です。

フリースペース（HTML）

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#" target="_blank">メニュー１</a></li><!--
--><li><a href="#" target="_blank">メニュー２</a></li><!--
--><li><a href="#" target="_blank">メニュー３</a></li><!--
--><li><a href="#" target="_blank">メニュー４</a></li><!--
--><li><a href="#" target="_blank">メニュー５</a></li><!--
--></ul><!--
--></div>

CSS
※良く見ると赤字で /* 背景画像 */とあります。
その左側に（）が有りますのでその中に画像URLを追記して下さい。

/* ▼▼ヘッダー下にグローバルメニュー設置ここから▼▼ */

/*▼▼ 位置の指定などここから(通常変更不要)▼▼*/
.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
}
#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}
/*▲▲▲ 位置の指定などここから(通常変更不要) ▲▲▲*/
/*▼▼▼ サイズ・位置など ▼▼▼*/
.skinContentsArea{
padding-top:40px; /* ボタン設置用スペース */
}
#headerMenu{
top:0px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
width:980px; /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
width:196px; /* ボタンの幅 */
line-height:40px; /* ボタンの高さ */
font-size:14px; /* ボタンの文字サイズ */
}
/*▲▲▲ サイズ・位置など ▲▲▲*/
/*▼▼▼ ボタンの色・文字装飾・背景など ▼▼▼*/
#headerMenu ul.menu li a{ /* 通常時 */
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#3366ff; /* 背景色(濃い青) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:underline; /* 下線(あり) */
background-color:#698fff; /* 背景色(薄い青) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}

/* ▲▲ヘッダー下にグローバルメニュー設置ここまで▲▲ */

最後にCSS編集画面の下部にある「表示を確認する」で確認後、保存して完了です。

メニューボタン画像

画像サイズ：196×40
光沢の違う２種類を用意しました。