メニューボタンを設置しよう！　【新テンプレート用CSSカスタマイズ】

今回はアメブロの新テンプレート用のCSSカスタマイズでメニューボタンが設置出来る

チュートリアルをご紹介していきますね。

参考ブログはコチラ↓学び場サミットブログです。

ヘッダー画像の上に７個のメニューボタンが並んでいるのが分かると思います。

そして使用したメニューボタンの１つがこれ↓です。

※白文字の画像のため背景に黒色をここでは敷いています。

メニューボタンはマウスオーバー時のも合わせて１枚の画像で作成しています。

学び場サミットブログで使用したCSSが以下になります。

-------------------------------------------------------------------------------------

/* メニューボタン（global） */

div#global{
position:absolute;
top:0px;
width:980px;
height:40px;
margin:0;
padding:0;
z-index:1;
}

div#global ul{
margin:0;
padding:0;
list-style:none;
}

div#global ul li{
margin:0;
padding:0;
list-style:none;
float:left;
}

a.global01{
top:345px;/*topからの画像の位置*/
left:20px;/*leftからの画像の位置*/
width:140px;
height:40px;/*画像の高さ（半分）*/
text-indent:-9999px;
position:absolute;
display:block;
/* メニュー　１　画像 */
background:url("http://stat.ameba.jp/user_images/20120208/17/mnbb-smt/56/3c/p/o0140008011782019194.png ");
}

a.global01:hover{
/* メニュー　１ｍ　画像 */
background-position: 0 -40px;/*画像の高さ（半分）*/
}

a.global02{
top:345px;/*topからの画像の位置*/
left:170px;/*leftからの画像の位置*/
width:140px;
height:40px;/*画像の高さ（半分）*/
text-indent:-9999px;
position:absolute;
display:block;
/* メニュー　１　画像 */
background:url("http://stat.ameba.jp/user_images/20120208/17/mnbb-smt/1b/d6/p/o0140008011782019875.png ");
}

a.global02:hover{
/* メニュー　１ｍ　画像 */
background-position: 0 -40px;/*画像の高さ（半分）*/
}

a.global03{
top:345px;/*topからの画像の位置*/
left:330px;/*leftからの画像の位置*/
width:140px;
height:40px;/*画像の高さ（半分）*/
text-indent:-9999px;
position:absolute;
display:block;
/* メニュー　１　画像 */
background:url("http://stat.ameba.jp/user_images/20120208/17/mnbb-smt/1d/c6/p/o0140008011782019197.png ");
}

a.global03:hover{
/* メニュー　１ｍ　画像 */
background-position: 0 -40px;/*画像の高さ（半分）*/
}

a.global04{
top:345px;/*topからの画像の位置*/
left:470px;/*leftからの画像の位置*/
width:140px;
height:40px;/*画像の高さ（半分）*/
text-indent:-9999px;
position:absolute;
display:block;
/* メニュー　１　画像 */
background:url("http://stat.ameba.jp/user_images/20120301/10/mnbb-smt/83/d3/p/o0140008011824941918.png ");
}

a.global04:hover{
/* メニュー　１ｍ　画像 */
background-position: 0 -40px;/*画像の高さ（半分）*/
}

a.global05{
top:345px;/*topからの画像の位置*/
left:610px;/*leftからの画像の位置*/
width:140px;
height:40px;/*画像の高さ（半分）*/
text-indent:-9999px;
position:absolute;
display:block;
/* メニュー　１　画像 */
background:url("http://stat.ameba.jp/user_images/20120208/17/mnbb-smt/6f/91/p/o0140008011782019198.png ");
}

a.global05:hover{
/* メニュー　１ｍ　画像 */
background-position: 0 -40px;/*画像の高さ（半分）*/
}

a.global06{
top:345px;/*topからの画像の位置*/
left:750px;/*leftからの画像の位置*/
width:140px;
height:40px;/*画像の高さ（半分）*/
text-indent:-9999px;
position:absolute;
display:block;
/* メニュー　１　画像 */
background:url("http://stat.ameba.jp/user_images/20120208/17/mnbb-smt/b6/7e/p/o0140008011782019196.png ");
}

a.global06:hover{
/* メニュー　１ｍ　画像 */
background-position: 0 -40px;/*画像の高さ（半分）*/
}

a.global07{
top:345px;/*topからの画像の位置*/
left:850px;/*leftからの画像の位置*/
width:140px;
height:40px;/*画像の高さ（半分）*/
text-indent:-9999px;
position:absolute;
display:block;
/* メニュー　１　画像 */
background:url("http://stat.ameba.jp/user_images/20120208/17/mnbb-smt/df/2e/p/o0140008011782019874.png ");
}

a.global07:hover{
/* メニュー　１ｍ　画像 */
background-position: 0 -40px;/*画像の高さ（半分）*/
}

------------------------------------------------------------------------

任意で数値やURLを変更して下さい。

top　　　topからの画像の位置

left　　　leftからの画像の位置

width　　画像の横幅のサイズ

height 画像の縦幅の半分のサイズ

background:url("画像のURL");

また、CSSだけではメニューボタンは表示されないので今度はフリースペースに以下の

改行を外したタグを挿入します。

※学び場サミットブログで使用したタグです。

------------------------------------------------------------------------

<div id="global"><ul><li><a href="http://ameblo.jp/mnbb-smt/entry-11156043854.html " class="global01"></a></li><li><a href="http://mnbb-smt.com/price.html " target="_blank" class="global02"></a></li><li><a href="http://ameblo.jp/mnbb-smt/entry-11163317900.html " class="global03"></a></li><li><a href="http://mnbb

smt.com/exhibition_company_recruitment.html" target="_blank" class="global04"></a></li><li><a href="http://ameblo.jp/mnbb-smt/theme-10049428281.html " class="global05"></a></li><li><a href="http://mnbb-smt.com/access.html " target="_blank" class="global06"></a></li><li><a href="http://ameblo.jp/mnbb-smt/entry-11163312337.html " class="global07"></a></li></ul></div>

------------------------------------------------------------------------

これでOKです！

ご自分で編集しやすいようにメニューボタン１つの場合のCSSを記述しておきます。

青文字部分を変更してください。

--------------------------------------------------------------------------

/* メニューボタン（global） */

div#global{
position:absolute;
top:0px;
width:980px;
height:40px;
margin:0;
padding:0;
z-index:1;
}

div#global ul{
margin:0;
padding:0;
list-style:none;
}

div#global ul li{
margin:0;
padding:0;
list-style:none;
float:left;
}

a.global01{
top:　0px;/*topからの画像の位置*/
left:　0px;/*leftからの画像の位置*/
width:　0px;
height:　0px;/*画像の高さ（半分）*/
text-indent:-9999px;
position:absolute;
display:block;
/* メニュー　１　画像 */
background:url("画像のURL");
}