Cocoonボックスメニューのカラム数を変更するカスタマイズ

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

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

• 「5列や6列にしたいのに、レイアウトが固定されている…」
• 「余白を付けてスッキリ見せたい」

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

• ボックスメニューのカラム数を 2〜6列まで自由に変更可能
• スマホ表示も 2〜3列に最適化 して見やすさUP
• 導線設計が改善され、訪問者の回遊率アップ・離脱率ダウン

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

このカスタマイズの完成コード（PHP+CSSセット）を記事後半で有料公開。まずは無料部分で概要と導入の流れをチェックしてください。

クリックで簡単切り替え｜Cocoonボックスメニューのカラム数を自由に変更

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

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

カラムレイアウト実装例

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

当サイトの使い方紹介

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

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

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

Cocoonのボックスメニューは、視覚的なナビゲーションでサイトの回遊性を高める便利な機能。以下の3つの方法で簡単に設置できます。

• ブロック機能：記事や固定ページに設置（本カスタマイズの対象）
• ウィジェット：サイドバーやフッターに最適
• ショートコード：任意の場所に柔軟配置

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

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

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

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

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

• スキンによる影響
  • 本記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し、表示が崩れることがあります。
• 子テーマを利用
  • コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
• バックアップの推奨
  • 念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
  • バックアップ＆復元方法
• サーバー設定の影響
  • WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。

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

この先は有料版の内容です。コピペですぐに実装できる完成版PHP＋CSSを提供します。

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

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