カラム固定を解消！Cocoonボックスメニューを2〜6列に切り替える方法

Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導くために欠かせない定番ツールです。

しかし、デフォルトの設定のままではこんな悩みがありませんか？

• 「スマホで3列にしたい…」
• 「余白を付けてスッキリ見せたい」
• 細かいコードなしで調整したい

この記事では、そんな「できたらいいな」を簡単に実現します。

実装は PHPとCSSをコピペするだけ。初心者でも5分程度で使いやすいレイアウトに仕上げられます。

このカスタマイズの完成コードを記事後半で有料公開。試行錯誤なしで即実装したい方は必見です！

こんなレイアウトが可能に！カラム数変更の完成イメージ

Cocoon標準では、設置場所によってカラム数が固定されています。

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

レイアウト例

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

当サイトの使い方紹介

ちなみにこのサイトでは、同カテゴリーの記事をこのボックスメニューを使ってまとめ、目的の記事にアクセスしやすいようにしています。当カスタマイズの３カラム（モバイル２列）で作成しています。

以上のカスタムレイアウトは、記事後半でPHP＋CSSの実装方法を有料公開しています。

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

設置方法は大きく分けて 3つ あります。

• ブロック機能：記事や固定ページに直接配置（※本記事のカスタマイズ対象）
• ウィジェット：サイドバーやフッターなどに設置
• ショートコード：任意の位置に呼び出して設置

ここでは、最もよく使う 「ブロック機能」での設置方法 を解説します。

より高度な設定方法は Cocoon公式サイトの解説ページ]を参考にすると安心です。

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

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

カスタマイズは基本的にコードを貼り付けるだけで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。

• スキンによる影響
  この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
• 子テーマを利用
  コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
• バックアップの推奨
  念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
  • 関連記事 バックアップ＆復元方法
    

• サーバー設定の影響
  WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。
  

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

ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。

• PHP＋CSSの完成版コード（コピペで導入可能）
• 機能的な2〜6カラムのカスタムレイアウトをサイドバーからワンクリック切り替え

作業時間はわずか約5分。最短で「ボックスメニュー」のカスタマイズを導入したい方はぜひご活用ください。