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

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

横メニューバーを幅一杯に表示する（リキッドレイアウト）

以前に横メニューバーをブログタイトル下に表示すると横メニューバーを幅一杯に表示する記事を紹介しましたが、今回はこれをリキッドレイアウトに対応させるカスタマイズを紹介します。

スタイルシートを編集します。
赤い行を追加し、青い行を削除してください。

/* ▼メニューバー▼ */
～

#menu_bar li {
～
width:14%; /* １つのメニューボタンの幅（％） */
}

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

～
/* ▲メニューバー▲ */


％の数値はメニュー数に応じて変更してください。

単位は小数点以下も対応しますが、あまり100%ギリギリまで近づけると、ブラウザによっては折り返されてしまう場合があります。

特にIEはボーダー幅の分、他のブラウザより幅をとることがあります。少し数値に余裕を持たせるか、複数のブラウザで確認してカスタマイズすることをお勧めします。

関連記事
[ 2009/04/15 22:14 ] カスタマイズ 共通カスタマイズ | TB(0) | CM(9)

≪ タイトルを画像にしたときのSEO | HOME | 横メニューバーに枠をつける ≫

[ 3920 ]
おせわになっております。
以前もいたお様のテンプレートを利用させていただいておりまいしたが、この度新ブログ立ち上げにあたり、最後いたお様のテンプレートをカスタマイズさせていただきました。
ありがとうございます。
今後もこちらの記事を参考にさせていただきます。
[ 2009/04/16 23:59 ] [ 編集 ]
[ 3921 ] > dietさん
また私のテンプレートを使ってくれてありがとうございます。

それにしてもdietさんのカスタマイズが素晴らしいです！
私も制作意欲が刺激されてしまいました＾＾
[ 2009/04/17 19:41 ] [ 編集 ]
[ 4526 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/05/31 00:55 ] [ 編集 ]
[ 5043 ]
いたおさんこんばんは★
タイトル画像の下に横メニューバーをつけてみました！！

すごく理想どおりになったんですが、メニューバーが左寄せになってしまいます。

キレイに真ん中に寄せる方法あったら教えてください。

宜しくお願いします＾＾
[ 2009/07/21 20:50 ] [ 編集 ]
[ 5047 ] > ハンナさん
記事にするのでもうしばらくお待ちください。
[ 2009/07/22 02:02 ] [ 編集 ]
[ 5048 ]
わかりました。
ありがとうございます！
楽しみにしています。
[ 2009/07/22 02:04 ] [ 編集 ]
[ 5050 ] > ハンナさん
記事を掲載したのでこちらを参考にしてください。

メニューバーの中央寄せ
http://10plate.blog44.fc2.com/blog-entry-243.html
[ 2009/07/22 21:37 ] [ 編集 ]
[ 5051 ]
出来ました！！

いたおさんのおかげで素敵なブログが出来ました！
本当にありがとうございました＾＾
[ 2009/07/22 22:53 ] [ 編集 ]
[ 5055 ] > ハンナさん
お望みに叶って良かったです＾＾
[ 2009/07/23 01:01 ] [ 編集 ]
コメントの投稿









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

≪ タイトルを画像にしたときのSEO | HOME | 横メニューバーに枠をつける ≫

ブログ内検索1



サイトマップ

カテゴリ別全記事一覧表示

カテゴリ
お薦め カスタマイズ

【共通】


【lightframe】
【standard】
【スマホ用】

プロフィール

いたお

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

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

いたおの他の運営サイト
iPhoneアプリも作ってます
ありがとうございます

先生達

RSSフィード
カレンダー
08 | 2023/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 | 2023/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
サイト外タグ検索
ユーザータグ

メニューバー よくある質問 



△ ページトップへ戻る