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

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

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

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

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

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

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

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

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

関連記事

• SEOを考慮したランダムなタイトル画像 (2009/04/26)
• コメントに敬称をつける (2009/04/25)
• タイトルを画像にしたときのSEO (2009/04/20)
• 横メニューバーを幅一杯に表示する（リキッドレイアウト） (2009/04/15)
• 横メニューバーに枠をつける (2009/04/11)
• ジャンルとテーマを記事下部に表示 (2009/04/11)
• サムネイルの画像サイズを設定する (2009/04/09)