うちの横は遊歩道

生活費のため積立解約、貯金ゼロ。親と弟の借金も発覚し、節約もままならぬ貧乏一家
TOP > Webサイト > ブログカスタマイズ > メニューバーの設置方法【FC2ブログ】

メニューバーの設置方法【FC2ブログ】

2014.06.30  [edit]
スポンサードリンク

横一列のメニューバーを
ブログ名(ヘッダー)の下に表示する方法です


メニューバー


次の記述を「HTML編集」の設置したい場所にコピペします。


赤い部分は各自希望のURL、リンク名に変えてください。
以下は例として6件のメニュー項目を作ってありますが、希望にあわせて増やしたり減らしたりしてください。

<!--▼ メニューバー ▼-->
<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">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
</ul>
<!--▲ メニューバー ▲-->


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


◆例えば、当ブログだとこんな感じ
URLを囲む"(ダブルクォーテーション)は
うっかり消さないように注意です
<li><a href="http://youhodou.blog.fc2.com/">トップページ</a></li>
<li><a href="http://youhodou.blog.fc2.com/archives.html">サイトマップ</a></li>
<li><a href="http://youhodou.blog.fc2.com/blog-category-1.html">日々のこと</a></li>




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

/* ▼メニューバー▼ */
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; /* 1つのメニューボタンの幅 */
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;
}
/* ▲メニューバー▲ */


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


プレビューで確認して
おかしくなければ「更新」ボタンを押して完了です^^
ランキング ランキングに参加しています
参考になる節約ブログさんがいっぱいです

節約・貯蓄 ブログランキングへ にほんブログ村 その他生活ブログ 貧乏・生活苦へ

スポンサードリンク



こちらの記事もどうぞ
ブログカスタマイズの関連記事
ブログを書いてる人
うちの横は遊歩道
のりすけ

母と弟に借金あり
家計は常に火の車
このブログの登場人物
貧乏への転落

みんなの節約術を参考に
お金を貯めて家を出たい

にほんブログ村 その他生活ブログ 貧乏・生活苦へ
節約・貯蓄 ブログランキングへ

月別記事
検索フォーム




上へ戻る