コピペOK！グローバルメニューの幅を調節して８つのカテゴリをスッキリ収める方法［ZENO-TEALカスタマイズ］

ZENO-TEALへテーマ変更して、行ったカスタマイズをご紹介しています。

このページではカテゴリを８つに増やした時にグローバルメニューの幅を調節してスッキリ見せる方法をご紹介します。

まずグローバルメニューを設置する

まずは公式カスタマイズページを参考に、自分のサイトに合わせてグローバルメニューを設置しましょう。

zeno-teal.hatenablog.com

 次にグローバルメニューを多段形式にする

zeno-teal.hatenablog.com

はっ( ﾟДﾟ)

正しくは、”グローバルナビゲーション”のようです！

この設定であれば、カテゴリ6つまでは良い感じに表示されます。

ここからは、カテゴリを6つ以上に増やしたい人におススメのカスタマイズです。

元の設定のままカテゴリを8つに増やした場合

PCデザイン

追加した2つのカテゴリ名は2段目に行ってしまいアンバランス。

スマホデザイン

4段になり、画面の半分の面積を占めてしまい、スクロールしないと記事が表示されない。

これは問題です！

カスタマイズするとどうなるかと言うと…
 

カスタマイズ調整後のカテゴリ8つデザイン

PCデザイン 

一行に収まり、まだ余裕があります。

スマホデザイン

1つ1つのカテゴリの幅を調整し、2段にスッキリ収まりました。

カテゴリ名を4文字以内に収めることがポイントです。

CSSカスタマイズはこれ！

まずは、多段形式に変更するカスタマイズを参考までに掲載。

元のCSSカスタマイズ

.zeno-menu{
-webkit-flex-wrap: wrap;
flex-wrap:wrap; /* 多段になるようにします */
}
.zeno-menu li{
width:16.5%; /* 普段の1つあたりの幅 */
}

@media screen and (max-width: 780px){
.zeno-menu li{
width: 33%; /* 横幅780ピクセル以下のときの1つあたりの幅 */
}
}
@media screen and (max-width: 480px){
.zeno-menu li{
width: 50%; /* 横幅480ピクセル以下のときの1つあたりの幅 */
}
}

カテゴリ8つでもグローバルメニューをスッキリ収めるカスタマイズ！

変更したのは2か所の数値を変えるだけ。

ちょー簡単です！

変更後のCSSカスタマイズ

/* グロメニュ多角化 */
.zeno-menu{
-webkit-flex-wrap: wrap;
flex-wrap:wrap; /* 多段になるようにします */
}
.zeno-menu li{
width:10.5%; /* 普段の1つあたりの幅 */
}
@media screen and (max-width: 780px){
.zeno-menu li{
width: 33%; /* 横幅780ピクセル以下のときの1つあたりの幅 */
}
}
@media screen and (max-width: 480px){
.zeno-menu li{
width: 25%; /* 横幅480ピクセル以下のときの1つあたりの幅 */
}
}
/* グロメニュ多角化ここまで */

以上です。

2か所はどちらもカテゴリ1つの幅を、元のカスタマイズよりも狭めています。

カテゴリ名は短い方が良いはずです！

 お試しあれ(^^♪