【Cocoon】ボックスメニューの作り方と便利な使い方10選

サイドバーをもっと見やすくしたいのに、Cocoonのボックスメニュー設定で手が止まっていないでしょうか。私も最初は「どこを触ればいいの？」と管理画面の前で固まっていました。

この記事では、Cocoonのボックスメニューの作り方から、デザインの整え方、つまずきやすいトラブルの対処まで、ひと通り流れが分かるように整理してあります。

この記事を読むと分かること

Cocoonのボックスメニューの基本とメリットが分かる
ボックスメニューの作成から表示までを手順どおりに設定できる
ショートコードやCSSを使ったカスタマイズのイメージが持てる
「画像が出ない」「メニューが表示されない」といったトラブルを自力で解決できる

結論から言うと、cocoon ボックスメニューは一度ひな形を作ってしまえば、あとは中身を入れ替えるだけで何度も使い回せる、かなり便利なナビゲーションパーツです。

cocoonのボックスメニューとは？メリットとできること
cocoon ボックスメニューを作る前の準備
cocoon ボックスメニューの基本設定手順7ステップ
ショートコードで本文にボックスメニューを表示する
Cocoon ボックスメニューのデザインをCSSでカスタマイズ
cocoon ボックスメニューでよくあるトラブルと対処法
cocoon ボックスメニューで回遊率を上げる使い方
よくある質問（cocoon ボックスメニュー編）
まとめ：cocoon ボックスメニューを今日から育てよう

cocoonのボックスメニューとは？メリットとできること

ごとう

最初に、Cocoonのボックスメニューがどんな機能なのか、ざっくり全体像をつかんでおきましょう。ここを押さえておくと、「どこに何を置くか」のイメージがわきやすくなります。

ボックスメニューの基本イメージと役割

Cocoonのボックスメニューは、四角いカードが横に並んだようなメニューです。ひとつひとつのボックスの中に、アイコンや画像、タイトル、短い説明文などを入れて、クリックすると好きなページへ飛ばせます。

役割をイメージしやすいように、ポイントを表にまとめました。

項目	内容
見た目	四角いカード（ボックス）が横に並ぶメニュー
中身	アイコンや画像＋タイトル＋短い説明文などを表示
リンク先	カテゴリーページ、人気記事、プロフィール、LPなど自由に設定可能
設置場所	サイドバー、コンテンツ上、コンテンツ下、ヘッダー下など
目的	読者に「次にどこへ進めばいいか」を分かりやすく示すこと

一言でいうと、ボックスメニューは「読者に次の一歩を示す案内板」のような役割をしてくれます。単純なテキストリンクよりも目立つので、うまく使うとクリックされやすい導線を作れます。

どこに表示できる？サイドバーやヘッダー下の設置場所

Cocoonのボックスメニューは、ウィジェットやショートコードを使っていろいろな場所に表示できます。

代表的な設置場所は次のようなところです。

サイドバー（記事横）
記事本文の上（タイトル直下など）
記事本文の下（関連記事の上など）
ヘッダー下（グローバルメニューのすぐ下）

ざっくりした使い分けのイメージはこんな感じです。

サイドバー：ブログ内でよく使うメニューや主要カテゴリーの案内用
本文上：初めて来た人向けに「まず見てほしい記事」のまとめ
本文下：関連記事や別ジャンルの記事、サービスページへの導線
ヘッダー下：サイト全体の大きな入り口（ジャンル別の玄関口）

同じボックスメニューでも、置く位置によってクリック率が大きく変わります。のちほど紹介しますが、設置場所は何パターンか試してみて「自分のブログに合う場所」を探すのがおすすめです。

Cocoonのボックスメニューが向いているサイト例

ボックスメニューが特に活きるのは、次のようなタイプのサイトです。

ジャンルごとに記事数が多いブログ
「初心者向け」「経験者向け」などレベル別に導線を分けたいサイト
サービス案内やプロフィール、問い合わせページなど見せたいページが複数あるサイト
雑記ブログだけれど、特定の人気カテゴリーに人を集めたいとき

逆に、ページ数が少ないごくシンプルなサイトだと、ボックスメニューを作ってもあまり機能しないことがあります。読者に「どれか選んでもらいたいページ」が複数あるかどうかを目安に、導入するか考えるといいかなと思います。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

cocoon ボックスメニューを作る前の準備

ごとう

いきなり設定に入る前に、少しだけ準備をしておくと、このあとがすごくスムーズになります。ここでは「ボックスメニュー用の土台づくり」をしていきます。

メニューを新規作成してボックスメニュー用に分ける

まず、ボックスメニュー専用のメニューを用意しておくと管理が楽になります。Cocoonでは、ヘッダーのグローバルメニューとは別に、ボックスメニュー用のメニューを作っておくことができます。

イメージしやすいように、メニュー名の例を表にしておきます。

メニュー名の例	用途
グローバルメニュー	ヘッダー上部のメインメニュー
ボックスメニュー_サイドバー	サイドバーに表示するボックスメニュー
ボックスメニュー_本文上	記事の上に表示するボックスメニュー
ボックスメニュー_本文下	記事の下に表示するボックスメニュー

メニューを分けておくと、たとえば「サイドバー用だけ中身を変えたい」「本文上のボックスメニューは別パターンにしたい」といったときも迷わず編集できます。後から自分が見返したときに分かりやすい名前をつけておくのがコツです。

表示オプションでチェックしておきたい項目

ボックスメニューを使いこなすには、メニュー編集画面の「表示オプション」を少し調整しておくのがおすすめです。メニュー画面の右上にあるタブから、必要な項目にチェックを入れておきましょう。

よく使う項目は次のとおりです。

項目	役割
CSSクラス	アイコン用やデザイン調整用のクラス名を入れる欄
説明	タイトルの下に短い説明文（サブテキスト）を表示する欄
タイトル属性	マウスオーバー時の説明や、テーマによっては画像URL指定などに使われることがある
リンクターゲット	リンクを別タブで開くかどうかの設定

特に「CSSクラス」と「説明」は、ボックスメニューの見た目と分かりやすさに直結します。少なくともこの2つにはチェックを入れておくと、あとでカスタマイズしやすくなります。

Font Awesomeアイコンや画像を用意するコツ

ボックスメニューの印象を決めるのが、アイコンや画像です。事前にざっくりイメージを考えておくと、設定画面で迷いにくくなります。

私がよく意識しているポイントはこんな感じです。

Font Awesomeのアイコンは、カテゴリーの雰囲気に合うものを選ぶ（本のマーク、パソコンのマークなど）
画像を使うなら、正方形でシンプルなものを用意する
画像ファイル名は日本語ではなく英数字にしておく
画像サイズを必要以上に大きくしない（表示が重くなるのを防ぐ）

特に、日本語ファイル名の画像は環境によってうまく表示されないことがあります。最初から「box-menu-beginner.png」のように英数字で揃えておくと、後々のトラブルを減らせます。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐ秘密を見る

cocoon ボックスメニューの基本設定手順7ステップ

ごとう

ここからは、実際にCocoonのボックスメニューを作る手順を、できるだけ具体的に追っていきます。一度流れを経験してしまえば、あとは応用で何パターンも作れるようになります。

ステップ1〜3：メニュー項目を追加して名前を付ける

まずは、ボックスメニューに入れる「項目」を決めて、メニューとして登録していきます。大まかな流れを表にするとこんな感じです。

ステップ	操作内容
ステップ1	外観 → メニューから「新しいメニュー」を作成する
ステップ2	左側の「固定ページ」「投稿」「カスタムリンク」などから、リンクさせたいページを追加する
ステップ3	追加したメニュー項目の「ナビゲーションラベル」を、ボックスメニュー用に分かりやすく書き直す

ナビゲーションラベルは、そのままボックスメニューのタイトルとして表示されます。「初心者向けガイド」「ブログ運営の基本」「プロフィール」など、クリックした先のイメージがすぐ伝わる名前にしておくと、読者も迷いません。

ステップ4〜5：アイコン・サブテキストを設定する

次に、ボックスメニューを「それっぽく」見せるためのアイコンとサブテキストを設定します。

やることはシンプルで、次のようなイメージです。

各メニュー項目を開き、「CSSクラス」にアイコン用のクラス名を入力する（Font Awesome利用時など）
「説明」の欄に、簡単なサブテキストを書き込む

例えば、ブログ運営カテゴリなら、CSSクラスにブログっぽいアイコン名を入れて、説明文には「ブログの書き方や運営のコツをまとめています」のような一文を入れておくと、ボックスだけ見ても内容が伝わりやすくなります。

画像をアイコン代わりに使いたい場合は、メディアにアップロードした画像のURLをコピーして、テーマ側の仕様に沿った項目（タイトル属性など）に設定する方法もあります。実際の表示を確認しながら、自分のサイトに合う形を探してみてください。

ステップ6〜7：ボックスメニューをウィジェットで表示する

メニューの中身ができたら、いよいよ画面に表示させます。Cocoonでは、専用のウィジェットからボックスメニューを呼び出せるようになっています。

だいたい次のような流れで表示できます。

外観 → ウィジェットを開く
ボックスメニュー用のウィジェットを、表示させたいエリア（サイドバーやコンテンツ上など）にドラッグする
ウィジェットの設定画面で、さきほど作ったメニューを選択する

ここまでできれば、画面上にボックスメニューが表示されるはずです。もし何も出てこない場合は、あとで紹介するトラブルシュートの章も参考にしてください。

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

センスが必要
文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

ショートコードで本文にボックスメニューを表示する

ごとう

ウィジェットではなく、ショートコードを使って記事本文の中にボックスメニューを表示することもできます。トップページや特定の記事だけに導線をまとめて置きたいときに便利なやり方です。

ショートコードの書き方と基本構文

Cocoonでは、ボックスメニューを呼び出すためのショートコードが用意されています。イメージとしては、「この位置に、このメニューをボックス表示してね」と指示する感じです。

代表的なパラメータの考え方は次のようなイメージです。

項目	意味
メニュー名やID	どのメニューをボックス表示するかを指定する
columns	何列で表示するか（2列、3列、4列など）
アイコン関連の指定	アイコンを表示するかどうか、どのスタイルにするか
画像関連の指定	画像を使うかどうか、どの画像を使うか

実際に使うときは、メニュー名（またはID）と列数を指定して、残りは必要に応じて試していく形で大丈夫です。まずは「この位置にボックスメニューを出したい」と思う場所にショートコードを一つ入れて、表示を確認してみるのがおすすめです。

Cocoon ボックスメニューのデザインをCSSでカスタマイズ

ごとう

次は、Cocoonのボックスメニューの見た目をCSSで整えていきます。「コード」と聞くと身構えてしまうかもしれませんが、触る場所と役割さえ分かれば少しずつ慣れていきます。

色・サイズ・余白を整える基本カスタマイズ

まずは「色」「文字サイズ」「余白」といった、基本的な見た目から整えていきましょう。Cocoonの「追加CSS」に数行コードを書き足すだけで、雰囲気がガラッと変わります。

何を変えたいときに、どこを触るといいかをざっくりまとめると次のようになります。

変えたい見た目	触る場所のイメージ
ボックス全体の背景色	ボックスメニュー全体に指定されているクラス（background-colorなど）
アイコンの色	アイコン部分のクラス（colorプロパティ）
タイトルの文字サイズ	タイトル用のクラス（font-size）
説明文の行間・余白	説明文のクラス（line-heightやmargin）
ボックス同士の間隔	ボックス要素のmarginやpadding

最初から全部いじろうとする必要はありません。「背景色を少しだけ変える」「タイトルの文字をほんの少し大きくしてみる」といった、小さな変更から始めてみてください。慣れてきたら、余白や行間も触っていくと、より読みやすいレイアウトに近づきます。

ホバー時の動きや影でクリックしたくなるデザインに

次のステップとして、マウスを乗せたときの「ホバー」の挙動や影を調整して、思わずクリックしたくなるような見た目にしていきます。

よくある演出の例はこんな感じです。

マウスを乗せたときに、ボックスがほんの少し浮き上がるように影を濃くする
ホバー時だけ背景色を少し変える
アイコンの色だけふわっと変わるようにする

こうした変化があると、ユーザーに「ここは押せるボタンだよ」と自然に伝えやすくなります。ただし、あれもこれもと動かしすぎるとごちゃついてしまうので、動きをつける要素は1〜2箇所に絞るのがおすすめです。

スマホ表示で崩れにくい列数の考え方

ボックスメニューのデザインで意外と忘れがちなのが、スマホで見たときのバランスです。パソコンだと3列でちょうど良くても、スマホでは縦長に並んで窮屈に感じることがあります。

スマホ表示を意識するときのポイントは次のとおりです。

タイトルや説明文は、できるだけ1〜2行で収まる文字数にする
アイコンや画像を詰め込みすぎず、シンプルさを優先する
ボックス同士の余白をやや広めにとって、指でタップしやすくする

Cocoonのボックスメニューはテーマ側でレスポンシブ対応されていますが、内容によっては窮屈に見えることもあります。作ったあとに必ずスマホ表示も確認して、必要なら列数や文字数を微調整していきましょう。

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

実際に10万稼いだキーワード
今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

cocoon ボックスメニューでよくあるトラブルと対処法

ごとう

ここからは、Cocoonのボックスメニューを使っているときに遭遇しやすいトラブルと、その対処法をまとめていきます。実際に触っているときに「あれ？」となりがちなポイントを中心に整理しました。

画像が表示されないときに見るポイント

ボックスメニューに画像を使おうとして、「なぜか表示されない」というケースはかなり多いです。よくある原因は次のようなものです。

画像URLをコピペするときに途中で切れてしまっている
画像ファイル名が日本語のままになっている
画像ファイルが削除されていたり、別の場所に移動されている
ブラウザやキャッシュ系プラグインのキャッシュが残っている

まずは次の順番でチェックしてみてください。

メディアライブラリから画像URLをコピーし直す
日本語ファイル名なら、英数字の名前に変えて再アップロードする
ブラウザのキャッシュを消してから再読み込みする

だいたいこのあたりを見直すと、画像が出ない問題はかなり解消されます。それでもダメなときは、テーマやプラグインの組み合わせで制限がかかっていないかも確認してみてください。

ボックスメニュー自体が出ないときの原因チェック

「そもそもボックスメニューが画面に出てこない」という場合は、設定漏れや選択ミスが原因になっていることが多いです。代表的な症状と原因、対処法を表にまとめました。

症状	主な原因	対処法の例
まったく表示されない	ウィジェットでメニューを選択していない	ボックスメニュー用ウィジェットの設定を開き、正しいメニューを選択する
サイドバーにだけ出ない	サイドバーなしのレイアウトを使っている	固定ページや投稿のレイアウト設定を確認し、サイドバーありのデザインに変更する
ショートコードで出ない	メニュー名やIDの指定を間違えている	メニューの名前やIDを確認し、ショートコード内の指定と一致させる
一部のページだけ出ない	ウィジェットの表示条件が絞り込みになっている	ウィジェットの表示条件を確認し、必要なページが対象になっているか見直す

基本的には、「どのメニューを」「どの場所に」「どんな条件で」表示しているかを一つずつ確認していけば、原因にたどり着きやすいです。落ち着いて設定画面を上から順番に見返していきましょう。

表示はされるけどデザインが崩れるとき

ボックスメニューは出ているのに、「なんとなくバランスが悪い」「文字が窮屈に見える」といった場合は、内容とデザインの両面を見直します。

よくある原因は次のようなものです。

タイトルや説明文の文字数が長すぎる
画像サイズがバラバラで、縦横比が揃っていない
追加CSSで余白を詰めすぎている
他のプラグインのCSSと重なっている

特に文字数と画像サイズは、ちょっと整えるだけで見た目が大きく変わります。同じボックスメニュー内では、なるべく似た長さのタイトルと、似たサイズの画像をそろえるよう意識してみてください。

cocoon ボックスメニューで回遊率を上げる使い方

ごとう

ここからは、設定方法だけでなく、「どう使うと読者がスムーズにブログ内を回ってくれるか」という実践的な話をしていきます。Cocoonのボックスメニューを活かせるかどうかは、この部分で差がつきます。

ジャンル別に入れておきたいリンク例

まず、ブログのジャンル別に「ボックスメニューに入れておくと使いやすいリンク」の例を考えてみます。

ブログ運営系ブログ
- ブログの始め方
- おすすめテーマ・プラグインまとめ
- 収益化の基本の記事
投資・お金系ブログ
- 投資初心者向けの基礎知識
- 積立投資の始め方
- 口座開設の手順まとめ
ライフスタイル・雑記ブログ
- 人気カテゴリ一覧（旅行・ガジェット・子育てなど）
- プロフィールや運営報告
- おすすめ記事のまとめ

大事なのは、「読者が次に知りたくなること」を想像して並び替えることです。「自分が見てほしいページ」だけを並べるのではなく、「読者が自然にたどり着きたい順番」をイメージして構成してみてください。

クリックされるラベル文言の付け方

同じリンク先でも、ボックスメニューのラベル（タイトル）の付け方でクリック率はかなり変わります。個人的に意識しているポイントは次の3つです。

抽象的すぎる言葉を避ける（例：雑記、その他、日記など）
「誰向けか」「何が分かるか」が一目で伝わる言葉にする
可能なら数字を入れて、具体的なイメージを持たせる

例えば、次のように変えると印象がガラッと変わります。

NG例：「ブログ」「投資」「ライフスタイル」
OK例：「ブログの始め方まとめ」「投資初心者ガイド」「暮らしを整えるアイデア集」

ラベルの変更はすぐ試せるので、アクセス解析を見ながら少しずつ言葉を変えてみると、だんだん「自分のブログでよく反応が取れるフレーズ」が見えてきます。

他のCocoon機能との組み合わせアイデア

Cocoonには、ボックスメニュー以外にもナビゲーションに使える機能がいろいろ用意されています。それぞれの役割を分担させると、サイト全体の導線がかなり整います。

例えば、こんな組み合わせ方があります。

ヘッダーメニュー：大きなカテゴリーだけをシンプルに配置
ボックスメニュー：各カテゴリーの中で特に見てほしい記事をまとめて案内
関連記事ウィジェット：ボックスメニュー経由でたどり着いた記事の下に、自動で関連記事を表示

「ボックスメニューだけで全部を説明しよう」とするよりも、ヘッダーメニューや関連記事と組み合わせて、ゆるやかな導線を作るイメージのほうがうまくいきやすいです。読者が迷子にならないように、各機能の役割を整理して使ってみてください。

★ちょっとブレイク★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

よくある質問（cocoon ボックスメニュー編）

ごとう

最後に、Cocoonのボックスメニューについてよくある質問をQ&A形式でまとめておきます。設定で迷ったときのミニ辞書として使ってもらえたらうれしいです。

Q1.Cocoonのボックスメニューはいくつ作っても大丈夫ですか？

A1.

基本的には、Cocoonのボックスメニュー用メニューはいくつ作っても問題ありません。サイドバー用、本文上用、本文下用というように分けておくと、表示場所ごとに中身を変えられて便利です。

ただし、あまり数を増やしすぎると自分で把握しきれなくなってしまうので、最初は「役割ごとに3〜4種類」くらいを目安にしておくと運用しやすいと思います。

Q2.ボックスメニューに外部サイトへのリンクを入れてもいいですか？

A2.

外部サイトへのリンクをボックスメニューに混ぜること自体は問題ありません。ただ、外部サイトばかりに飛ばしすぎると、自分のブログ内の回遊が減ってしまう原因にもなります。

外部リンクを入れる場合は、公式サイトや参考資料など、本当に必要なものに絞るのがおすすめです。メインは自分のサイト内のページを並べて、補足として外部リンクを置くくらいのバランスがちょうどいいと感じています。

Q3.Cocoonのボックスメニューを一部のページだけに表示したいです

A3.

特定のページだけにボックスメニューを出したい場合は、ショートコードを使うか、ウィジェットの表示条件を調整する方法があります。カテゴリーやタグで絞り込んだり、「この固定ページだけ」というような指定も可能です。

個人的には、「この導線はこのページでだけ出したい」というケースではショートコードのほうが管理しやすいと感じています。テスト的に配置してみて、合わなければすぐに外せるのもメリットです。

まとめ：cocoon ボックスメニューを今日から育てよう

ここまでの内容を簡単に振り返ります

Cocoonのボックスメニューは、読者に「次に読むべき記事」を示す案内板のような存在
ボックスメニュー用にメニューを分けて作っておくと、サイドバー用や本文用など後からの運用が楽になる
ウィジェットとショートコードを使い分けることで、ページごとに柔軟な表示パターンを作れる
CSSで色・余白・ホバーを少し調整するだけでも、見た目の印象は大きく変わる
トラブルの多くは「メニューの指定」「表示場所」「画像URL」あたりを見直せば解決しやすい

今日からの最初の一歩としては、まず次の2つだけやってみてください。

「ボックスメニュー用のメニュー」を1つだけ作る
サイドバーにそのメニューをボックスメニューとして表示してみる

一度、動く形のボックスメニューができてしまえば、あとは中身やデザインを少しずつ整えていくだけです。あなたのブログに合った、分かりやすくてクリックされやすいCocoonのボックスメニューを、少しずつ育てていきましょう。