横メニューをタイトルの下に　表示させると　一見　HTML風の
ブログが　完成します。見た目だけでなく、アクセスを集めたいカテゴリーや
ページに誘導することができるので　FC2ブログのテンプレートをカスタマイズしてみましょう。

カスタマイズの方法は、意外にも　簡単で、テンプレートのHTML部分と CSS部分に　それぞれ　以下のタグを挿入するだけです。 CSS部分は、任意の場所に　挿入します。（私の場合は、一番下部分に挿入しました）
初心者さんや　何が何だか　ハテナ？という方は、一番下部分に挿入するのが　安全です。

HTML部分に挿入するタグ。（右クリックで　すべて　選択し　コピーしてくださいね）

<!--▼▼ 横ナビゲーションメニューバー ▼▼--> <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> <li><a href="<%url>blog-category-3.html">カテゴリ３</a></li> </ul> <!--▲▲ 横ナビゲーションメニューバー▲▲-->

続いて　CSS　部分に挿入するタグは、以下になります。
同じように　右クリックでコピー　し　貼りつけで完了です。

/* ▼▼横ナビゲーションメニューバー▼▼ */ 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:#000000; /* マウスが乗ったときのリンク文字色 */ background-color:#71b7f7; /* マウスが乗ったときの背景色 */ text-decoration:none; } /* ▲▲横ナビゲーションメニューバー▲▲ */

※　間違えた時　修正しやすいので　コメントアウトのタグ　→　<!--　-->
とか　スタイルシートの　記述されている　▲ */は、そのまま　コピー貼ります。

※　スタイルシートの中には、メニューボタンの背景や　マウスが乗ったときのリンク色
の記述が　あるので　任意で　webカラーを　変えていきます。

※　ブラウザによっては、表示が　崩れるので　メニューを増やしすぎないように

※　記事　カテゴリーへの　リンク部分は　修正してくださいね。


ちなみに　当ブログの横メニューは　以下のようなリンク先にしました。
記事1　部分には　プロフィールを書き　プロフィールを書いた個別記事（個別エントリー）
にリンクを張っています。

どうしても　見せたい　決め？ページがある場合は、
blog-entry-△◇◎.htmlに　リンクを張ります。

記事が　次々と　更新されていく内容については、
カテゴリーにリンクを張るようにします。

blog-category-▼.html

<!--▼▼ 横ナビゲーションメニューバー ▼▼--> <ul id="menu_bar"> <li><a href="<%url>">トップページ</a></li> <li><a href="<%url>archives.html">サイトマップ</a></li> <li><a href="<%url>blog-entry-1424.html">管理人情報</a></li> <li><a href="<%url>blog-category-61.html">報酬実績</a></li> <li><a href="<%url>blog-category-27.html">稼ぐコツ</a></li> <li><a href="<%url>blog-category-76.html">アマゾンアフィリ</a></li> <li><a href="<%url>blog-category-21.html">アフィリ初心者さん</a></li> <li><a href="<%url>blog-category-31.html">ブログカスタマイズ</a></li> </ul> <!--▲▲ 横ナビゲーションメニューバー ▲▲-->

転載元： fc2ブログテンプレート工房さん　カスタマイズby 西ちゃん