ブログノウハウ

【Cocoon】スマホのグローバルメニューアイコンを1行にする

\ Follow me /

どうも、まつぼっくりです。

記事にしてメモしよう思っていてすっかり忘れていました、グローバルメニューを1行にしてみましたのでやり方をこの記事で書き留めます(゚∀゚)

PCでの表示ではグローバルメニューとはヘッダーの下のオレンジで囲われた場所になります。

Cocoonのグローバルメニューアイコンの作り方は下記記事でご紹介していますのでよかったら合わせてみてください😊

【Cocoon】 ヘッダーにカテゴリーアイコンを作る

このグローバルメニュー、PCでは横一列にきれいに表示されるのですが、スマホでは下記左の画像のように3行、2列になっていました。。。

これでは、スマホで見るさいに、記事のアイキャッチが一発で見えないのと、無駄にスマホの画面を半分以上制圧していますね( ゚Д゚)

私はこれが嫌だったので、CSSを追加しスマホでも横1列にすっきり並べることができましたので私がやった方法をご紹介します( ・`д・´)

デフォルト状態
CSS追加後
この記事を見てほしい人

・スマホ表示でグローバルメニューを横一列にしたい人

追加するCSS

それではさっそくですが、下記CSSを丸ごとコピーし、Cocoon child スタイルシートに貼り付けてます。

/モバイル/
/グローバルメニュー1行にする/
@media screen and (max-width: 599px){
.box-menus .box-menu {
width: calc(100%/6); /* メニューの数 / } .box-menu-label{ font-size: 8px; / 文字サイズ */
margin: 0;
max-width: 100%;
max-height: 100%;
}

.box-menu {
padding: 0;
}
}
.box-menu{
min-height: 50px; /* 高さ */
}
}

コピーしたら、WordpressのテーマエディターからCocoon child スタイルシートを開いてください。

開いたら、一番下にペーストしますファイルを保存します。

これだけです!

私はほかにもいろいろCSSを追加しているので、オレンジの枠より下は無視してください(゚∀゚)

少し解説

私の場合、6個のカテゴリーアイコンがあるので6個を1列にしましたが、6個じゃないよ!という方のために、赤字で少し解説しますね

解説

/モバイル/
/グローバルメニュー1行にする/
@media screen and (max-width: 599px){  ➡ここでスマホを指定している
.box-menus .box-menu {
width: calc(100%/6); /* メニューの数 / } .box-menu-label{ font-size: 8px; / 文字サイズ */
margin: 0; ➡この行の100%/6の部分の6が全幅の中に6個並べますよという指示
       この数が表示したいカテゴリーアイコンの数になります。

.box-menu {
padding: 0;
}
}
.box-menu{
min-height: 50px; /* 高さ */ ➡グローバルメニューの高さ
}
}

まとめ

Cocoonのグローバルメニューをスマホ表示で横1列にする方法、いかがでしたか?

皆さんもすぐにできると思いますので、ぜひやってみてください(゚∀゚)

\ Follow me /
タイトルとURLをコピーしました