うぃず FC2テンプレート

メニューバーの項目の数を増やしたり減らしたりする方法を紹介したいと思います。

用途によっては少なくて良いかもしれないし、かなりの数になってしまったりするところですね。
デフォルトでは５つに設定しています。（１番目、２番目、３番目、４番目、５番目としています。）

・すごく簡単な書き換え程度なので、慣れればあっという間に作業を終わらせることが出来ます。


スポンサードリンク


まずHTMLの編集を行います。
以下のような記述を探してください。上部にあると思います。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">１番目</a></li>
<li><a href="<%url>">２番目</a></li>
<li><a href="<%url>">３番目</a></li>
<li><a href="<%url>">４番目</a></li>
<li><a href="<%url>">５番目</a></li>
</ul>
<!--▲ メニューバー ▲-->

<%url>はブログのアドレスを指しています。例えば僕のブログだと、http://10lab.blog.fc2.com/に相当するものとなってます。

記事をリンクさせたい場合、<%url>blog-entry-●●.html
カテゴリをリンクさせたい場合、<%url>blog-category-●●.html
といったように適宜加えてください。

あとは、【１番目、２番目】といった名前を変更してください。

その後、スタイルシートの変更を行います。

/***************************************** ▼ メニューバー ▼ */
#menu_bar li.menu_bar_end a {
border-right:none;
}

ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:30px; /* 高さ */
background-color:#333333; /* 背景色 */
margin-top:0px; /* 上の間隔 */
margin-bottom:0px; /* 下の間隔 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
border-bottom:5px solid #666666; /* 下飾り線 */
border-top:3px solid #DC143C; /* 区切り線 */
}

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

#menu_bar li a {
height: 30px;
display:block;
text-align:center;
border-right:1px solid #ffffff; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#333333; /* メニューボタンの背景 */
text-decoration:none;
border-bottom:5px solid #666666; /* 下飾り線 */
}

#menu_bar li a:hover{
color:#FFFFFF; /* マウスが乗ったときのリンク文字の色 */
background-color:#777777; /* マウスが乗ったときの背景色 */
text-decoration:none;
border-bottom:5px solid #DC143C; /* マウスが乗ったときの左飾り線 */
}
/***************************************** ▲ メニューバー ▲ */

上記スタイルシートの赤い部分値を変更してください。
値は、【100% 】÷【メニューバーの項目の数】です。７つの場合は約14%となります。
メニューバーが５つの場合は20%となり割り切れますが、
大抵の場合、割り切れないと思います。

割り切れない場合は右端の方が余ります。

関連記事

• ブログの上部にスクロールしても常に表示されるメニューバーっぽいものを設置したい
• メニューバーの項目数を増やしたり減らしたりしたい