こちらはヘッダー下にメニューをつけるＣＳＳ部分です
先に ヘッダー下に横メニューをつけちゃう(設置編)
をお読みください
参考： CSS メニューを作っちゃおう5（横メニュー1）
メニューの横幅がブログより狭くても中央に表示されます
マウスをのっけてみてください↓・・
↑これらの画像を使って・・・
ＣＳＳの最後に・・・
/*横メニュー（画像）*/
#topmenu{
font-size:14px;/*文字サイズ*/
font-weight:normal;/*太字にするにはnormal→boldに*/
width: 600px;/*全体の幅 Ａ(Ｄ×メニュー数)*/
margin:10px auto 50px;/*メニューの上と下のスキマ 上Ｂ auto 下Ｃ*/
display: block;
line-height:2;/*メニューの縦を大きくするときは3に*/
}
#topmenu ul{
margin:0;
padding:0;
list-style-type:none;
}
#topmenu ul li{
width:150px;/*メニュー1つの幅Ｄ*/
margin:0;
padding:0;
text-align:center;
float:left;
}
#topmenu li a{
color:#ffffff;/*文字色*/
background:url(画像のＵＲＬ);
background-position: right bottom;/*Ｅ*/
display: block;
text-decoration:none;
}
#topmenu li a:hover{/*マウスオーバー時*/
color:#cccccc;/*文字色*/
background-position: right top;/*Ｆ*/
}
全体の幅Ａ と メニュー1つの幅Ｄの関係
メニュー1つが196pxで5項目なら 196×5=980px
メニュー1つが163pxで6項目なら 163×6=978px
メニュー1つが140pxで7項目なら 140×7=980px
でブログの幅だいたいピッタリになります
※ピッタリでなくても中央寄せになります（オーバーするのは困りますが・・）
メニューの上下の位置関係（スキマ）
heightを設定してもいいのですが・・・これでいいや～
line-height:2;/*メニューの縦を大きくするときは3に*/ この部分で・・・
同じ画像を使ってもCSSのＥとＦの top と bottom 部分を入れ替えることで2通りの見え方があります
上で配布している画像の上部分と下部分を使って表示していますので
縦に大きなメニューにすると・・
上下ほとんど変わらない画像になってしまいますので注意ください