FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

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

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

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

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

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 class="menu_bar_end"><a href="<%url>blog-category-3.html">カテゴリ３</a></li>
</ul>

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

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

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

#menu_bar li a {
～
width:100px; /* １つのメニューボタンの幅 */
～
}

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

関連記事

[ 2009/04/03 01:36 ] カスタマイズ共通カスタマイズ | TB(0) | CM(15)

≪ 記事ページを古い順に表示する | HOME | 公式カテゴリ（カスタマイズ向け）のツリー化 ≫

[ 3817 ]

わざわざ記事にしてただきもうしわけありません...。
とても感謝してます。

これからもがんばってください！
応援してます^^

[ 2009/04/03 16:59 ] [ 編集 ]

[ 3820 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/04/03 20:56 ] [ 編集 ]

[ 3914 ]

参考にさせていただいています。

質問なのですが、ちゃんさんの「横メニューの設置」を参考にするとメニューが全て中央に配置されます。
いたおさんの横メニューバーの設置を参考にすると左端にメニューが詰めて表示されます。
カスタマイズしているテンプレが幅可変で、いたおさんの横メニューバーのデザインを使いたいので、どうか幅可変に対応できるようメニューの中央表示の仕方を教えていただけませんか？

[ 2009/04/15 03:27 ] [ 編集 ]

[ 3917 ] > 空川翔さん

記事を掲載したのでこちらを参考にしてください。

横メニューバーを幅一杯に表示する（リキッドレイアウト）
http://10plate.blog44.fc2.com/blog-entry-186.html

[ 2009/04/15 22:16 ] [ 編集 ]

[ 3918 ]

いたおさん回答ありがとうございました！
わざわざ記事にして頂いて、お手間を取らせて申し訳ないです。
早速導入して無事カラム落ちもなくなりました！
他記事も大変参考になりました。

改めまして、ありがとうございました！
今後も頑張ってください＞＜

[ 2009/04/16 03:47 ] [ 編集 ]

[ 7425 ]

http://pspbannoukaizou.blog50.fc2.com/

このサイトのように、文字数に応じてメニューバーの幅を設定するにはどうすればいいのでしょうか？

もしそれについての記事が元からあったら、すみませんm(_ _)m
見落としてますね...

[ 2009/12/14 22:59 ] [ 編集 ]

[ 7427 ] > みやきんさん

私が紹介している横メニューは文字数に応じて自動的に幅を変えることは出来ません。HTMLを編集して、幅を変えたいメニューを以下の様に設定してください。

<li><a style="width:150px" href="<%url>">トップページ</a></li>

[ 2009/12/14 23:30 ] [ 編集 ]

[ 7434 ]

いつもありがとうございます＾＾

[ 2009/12/15 22:18 ] [ 編集 ]

[ 7438 ] > みやきんさん

解決して良かったです＾＾
ちなみにダブルクォーテーション「"」が抜けている部分があるようです。

～ onMouseOut="bgch('header_body','0')">CFW</a></li>

[ 2009/12/16 00:06 ] [ 編集 ]

[ 7441 ]

どうりで表示されなかったんですね…

ありがとうございます＾＾

よくこんな細かいところに気付けますね＞＜

[ 2009/12/16 16:50 ] [ 編集 ]

[ 7445 ] > みやきんさん

解決して良かったです＾＾
運良く気付くときもありますが、沢山カスタマイズ、プラグインを用いてる場合は殆ど解りません＾＾；

[ 2009/12/16 22:47 ] [ 編集 ]

[ 7453 ]

そうですか...
ありがとうございます＾＾;

いたおsってHTMLとかその他のプログラミング言語の資格って持っているんですか？

[ 2009/12/18 19:42 ] [ 編集 ]

[ 7457 ] > みやきんさん

いえ、資格は持ってないです＾＾；

[ 2009/12/18 23:40 ] [ 編集 ]

[ 7461 ]

でもすごいですよねぇ...

本とかで独学なんですか？

って、ちょっと質問攻めになっちゃってますね＾＾;

[ 2009/12/19 13:30 ] [ 編集 ]

[ 7468 ] > みやきんさん

HTMLやCSSに関する本は持っていません。ネット上にある情報を参考にしています。

特にこちらのサイトにはお世話になりました。

【HTMLタグの簡単検索】TAG index - ホームページ作成情報
http://www.tagindex.com/

とほほのＷＷＷ入門
http://www.tohoho-web.com/www.htm

[ 2009/12/19 23:43 ] [ 編集 ]

コメントの投稿