【WordPress】テーマCocoonでカテゴリー別ボックスメニューをカスタマイズする方法

テーマCocoonでカテゴリー別ボックスメニューをカスタマイズする

CocoonではCSSの知識がなくてもボックスメニューを簡単に追加することができます。
しかし、カスタマイズしていないと・・・

このように全部のメニューが左寄りに表示されてしまってかっこ悪い感じになってしまいます。
本記事では、CocoonテーマでCSSを使ってボックスメニューをカスタマイズする方法をご紹介します。

YUKI

ボックスメニューの作成方法が分からない方は前回の記事をご覧下さい！

本記事を読んで出来ることはコチラ

YUKI

上の画像のような配置になるようにカスタマイズしていきます。

1.　外観 → テーマエディター → Cocoon Childの中のスタイルシートを選択。

2.　青色で囲っている部分に下記のCSSを追記します。（コピーして貼り付けでOK）

.wwa .box-menu {
width: calc(100%/4);
}

width: calc(100%/○);
赤色の部分の数字を変えることで横幅100%に対してボックスを何個表示させるか変更することができます。

3.　ファイルを更新を選択

これで配置が変更されました！

YUKI

デフォルトではアイコンの色はオレンジになっていますが、文字色と合わせてグレーに変更してみたいと思います。

先ほど追記した部分の下に下記のCSSを追記します。

.box-menu-icon {
color:#777;
}

color:#○○○;
赤色の部分にカラーコードを入力することでお好きな色に変更することができます。

文字の色を変更する場合はcolorプロパティを使用します。
今回はアイコン下のメニュー名と説明文を変更したいので下記のCSSを追記します。

.box-menu {
width: calc(100%/4);
color:#○○○;　　←お好きな色のカラーコードを入力
}

以上でカスタマイズができました。

YUKI

次は、スマホ表示のカスタマイズについて説明していきます！

ここまでの作業でPC版の表示はバランスよく表示できましたね。
続いては、スマホ版のボックスメニューをカスタマイズしていきます。今回は上の画像のように横に2列に並ぶような表示にしたいと思います。

青色で囲っている部分に下記のCSSを追記します。（コピーして貼り付けでOK）

.wwa .box-menu {
width: calc(100%/2);
}

レシポシブデザインを使用すると画面サイズに応じて表示を切り替えることができます。
/*1023px以下*/と書いてある部分にCSSを追記することで、横幅1023px以下のデバイスで表示させる場合のデザインを変更できます。

以上でスマホ表示のカスタマイズも完了です！

いかがでしたか？コピペするだけなので是非挑戦してみて下さいね。