CSSメニュバー
さて、大手のブログさんではこういった感じに
メニューバーが設置してある所が多いですよね?
以前にCSSを使わず、画像ファイルを利用したHTML仕様の方法を紹介しましたが、
今回の方法が非常に楽だと思います。というわけで、
今回は【CSSを利用した】方法を紹介したいと思います。
もちろん、ロールオーバー(マウスを乗せると画像が変わる)方法も紹介します!
というわけで新管理画面にて説明をしていきます。

1. まずはブログ設定をクリックします。
1


2. 「基本設定」の「デザイン」をクリック。
2


3. 「デザインカスタマイズ」をクリック。
3
※カスマイズ前に「保存」でバックアップをすることを強くお勧めします。


4.「スタイルシート」にて「ブログタイトルエリア」に移動します。
1

正直ブログタイトルエリアじゃなくてもいいかもしれません。
でも、ブログ上部に置くメニューバーだからここに置いておくのが良いと思います



今回CSSにて使う重要なタグを紹介します
#globalnaviというタグです。

このタグでメニューバーを作っていきます。

サンプルタグです。ここから自分でカスタマイズしてみてください!
#globalnavi{
margin: 0 auto;
padding: 0;
width: 980px;
height:25px;
font-size:12px;
*font-size:12px;
background:black repeat-x scroll 0 0;
font-family : Arial,'MS Pゴシック',sans-serif ;
}

#globalnavi ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#globalnavi li{
float: left;
margin: 0;
padding: 0;

}

#globalnavi a{
text-align: center;
display:block;
padding: 3px 10px 3px 10px;
color: white;
font-weight: bold;
text-decoration: none;
border-right:1px solid #808080;
margin:2px 0px 0px 0px;
}

#globalnavi a:hover{
background-color:#808080;
color: white;
font-weight: bold;
text-decoration: none;
border-right:1px solid #808080;
}
何だよこれ!という方に説明書きました↓

最初の
#globalnavi
margin,padding余白などの設定。基本はこの0で良いでしょう。
widthどのくらいメニューバーを横へ伸ばすかということ。
ブログの全体の最大値を設定すると良いと思います。
heightどれくらい縦へ伸ばすかということ。どうでも良い人はこのままでOK。
font-size,font-familyフォントの大きさ、種類といったもの。まぁそのままです
backgroundデフォルトでどんな色合いにするかということ。

※なお、当ブログではURLを利用して画像ファイルを使っています。
こんな感じ→ 「background:url("画像ファイルURL") repeat-x scroll 0 0;」


続いて、
#globalnavi ul{
list-style-type:リストの先頭に表示するマーカー文字の設定です。
ここは基本的に不要なのでnoneで良いでしょう。
(試しにこのタグを全部消してみればわかります。必須タグです)


続いて
#globalnavi li{
float: left;ボックスを並べるのに必須タグです。横に並べるときにはこのままに。

続いて
#globalnavi a{はマウスを乗せる前の設定です。
ここでのcolorといった箇所はテキスト部分に該当します。
font-weight,text-decorationといった箇所も同じです。
なおborder-right:1px solid #808080;テキストとテキストの間の縦線部分です。
色に合わせて変えてみましょう。

#globalnavi a:hover{はマウスを乗せた時の設定です。
ここがロールオーバー設定での重要な場所になります。
基本的に#globalnavi aと同じ感じで設定可能です。



この設定ができたらあとは簡単!メニューバーをすいすい作ります。


トップページ.個別記事ページ.カテゴリアーカイブ.月別アーカイブ内でも
ある程度適した場所があります。

■場所としては
1
<div id="content" class="hfeed">
より上にメニューバーを挿入すると見栄えが良いと思います。
(トップ&個別&カテゴリ&月別共通)

最初に何か「あ」などと文字を入れてから
「プレビュー」で確認してから変更するのをお勧めです。


こんな感じにセットしたりできます。
サンプル(というウチが設置してるタグ)
<div id="globalnavi">
<ul>
<li><a href="http://blog.livedoor.jp/kimagure_ryu/">トップページ</a></li>
<li><a href="http://blog.livedoor.jp/kimagure_ryu/archives/288856.html">このブログについて</a></li>
<li><a href="http://blog.livedoor.jp/kimagure_ryu/archives/288765.html">相互リンク様の紹介</a></li>
<li><a href="http://blog.livedoor.jp/kimagure_ryu/archives/688492.html">TOP絵大感謝です</a></li><li>
<li><a href="http://blog.livedoor.jp/kimagure_ryu/archives/1077748.html">プロフ画像大感謝です</a></li>
<li><a href="http://www.formzu.net/fgen.ex?ID=P62416728" Target="_blank">メールフォーム</a></li>
</ul>
</div>


テキストの範囲内ならこれ以上増やせますし、これ以下にだって減らせます。
CSSの場合だとこの点がプラスになりますね。

完了したらプレビューで正常に反映されてるか確認して
OKだったらこの内容に変更するをクリック。
そしてデザインを反映をクリックで完了です!
お疲れ様でした!



■参照元
http://www.css-designsample.com/csslayout/technique-3.html


完成版!
このサンプルのまま設定すると
仮にトップページにマウスをあわせると・・・
2

メニューバーが灰色になります!
3

こういったメニューバーを手っ取り早く作りたい人はタグそのまま
持って行っても結構です!

※2013年1月追記
タグの修正をしました。管理人は独学でHTMLやCSSを勉強したので
根本的な間違いがあるかもしれません。あくまで参考程度にお願いします。