STINGER WordPress WordPressカスタマイズ メニューバー

STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ

STINGER5のスマホとタブレットサイズで表示したときのメニューバーのカスタマイズです。
デフォルトでは、シンプルなデザインになっているため、どこをクリック（タップ）してもクリックできるように、大きなボタン型に変更しました。

カスタマイズは、CSSにコピペするだけで完了します。

PC表示時のメニューバーカスタマイズは、「WordPress無料レスポンシブテーマSTINGER5のカスタマイズ」の10を参考にしてください。

表示タイプは、1列・2列・3列の3パターン

タブレットとスマホの列を同じにした場合は3パターン、それぞれ別にしたときは6パターンで、合計9パターンになります。

MENUをクリックしたときの、それぞれの見た目は画像で確認してください。

スマホ表示の横幅を320px、タブレットサイズの横幅を779pxとし、2列表示のコードを基準としています。※横幅がぶれる（スクロールする）場合は%を少しずつ下げていってください。

2列表示


子テーマのstyle.cssに以下を追加します。
/*media Queries タブレットサイズ以下のメニュー
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
.acordion_tree li {
font-size: 14px;
border: 1px solid #ccc;
margin-bottom: 1px;
margin-left: 1px;
padding: 0px;
width: 48%;
border-radius: 5px;
background-color: #fefefe;
line-height: 40px;
text-align: center;
}

.acordion_tree li a {
width: 100%;
}
.acordion_tree li a:hover {
background-color: #e1dfc0;
border-radius: 5px;
}
}
/*タブレットサイズ以下のメニュー　　ここまで
----------------------------------------------------*/
フォントサイズやカラーなどは自由に変更可能です。
1列・3列表示の場合は、48%の部分を変更してください。

1列表示

2列表示の、48%の部分を98%に変えて追加してください。

3列表示

2列表示の、48%の部分を32%に変えて追加してください。

スマホサイズで見ると、1つずつのボタンの幅が狭くなるため、文字数が多い場合は2行になって見た目が悪くなることがあります。
上の画像（横幅320px）のように、2行になることによって空白ができてしまいます。

2，3文字程度なら、文字の大きさを小さくしたり、スマホ表示時だけ2列にすることで対応できます。

スマホサイズの時だけ2列表示

上の3列表示のコードの下に、以下を追加します。
/*media Queries スマホサイズのメニュー
----------------------------------------------------*/
@media only screen and (max-width: 380px) {
.acordion_tree li {
font-size: 12px;
width: 48%;
}
}
/*スマホサイズのメニュー　　ここまで
----------------------------------------------------*/
横幅が380px以下で、2列表示に切り替わるようになっています。

文字サイズも14pxから12pxに変更して、見た目は下の画像のようになります。
文字数が多くて2行になっていたのが、横幅320pxでも1行できれいにおさまるようになりました。

スマホサイズの時だけ1列にする場合は、48%の部分を98%に変えて追加してください。
スポンサーリンク
関連記事
スポンサーリンク