今度は全部画像です
マウスをのっけてみてください・・↓
はじめにメニュー画像を用意します
1枚は160px×60px 透過png (お持ち帰り自由)
画像が出来ましたら
メニュー部分をメモ帳とかを使って作ります（例として6項目で）
<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>
<li id="menu06"><a href="http://amember.ameba.jp/amemberRequest.do?oAid=あなたの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> <li id="menu06"><a href="http://amember.ameba.jp/amemberRequest.do?oAid=あなたのID" title="メンバー募集中！だよ">アメンバー</a></li> </ul> </div>
↑このように改行をなくして全部くっつけてからフリースペースに貼り付けます
その次は ＣＳＳです・・・
#topmenu{
width:960px;/*メニューの幅 Ｃ×メニュー数*/
height:60px;/*画像の高さ*/
margin:10px auto 20px;/*スキマ 上Ａ auto 下Ｂ*/
padding: 0;
dislay: block;
}
#topmenu ul{
margin:0;
padding:0;
list-style-type:none;
}
#topmenu li{
width:160px;/*1枚の画像の幅Ｃ*/
height:60px;/*画像の高さ*/
margin:0;
padding:0;
float:left;
list-style-type:none;
background-repeat:no-repeat;
}
#topmenu li a{
text-decoration:none;
text-indent:-9999px;
display:block;
height:100%;
}
#topmenu li a:hover{
background-image:none;
}
#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);
}
#menu06 a{
background-image:url(はじめに表示する画像のURL);
}
#menu06{
background-image:url(マウスオーバー画像のURL);
}
メニュー数5個なら
#menu06 a{
background-image:url(はじめに表示する画像のURL);
}
#menu06{
background-image:url(マウスオーバー画像のURL);
}
これを削除して
メニュー数が7個なら
#menu07 a{
background-image:url(はじめに表示する画像のURL);
}
#menu07{
background-image:url(マウスオーバー画像のURL);
}
を加えます・・・
今回は簡単にjqueryを使ってヘッダー下に設置します
※ＣＳＳでやったほうが表示は速く表示されます
フリープラグインにおまじないが入っているか確認します
新デザインではjqueryが標準で読み込まれていませんので入れないと動作しません
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
または（ ↑↓どちらか1つが入っていれば大丈夫です ）
<script type="text/javascript" src="http://stat.ameba.jp/common_style/js/library/jquery/jquery-1.6.2.min.js"></script>
上のどちらかが入っているか確認して
なければどちらかをフリープラグインの一番最初にコピペします
入れたあるいは入っているのを確認したら・・フリープラグインに↓コピペ
<script type="text/javascript">
$(function(){
$("#topmenu").insertAfter(".skinHeaderArea2")
});
</script>
画像を作るときの注意です・・・透過画像を使っている場合・・
最初に表示されるメニューボタン画像がマウスオーバー時の画像より小さいと・・
下にマウスオーバー時の画像が見えてしまいます・・・