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

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

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

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

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

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

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つのメニューボタンの幅 */

}



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

関連記事
[ 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/

とほほのWWW入門
http://www.tohoho-web.com/www.htm
[ 2009/12/19 23:43 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2016/09 | 10
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2016/09 | 10
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。