うちの横は遊歩道

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
</ul>
<!--▲ メニューバー ▲-->

※上記のタグを貼り付ける場所は
タイトル＆ブログ説明文の下あたりです。


◆例えば、当ブログだとこんな感じ
URLを囲む"（ダブルクォーテーション）は
うっかり消さないように注意です



次に、「スタイルシート編集」の一番後ろに次の記述をコピーして貼り付けます。

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* １つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}
#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */

※色や大きさなどは、お好みにあわせて設定してください。


プレビューで確認して
おかしくなければ「更新」ボタンを押して完了です^^

こちらの記事もどうぞ

ブログカスタマイズの関連記事

• FC2ブログの広告を消す方法【通常編】
• メニューバーの設置方法【FC2ブログ】