Cocoonボックスメニューのカラム数を自由に変更！2〜6列対応のカスタマイズ方法

WordPressの無料人気テーマ「Cocoon（コクーン）」には、サイト内の導線設計に便利な「ボックスメニュー」という機能があります。見た目もシンプルで、アイコン付きのメニューをブロック形式で直感的に配置できるため、多くのユーザーが活用している定番機能です。

以下の3つの方法で、サイトのさまざまな場所に設置できます。

• ブロックエディタ（Gutenberg）での記事内表示
• ウィジェットでのサイドバー・フッター表示
• ショートコードを使った任意の場所への表示

Cocoonのボックスメニューは便利ですが、「3列にしたい」「余白を追加してすっきり見せたい」といった細かいデザイン調整は、標準機能ではできません。

そこでこの記事では、ブロック機能で表示したボックスメニューの「カラム数（=横に何個並ぶか）」を2〜6列、かつモバイル表示も2〜3列に柔軟対応する方法をご紹介します。

• Cocoon タブブロック
• Cocoon ブログカード
• Cocoon 白抜きボックス
• Cocoon タブ見出しボックス
• Cocoon ラベルボックス
• Cocoon アイコンボックス
• Cocoon アコーディオン（トグル）
• Cocoonボックスメニュー（ブロック）
• Cocoon 新着記事・人気記事ブロック

カスタマイズ概要｜Cocoonボックスメニューのカラム数を自由に変更

Cocoonのボックスメニューは便利ですが、デフォルトではカラム数やスマホ表示に制限があり、デザインの自由度が物足りないと感じることもあります。

しかし、本カスタマイズを導入することで、PC・スマホともにレイアウトを柔軟にコントロールでき、サイトのデザイン性や使いやすさが格段に向上します。

カラム数・スマホ表示・余白の選択が可能に

以下のように、PC・スマホの両方に対応した多彩なレイアウトスタイルを実装できます。

カラム数（PC）	スマホ表示	余白ありスタイル
2列	2列	対応
3列	2列 or 3列	対応
4列	2列	対応
5列	2列 or 3列	対応
6列	2列 or 3列	対応

それぞれのスタイルは、Cocoonブロックエディタの「サイドバー設定」からワンクリックで簡単に切り替え可能です。

好みのカラム数でデザインを自由に調整

• 2〜6カラムのカスタムレイアウトに対応
  　→ 例：3カラム（スマホ2列）、5カラム（スマホ3列）など
• トップページやカテゴリページ、サイドバーのスペースに最適化できます

余白のある見やすいデザインにも対応

• ボックス同士の間隔を適度に空けた“余白ありバージョン”も選択可能
• コンテンツが詰まりすぎず、整った印象・見やすいデザインに

スマホ表示も最適化

• モバイルでは「2カラム or 3カラム」を自動で切り替え
• 縦長になりすぎず、視認性もアップ

Cocoonボックスメニューのカラム表示レイアウト例

ここでは、変更前のデフォルト表示例と、変更後のレイアウト例（余白なし／余白あり）を比較してご紹介します。

変更前：デフォルトのボックスメニュー表示

Cocoon標準のボックスメニューは、設置場所に応じて以下のようにカラム数が固定されています。

表示位置	デフォルトのカラム数
コンテンツ上部・下部	6列表示
記事本文（ブロックで挿入時）	4列表示

カラム変更＆余白なし：グリッド表示の例

「余白なしスタイル」は、ボックス同士の間隔を最小限にし、情報をコンパクトに並べたいときに最適です。

2カラム（モバイル：2列）

3カラム（モバイル：2列）

3カラム（モバイル：3列）

4カラム（モバイル：2列）

5カラム（モバイル：2列）

5カラム（モバイル：3列）

6カラム（モバイル：2列）

6カラム（モバイル：3列）

カラム変更＆余白あり：見やすさを重視したレイアウト

「余白ありスタイル」は、ボックス間に適度なスペースを追加することで、読みやすさ・視認性を高めたレイアウトです。

2カラム（モバイル2列）

3カラム（モバイル2列）

3カラム（モバイル3列）

4カラム（モバイル2列）

5カラム（モバイル2列）

5カラム（モバイル3列）

6カラム（モバイル2列）

6カラム（モバイル3列）

Cocoonボックスメニューの基本的な使い方（初心者向け）

Cocoonテーマに標準搭載されている「ボックスメニュー」は、視覚的にわかりやすいナビゲーションを設置できる便利な機能です。ショートコード、ウィジェット、ブロックの3通りの方法で設置可能です。

ただし、この記事で紹介しているカラム数のカスタマイズは「ブロック機能」限定となります。以下では、基本的な使い方と設定の流れをご紹介します。

ボックスメニューの表示方法は3種類

表示方法	設置できる場所	備考
ブロック機能	記事本文、固定ページ	※本カスタマイズはこれを使用
ウィジェット	サイドバー、フッター	一覧メニューとして便利
ショートコード	任意の場所（HTML対応）	柔軟にカスタマイズ可能

---

メニューを作成する手順

---

ボックスメニューをブロックで呼び出す方法

1. 投稿・固定ページの編集画面で「＋」をクリック
2. ブロック一覧から「ボックスメニュー」を検索して選択
3. 表示したいメニュー（作成済み）をプルダウンから選択

ここで、サイドバーからカラス数の切り替えが可能です。

公式マニュアルも併せて参考に

詳しい設定方法・使い方はCocoon公式サイトをご確認ください。

• 公式 アイコンや画像が使える「ボックスメニュー」ショートコードの使い方
• 公式 「ボックスメニュー」ウィジェットの使い方

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

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

• スキンによる影響
  • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによっては、CSSの重複等で意図しないスタイルになる場合があります。
• 子テーマを利用
  • 必要なコードは必ず子テーマに記述してください。
• バックアップの重要性
  • 編集前に必ずバックアップをおこなってください。
  • 特にPHPに記述ミスがあると、サイトが表示されなくなる可能性があります。
  • FTPソフト等で元に戻せるようにしておくと安心です。
• PHPエラーが発生した場合の対処

▶ エラー表示が出て保存できない場合

• WAF設定
  サーバーのWAF（Web Application Firewall）がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。
• ベーシック認証
  • サーバー側でアクセス制限（ベーシック認証）を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。

▶ 重大なエラーが発生し管理画面にも入れない場合

• FTPソフトを使用し、バックアップデータ（編集前の子テーマfunctions.php）を上書きして復元します。

Cocoonのボックスメニューカスタマイズの実装手順

実装手順は以下の２ステップ。

それぞれのコードを子テーマに貼り付けるだけでOKです。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。