以前に
横メニューバーをブログタイトル下に表示すると
横メニューバーを幅一杯に表示する記事を紹介しましたが、今回はこれをリキッドレイアウトに対応させるカスタマイズを紹介します。
スタイルシートを編集します。
赤い行を追加し、青い行を削除してください。
/* ▼メニューバー▼ */
～
#menu_bar li {
～
width:14%; /* １つのメニューボタンの幅（％） */
}
#menu_bar li a {
～
width:100px; /* １つのメニューボタンの幅 */
～
}
～
/* ▲メニューバー▲ */
％の数値はメニュー数に応じて変更してください。
単位は小数点以下も対応しますが、あまり100%ギリギリまで近づけると、ブラウザによっては折り返されてしまう場合があります。
特にIEはボーダー幅の分、他のブラウザより幅をとることがあります。少し数値に余裕を持たせるか、複数のブラウザで確認してカスタマイズすることをお勧めします。
- 関連記事
-
