こんにちは、パソコンワンポイントレッスン！
PCインストラクターの川上です。
以前、メニューバーを設置する記事を『ウエストみたいなヘッダーの下の帯って【メニューバーの設置方法】』で書きましたが･･･
そのメニューボタンを画像にしたい、
といったご要望がありましたので、記事にてお答えいたしますね。
しかし、いろんな方がいろんな方法で、すでに書かれています。
ここでは、前回の記事の応用編としてお伝えしますね。
まず、メニューボタンを画像にする方法は大きく2つあります。
（もちろん、この方法以外にもあります）
5つのボタンを表示すると仮定して
1．2個の画像で済ます方法
2．2個の画像×5つ＝10個画像を作成して指定する方法
があります。
今回は、1．の2個の画像で済ます方法でヘッダーメニューを作ってみます。
↓ ↓ ↓
まず、2個の画像を作成します。
通常表示されるボタンの画像を作成しておきます↓↓↓
（189px×40px）
もうひとつ、マウスをのせたときに表示されるボタンの画像を作成しておきます↓↓↓
（189px×40px）
ボタンを作成したら、
フリースペース編集内に、メニューバーの元となるURLを挿入したHTMLタグを書き込みます。
<div id="topmenu"><ul class="menu"><li><a href="リンクURL">メニュー1</a></li><li><a href="リンクURL">メニュー2</a></li><li><a href="リンクURL">メニュー3</a></li><li><a href="リンクURL">メニュー4</a></li><li><a href="リンクURL">メニュー5</a></li></ul></div>
「リンクURL」の部分には、飛ばしたいページのURLを入力してください。
「メニュー1」などの部分には、実際に表示される文字を入力してください。
また、「フリースペース編集」内ではすべての改行はなくして、「1行」になるようにしてください。
「保存」を押して、確認するとメニューバーの元が、まだフリースペースに挿入されているだけの状態になります。
次に、CSS編集で一番下に、次のCSSコードをコピー＆ペーストしておきます。
/* ▼▼▼ グローバルナビゲーションメニュー３ */
/* メニュー設置用スペース */
.skinContentsArea{
padding-top:50px;
position:relative;
}
/* グローバルナビメニューエリア */
#topmenu{
width:980px; /*メニュー全体の幅*/
position:absolute;
margin:0;
padding:0;
top:0px; /*上下位置調整*/
left:0px; /*左右位置調整*/
display:block;
}
/* メニューリストのグループ */
#topmenu ul.menu{
margin:0;
padding:0;
list-style:none;
}
/* メニューリスト */
#topmenu ul.menu li{
width:189px; /*1つの幅*/
margin:3.5px; /*メニューのスキマ*/
background-color:;/*背景色（）*/
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
display:inline;
list-style:none;
float:left;
background-image:url();/*背景イメージ*/
}
/* メニューリストのリンク */
#topmenu ul.menu li a{ /* 通常時 */
display:block;
margin:0;
padding:0;
text-align:center;/*中央寄せ*/
font-size:14px; /*ボタンの文字サイズ*/
color:#000000; /*文字色(黒)*/
font-weight:bold; /*太字*/
text-decoration:none;/*下線(なし)*/
}
/* メニューリストのリンク（マウスオーバー時） */
#topmenu ul.menu li a:hover{ /*カーソルが乗った時*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:; /*背景色()*/
background-image:url();/*背景イメージ*/
}
あとは、↑のCSSコード内の
background-image:url();/*背景イメージ*/
の「（）」の中に、画像URLをコピー＆ペーストすればOKです。
今回のケースでいえば、
まず、2つの画像をアップロードします。
そして、一度この2つの画像をチェックして、「チェックした画像を記事に追加」を押して、記事に追加します。
すると、画像URLが表示されます。上の方が黄色い画像で、下の方がグレーの画像のURLになります。
グレーのボタンの画像URL（下の赤字の部分）を範囲指定して、コピーします。
<a href="http://stat.ameba.jp/user_images/20131019/17/takeblo1329/57/91/j/o0189004012721243131.jpg"><img src="http://stat.ameba.jp/user_images/20131019/17/takeblo1329/57/91/j/t01890040_0189004012721243131.jpg" alt="雄々のブログ" /></a><a href="http://stat.ameba.jp/user_images/20131019/17/takeblo1329/40/00/j/o0189004012721243130.jpg"><img src="http://stat.ameba.jp/user_images/20131019/17/takeblo1329/40/00/j/t01890040_0189004012721243130.jpg" alt="雄々のブログ" /></a>
その画像URLを
background-image:urlのカッコ内にペースト（貼り付け）します。
（その際、先頭の「http:」は削除しておきます。）
/* メニューリスト */
#topmenu ul.menu li{
width:189px; /*1つの幅*/
margin:3.5px; /*メニューのスキマ*/
background-color:;/*背景色（）*/
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
display:inline;
list-style:none;
float:left;
background-image:url(//stat.ameba.jp/user_images/20131019/17/takeblo1329/40/00/j/o0189004012721243130.jpg);/*背景イメージ*/
}
今度は黄色のボタンの画像URL（下の紫字の部分）を範囲指定して、コピーします。
<a href="//stat.ameba.jp/user_images/20131019/17/takeblo1329/57/91/j/o0189004012721243131.jpg"><img src="http://stat.ameba.jp/user_images/20131019/17/takeblo1329/57/91/j/t01890040_0189004012721243131.jpg" alt="雄々のブログ" /></a><a href="http://stat.ameba.jp/user_images/20131019/17/takeblo1329/40/00/j/o0189004012721243130.jpg"><img src="http://stat.ameba.jp/user_images/20131019/17/takeblo1329/40/00/j/t01890040_0189004012721243130.jpg" alt="雄々のブログ" /></a>
その画像URLを
background-image:urlのカッコ内にペースト（貼り付け）します。
/* メニューリストのリンク（マウスオーバー時） */
#topmenu ul.menu li a:hover{ /*カーソルが乗った時*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:; /*背景色()*/
background-image:url(//stat.ameba.jp/user_images/20131019/17/takeblo1329/57/91/j/o0189004012721243131.jpg);/*背景イメージ*/
}
あとは、CSS編集の一番下の「保存」ボタンを押すだけです！
すると、
こういったメニューボタンが作成されて、
マウスをのせると黄色く変わります。
どうでしょうか。
今回は、980pxの幅で作成しています。
980px ÷ 5つ ＝ 196px
左右の余白をそれぞれ3.5pxとっていますので、
3.5px ＋ 189px ＋ 3.5px ＝ 196px
で、画像サイズを189pxとしています。
余白や線の太さの関係で、1つのボタンの幅をご自分のサイズに決めて、いろいろとチャレンジしてみてもいいですね^^!
以上、アメブロカスタマイズでした。
LIDS澄川・ライフデザインスクール
川上 雄大