Cocoonボックスメニューの列数を自由に変更する方法｜CSSカスタマイズで2〜6列＆スマホ最適化

Cocoonのボックスメニューは、アイコン付きで直感的に使える便利な機能です。

とはいえ実際に使ってみると、「思ったように列数が変えられない…」と少し戸惑いました。

「もう少し柔軟にデザインできたらいいのに」と感じたことがある方も多いはずです。

そこで、ボックスメニューの列数を自由に変更できるカスタマイズ方法をまとめました。

CSSが苦手でも、手順通りに進めればそのまま使えるようにしています。

「トップページの導線を整えたい」「カテゴリへの流入を増やしたい」と感じている方に向けた内容です。デザインを崩さず、使いやすさを底上げしたい場合に役立ちます。

このカスタマイズの完成コードを記事後半で公開しています。

Cocoonボックスメニュー｜カラム数レイアウトイメージ（2〜6列/スマホ2〜3列）

標準では固定されているカラム数をCSSで調整することで、表示レイアウトを自由に切り替えられるようになります。

レイアウト例

以下、各レイアウトの実際の表示サンプルを掲載しますので導入の参考にしてください。

• 以下では、2〜6カラムのレイアウト例をタブ切り替えで確認できます。
• 余白あり版・余白なし版の違いを比較しやすいよう、それぞれに同じカラム例を表示しています。

■ 補足｜当サイトでの活用例

このサイトでは、同じカテゴリーの記事を一覧できるよう、このボックスメニューを 3カラム（モバイル2列） で作成しています。デザインの色・装飾は別途CSSで調整しています。

例：ポチップ関連記事まとめ

Cocoonボックスメニューの使い方（基本操作）

カスタマイズを始める前に、ボックスメニューの基本操作を簡単にまとめておきます。

ボックスメニューは次の3つの方法で設置できます。

• ブロック機能（記事・固定ページに設置）
• ウィジェット（サイドバー／フッター等に設置）
• ショートコード（任意の位置に呼び出し）

この記事では、ブロック機能を使ったボックスメニューが対象です。

より詳細な使い方は Cocoon公式の解説も参考にできます。

Cocoonで使える装飾ブロック全体を知りたい方は、こちらのまとめ記事も参考にしてください。

Cocoonのボックスメニューカスタマイズの注意点と対応ポイント

基本的にはコードをコピペするだけで導入でき、Cocoon標準環境で動作確認済みです。

Cocoonボックスメニューの実装手順｜完成コードのご案内

ここから先は、紹介してきたデザインをそのまま使える「完成版コード」をまとめた有料パートです。

CSSを追加すれば同じことはできますが、一度設定してしまえばあとは編集画面からクリックで選ぶだけでレイアウトを切り替えられるようになります。

そのため、毎回コードを触る必要がなくデザイン調整の手間を減らせます。

「設定に時間をかけたくない」「すぐに実用レベルで使いたい」という方のために、動作確認済みのコードだけを整理して掲載しています。

カスタマイズ全体の流れ

1. 登録：codocコードクへ会員登録（初回のみお願いします）
2. 入力：有料エリアの内容をご自身で入力してください
3. 確認：プレビューで表示確認して完了です

販売者情報は 「特定商取引法に基づく表記」をご確認ください。