以下の内容はhttp://10plate.blog44.fc2.com/blog-entry-178.htmlより取得しました。


横メニューバーを幅一杯に表示する

以前に「横メニューバーをブログタイトル下に表示する 」を紹介しました。

しかし、メニューを幅一杯に表示しようとした場合、"一番右の最後の区切り線"は邪魔になりました。

この"一番右の最後の区切り線"を消す方法を紹介します。

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



そしてスタイルシートの末尾に次の記述を加えてください。

#menu_bar li.menu_bar_end a {
border-right:none;
}



これで"一番右の最後の区切り線"は消えます。
あとはメニューボタンの幅を調整してください。

#menu_bar li a {

width:100px; /* 1つのメニューボタンの幅 */

}



あまりギリギリまで広げようとすると、ブラウザによっては折り返されてしまうこともあります。
できれば複数のブラウザで確認することをお勧めします。

関連記事



以上の内容はhttp://10plate.blog44.fc2.com/blog-entry-178.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.13