『CSS メニューを作っちゃおう7 画像の置き換え』

1週間ほど前から耳に圧迫感があって・・

耳をふさがれているような状態であまりよく聞えません

バイクに乗っていても風の音は聞えますが・・

エンジンの音がほとんど聞えない状態です・・

1日おきに病院へ通っていますし

先日は耳の奥の（麻酔して鼓膜の後ろ）水？をとってもらったのですが

ほとんど聞え方は変わらないです・・

メニエールで右の耳がほとんど聴力がありませんから

左の耳までおかしくなっちゃったら困るんです・・　マジで・・

精神的にまいっちゃっているようで・・

今日は休みで朝から食事もしないでこんな記事を書いていました・・

夢中になっていると忘れるから・・・

朝昼抜かしてもう晩御飯だよ～

ごめんなさい

今週もコメント欄は開放できそうにありません

すみません　m(_ _)m

CSS　メニューを作っちゃおう（動画はドコ？）
CSS　メニューを作っちゃおう（動画はドコ？）2
CSS　メニューを作っちゃおう（動画はドコ？）3

CSS　メニューを作っちゃおう 4

CSS　メニューを作っちゃおう5（横メニュー1）

CSS　メニューを作っちゃおう6（横メニュー2）

たいぶ長いこと間が開いてしまいましたが・・・

本当は全部を1枚の画像にしちゃいたいのですが・・

それだとCSSや画像を作るのに面倒そうなのでバラバラな画像で出来る方法を説明します

・・って　わたしが記事で説明するのが面倒なだけなんですが

一応・・画像先読み対策？を取っていますので最初の一瞬ちらつくことはないはずです

ヘッド画像の上や下に設置する方法もいままではＣＳＳで説明してきましたが

今度はjQueryを使ってみます

見本のブログ　http://ameblo.jp/exlink02/

まずは↓こんなメニュー画像を作ります（↓お持帰り自由）

最初に表示されるメニュー画像とマウスがのった時に表示される画像の2種類を作ってください

あたし・・そんな面倒なことじぇったいにムリ～！！！　って～方は・・

最初に表示される方の画像だけでもいいです・・

でもマウスがのった時に画像は変化しませんよ（裏ワザ的なのもあるんですが・・）

ベーシック用横5メニュー（横幅800px 1枚は160px×60px　透過png）

グレイ・ブルー・ピーチ・グリーン用横5メニュー（横幅760px 1枚は152px×57px　透過png）

画像を作るときの注意です・・・透過画像を使っている場合・・

最初に表示されるメニューボタン画像がマウスオーバー時の画像より小さいと・・

下にマウスオーバー時の画像が見えてしまいます・・・

画像さえ出来ればコッチの物です？

メモ帳とかを使ってメニュー項目を作ります

項目は自由に作ってかまいません

CSS　ルームのメニュ2 　を参考にしてください

<div id="topmenu">
<ul>
<li id="menu01"><a href="http://ameblo.jp/あなたのID/" title="トップページに戻るよ">トップ</a></li>
<li id="menu02"><a href="http://profile.ameba.jp/あなたのID/" title="ルームに飛ぶよ">ルーム</a></li>
<li id="menu03"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのID" title="いつもペタありがと～">ペタ</a></li>
<li id="menu04"><a href="http://blog.ameba.jp/reader.do?bnm=あなたのID" title="マジっすか～？">読者</a></li>
<li id="menu05"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID" title="返事遅れたらごめんね">メッセージ</a></li>
</ul>
</div>

出来ましたら改行を削除してからフリースペースに貼り付けます

<div id="topmenu"><ul><li id="menu01"><a href="http://ameblo.jp/あなたのID/" title="トップページに戻るよ">トップ</a></li><li id="menu02"><a href="http://profile.ameba.jp/あなたのID/" title="ルームに飛ぶよ">ルーム</a></li><li id="menu03"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのID" title="いつもペタありがと～">ペタ</a></li><li id="menu04"><a href="http://blog.ameba.jp/reader.do?bnm=あなたのID" title="マジっすか～？">読者</a></li><li id="menu05"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID" title="返事遅れたらごめんね">メッセージ</a></li></ul></div>

※改行が残っているとメニューボタンが一列に並びません

CSSの最後に・・・・

#topmenu ul{
width:760px;/*ベーシックの場合は800pxです*/
height:57px;/*画像の高さ*/
margin: 0;/*注1*/
padding: 0;
dislay: block;
}
#topmenu li{
width:152px;/*1枚の画像の幅*/
height:57px;/*画像の高さ*/
float: left;
list-style-type:none;
background-repeat:no-repeat;
}
#topmenu li a{
text-decoration:none;
text-indent:-9999px;
display:block;
height:100%;
background-repeat:no-repeat;
}
#menu01 a{
background-image:url(はじめに表示する画像のURL);
}
#menu01{
background-image:url(マウスオーバー画像のURL);
}
#menu02 a{
background-image:url(はじめに表示する画像のURL);
}
#menu02{
background-image:url(マウスオーバー画像のURL);
}
#menu03 a{
background-image:url(はじめに表示する画像のURL);
}
#menu03{
background-image:url(マウスオーバー画像のURL);
}
#menu04 a{
background-image:url(はじめに表示する画像のURL);
}
#menu04{
background-image:url(マウスオーバー画像のURL);
}
#menu05 a{
background-image:url(はじめに表示する画像のURL);
}
#menu05{
background-image:url(マウスオーバー画像のURL);
}
#topmenu li a:hover{
background-image:none;
}

※↑マウスオーバー時の画像を使わない場合はピンクのCSSは削除します

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

もし・・・メニューとヘッド画像や記事の間にスキマを作りたい場合は・・
上のＣＳＳの　margin: 0;/*注1*/　この部分・・

margin:10px 0;/*注1*/　　←メニューの上下に10pxのスキマを作ります
margin:10px 0 0;/*注1*/　　←メニューの上に10pxのスキマを作ります
margin:0 0 10px;/*注1*/　　←メニューの下に10pxのスキマを作ります

もし・・メニューを並べたときスキンの幅より狭くて中央にしたい場合は

#topmenu ul{
width:600px;/*ベーシックの場合は800pxです*/ ←実際のメニューの横幅を設定
height:57px;/*画像の高さ*/
margin:0 auto;/*注1*/　　← auto を付けて中央寄せにします
padding: 0;
dislay: block;
}

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

見本ブログのようにヘッド画像の下にメニューをつける場合は・・