カラム固定を解消！Cocoonボックスメニューの列数を2〜6列に自由変更【コピペOK】

Cocoonのボックスメニューは、アイコン付きで直感的に使える便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導いてくれます。

ただ、

• 「列数を変えたい」
• 「もっと見やすく整えたい」

と思っても、標準機能ではカラム数を自由に変えられません。

この記事では、ボックスメニューの列数を自由に変更できるカスタマイズ方法を紹介します。

「トップページの導線を整えたい」「カテゴリへの流入を増やしたい」方にぴったりの内容です。デザインを大きく崩さず、使いやすさを底上げしたい方は、ぜひ参考にしてください。

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

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

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

Cocoon標準ではカラム数が固定ですが、ボックスメニューの列数を自由に変更できるCSSカスタマイズを導入すると、PC・スマホどちらも見やすいレイアウトにワンクリックで切り替えできます。

レイアウト例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「設定に迷わず、確実に動く形で導入したい」方向けに、動作確認済み・コピペで使えるコードを整理して公開しています。

レイアウトが整うことで、クリック率や回遊率の改善にもつながります。他のCocoon装飾ブロックも活用するとサイト全体の導線やデザインをさらに強化できます。

以下は有料コンテンツのご案内および特定商取引法に基づく表記です。