WordPress・Habakiriののメニューを均等割に

［スポンサーリンク］

Habakiriのメニュー「２行」「中央ロゴ」で使用する時に、メニューの幅が均等でないので均等にする方法を紹介します。

横並びリストを使う時を、table-cell【css】を使って自動的に均等になるようにしようと試したのだが上手くいかなかったので幅を指定して変更しました。

iPadを横にした時に表示が崩れないようにMedia Queries（メディアクエリ）で調整してます。

width: 190px; は、メニューの数により変更してください。

CSS

@media screen and (min-width: 1025px) {
       .menu li {
           border-left: 1px solid #ccc;
           border-right: 1px solid #ccc;
           width: 190px;
       }
   }

これで、企業サイト向けのホームページにも使用しやすいです。