スマホで自分のブログを開いたとき、「メニューがごちゃごちゃしていて見づらいな…」と感じたことはありませんか。
私もCocoonを使い始めた頃、ハンバーガーメニューの設定の仕組みが分からず、三本線アイコンが出なかったり、メニューが突然消えたりして、何度もやり直しました。
この記事では、そんなモヤモヤを一気に片付けられるように、cocoonのハンバーガーメニューの考え方から設定手順、トラブル対処、ちょっとしたおしゃれカスタマイズまで、初心者向けにゆっくり解説していきます。
一言でまとめると、cocoonのハンバーガーメニューは「仕組みさえ理解できれば、難しいコードなしで誰でも扱える、スマホ向けの便利なナビゲーション」です。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
cocoon ハンバーガーメニューの基本とゴールを整理しよう
ここでは、cocoonのハンバーガーメニューがどんなものか、そしてこの記事で目指すゴールを先に軽く共有しておきます。
ハンバーガーメニューってそもそも何？
ハンバーガーメニューは、スマホ画面の左上や右上にある、三本線（≡）のアイコンのことです。
このボタンをタップすると、画面の横からメニューがスライドして現れ、カテゴリやプロフィール、問い合わせページなど、いろいろな場所へ移動できるようになります。
Cocoonでは、この三本線アイコンと連動して開くメニューを「モバイルスライドインメニュー」と呼んでいます。スマホから来た読者にとっては、ここがサイト内の案内板のような役割を持つので、きちんと整えておくと、読者が迷いにくくなります。
| 表示される場所 | 役割 |
|---|---|
| 画面の上部（左や右） | ハンバーガーアイコン（ボタン部分） |
| 画面の横からスライドイン | メニューの中身（リンク一覧） |
アイコンと中身、この2つがセットで動いているとイメージしておくと、後の設定が分かりやすくなります。
このあとやることの全体像（ざっくり）
「結局、何から手をつければいいの？」という方のために、このあとやることを先にざっくりまとめておきます。
- 外観 → メニューで「モバイル用メニュー」「モバイル用サブメニュー」を作る
- それぞれを、Cocoonの「ヘッダーモバイルボタン」「モバイルスライドインメニュー」に割り当てる
- Cocoon設定のモバイル関連の項目をオンにして、ボタンやメニューを表示させる
この記事では、この3つに加えて、表示トラブルの直し方や、cocoon ハンバーガーメニューを少しおしゃれに見せるアイデアもあわせて紹介していきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
cocoon ハンバーガーメニューの仕組みをざっくり理解しよう
ここでは、cocoon ハンバーガーメニューがどんな部品でできているのか、仕組みを少し整理しておきます。構造が分かっていると、トラブルが起きたときにも慌てずに原因を探せます。
3つの要素で動いていると考える
Cocoonのハンバーガーメニューは、大きく分けて次の3つの要素がセットになって動いています。
- WordPress本体が持っている「メニュー」の機能
- Cocoonの「メニューの位置」（ヘッダーモバイルボタン、モバイルスライドインメニューなど）
- Cocoon設定の「モバイル」タブなどにある「表示するかどうか」の設定
| 要素 | 設定場所 | 役割のイメージ |
|---|---|---|
| メニュー（WordPress） | 外観 → メニュー | メニューの中身（リンクの集まり）を作る |
| メニューの位置（Cocoon） | 外観 → メニュー（メニューの位置） | どのメニューを、どこに表示するか決める |
| 表示設定（Cocoon） | Cocoon設定 → モバイルなど | ボタンやメニューを実際に出すかどうかを切り替える |
この3つのうち、ひとつでも抜けていると、cocoonのハンバーガーメニューはうまく表示されません。「中身」「位置」「スイッチ」の3点セットだ、と覚えておきましょう。
「#menu」「#logo」「#search」の意味
Cocoonのモバイルヘッダーには、少しクセのある便利なルールがあります。
外観 → メニューでカスタムリンクを追加するとき、URL欄に「#menu」「#logo」「#search」と入力すると、それぞれ特別なボタンに変わります。
- #menu … ハンバーガーメニュー（モバイルスライドインを開くボタン）
- #logo … サイトロゴ（ブログトップに戻るリンク）
- #search … 検索アイコン（虫眼鏡のボタン）
この3つをうまく並べると、「左がメニュー、真ん中がロゴ、右が検索」という、よく見るスマホ用ヘッダーを簡単に再現できます。
最初は「#menuって何のこと？」と戸惑いやすいのですが、一度設定してみると仕組みがつかめてきます。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
cocoon ハンバーガーメニューを表示する3つのステップ
ここからは、実際にcocoon ハンバーガーメニューを表示させる手順を、3つのステップに分けて解説します。画面を開いて、一緒に作業しているつもりで読み進めてみてください。
ステップ1：モバイル用メニューを作ってヘッダーモバイルボタンに割り当てる
最初のステップは、ハンバーガーメニューの「ボタン部分」を作ることです。外観 → メニューから、スマホ用のメニューを新しく用意し、ヘッダーモバイルボタンに割り当てます。
| 手順 | 開く画面 | やること | ポイント |
|---|---|---|---|
| 1 | 外観 → メニュー | 新しいメニューを作成（例：モバイルヘッダー用） | あとで見分けやすい名前にしておく |
| 2 | 外観 → メニュー | カスタムリンクで「#menu」「#logo」「#search」を追加 | ラベルは「メニュー」「ホーム」「検索」など分かりやすく |
| 3 | 外観 → メニュー | メニューの位置で「ヘッダーモバイルボタン」にチェック | ここにチェックがないとボタンが表示されない |
ここまでできると、スマホ表示に切り替えたとき、画面上部に「三本線アイコン・ロゴ・虫眼鏡」が横並びで表示されるようになります。
私もこのステップで「#menuってほんとに文字を入れるの？」と半信半疑でしたが、一度試すと「あ、こういう仕組みなんだ」とすぐに腑に落ちました。
ステップ2：モバイルスライドインメニューに中身を入れる
次のステップは、ハンバーガーメニューをタップしたときに開く「スライドインメニュー」の中身を作ることです。同じく、外観 → メニューから別のメニューを用意します。
- 新しいメニューを作成（例：モバイルスライドイン用）
- 左側から「固定ページ」「投稿」「カテゴリ」などを選び、入れたい項目を追加
- メニューの位置で「モバイルスライドインメニュー」にチェック
ブログ系サイトであれば、次のような構成がよく使われます。
- ホーム
- プロフィール
- カテゴリ一覧
- 人気記事まとめ
- お問い合わせ
スライドインメニューは、スマホユーザーが「今どこにいて、どこへ行けるのか」を確認するときに開く場所です。たくさん詰め込みすぎると、かえって迷いやすくなるので、よく使う導線にしぼるのがおすすめです。
ステップ3：Cocoon設定でモバイルボタンの表示をオンにする
最後に、Cocoon側でモバイルボタンを表示する設定をオンにします。ここを忘れてしまうと、メニューをいくら作っても、ハンバーガーメニューのアイコン自体が出てきません。
- ダッシュボードから「Cocoon設定」を開く
- 「モバイル」や「ヘッダー」など、該当するタブを選ぶ
- 「ヘッダーモバイルボタンを表示」にチェックを入れる
- 必要に応じて「フッターモバイルボタン」もオンにする
ここまで設定したら、一度スマホ実機やブラウザのスマホ表示機能でサイトを確認してみましょう。三本線アイコンをタップして、スライドインメニューがスッと開けば、cocoonのハンバーガーメニューの基本設定は完了です。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。 【稼げるキーワード教えます】
▼ ▼ ▼
cocoon ハンバーガーメニューが表示されないときのチェックリスト
ここでは、「cocoonのハンバーガーメニューが出ない」「スマホでメニューが表示されない」といったトラブルに備えて、よくある原因と確認ポイントをまとめておきます。私自身も、何度か同じところでつまずいたので、その経験も交えながら整理します。
メニューが正しい位置に割り当てられているか
まず見直したいのは、「メニューは作ったけれど、表示位置とのひも付けを忘れている」というパターンです。
- 外観 → メニューを開き、右側の「メニュー設定」をチェック
- ヘッダーモバイルボタンに、スマホ用のメニューが割り当てられているか
- モバイルスライドインメニューに、スライドイン用メニューが割り当てられているか
よくあるのが、ヘッダーモバイルボタンにデスクトップ用メニューを割り当ててしまうケースです。この状態でも表示自体はされますが、スマホとPCで見え方がチグハグになり、意図しない動きになることがあります。
Cocoon設定側の表示設定がオフになっていないか
次に、Cocoon設定のモバイル関連項目がオフになっていないか確認します。
- Cocoon設定 → モバイル（またはヘッダー）タブを開く
- 「ヘッダーモバイルボタンを表示」にチェックが入っているか
- テーマカスタマイザーでヘッダーそのものを非表示にしていないか
テーマカスタマイザー側でヘッダーを消していると、cocoon ハンバーガーメニューも一緒に見えなくなります。設定画面をまたいでいるので、うっかり見落としやすいポイントです。
キャッシュプラグインやカスタマイズの影響
もうひとつ多いのが、キャッシュプラグインや独自カスタマイズの影響で、表示だけがおかしくなっているパターンです。
- キャッシュ系プラグインを一時的に停止して、表示が変わるか確認する
- 子テーマでヘッダー関連のPHPファイルを編集していないか見直す
- ウィジェットやフッターに書いた独自HTMLのタグがきちんと閉じているか確認する
特にフッターやサイドバーに独自のHTMLを追加している場合、タグの閉じ忘れがあると、管理画面やヘッダーの表示レイアウトが崩れることがあります。「最近追加したカスタマイズから順にOFFにしてみる」というやり方で原因を切り分けると、見つけやすくなります。
cocoon ハンバーガーメニューをおしゃれにカスタマイズするコツ
ここでは、cocoon ハンバーガーメニューの基本ができたあとに、ちょっとだけ見た目を整えるための考え方を紹介します。ガッツリとコードを書き換えるというより、「ひと手間で雰囲気をよくする」イメージで読んでみてください。
まずは「文字を減らす」だけでもスッキリする
スマホ表示はとにかく横幅が狭いので、文字が増えるほど窮屈に見えてしまいます。ハンバーガーメニュー周りも同じで、アイコンの近くにテキストがぎっしりだと、どこを見ればいいか分からなくなります。
| カスタマイズ内容 | やること | 期待できる効果 |
|---|---|---|
| アイコン下のキャプションを消す | CSSでキャプション部分を非表示にする | ヘッダーがシンプルになり、アイコンに視線が集まる |
| ロゴを少し小さくする | ロゴ画像の最大幅を調整する | アイコンとのバランスがよくなり、圧迫感が減る |
| メニュー名を短くする | ラベル名を見直して簡潔にする | メニュー一覧が読みやすくなり、迷いにくくなる |
私も、最初は説明を詰め込みすぎて「お問い合わせはこちらからどうぞ」といった長いラベルにしていましたが、「お問い合わせ」のように短くしただけでも、かなり見た目がスッキリしました。
色と背景をそろえて「サイトらしさ」を出す
次に試したいのが、サイト全体のテーマカラーに合わせて、cocoon ハンバーガーメニューの色や背景を整えることです。
- ヘッダー背景色をサイトのメインカラーに寄せる
- ハンバーガーメニューの線の色を白か濃い色に統一する
- スライドインメニューの背景色を、本文より少し濃い（または薄い）色にしてメリハリをつける
淡い色のデザインなら、スライドインメニューは少し濃いグレーにすると、文字が読みやすくなります。ダーク系のデザインなら、背景をやや明るめにして、文字色をしっかり目立たせると、ストレスなく読めるようになります。
よく使うCSSカスタマイズの方向性
ここでは、実際にcocoon ハンバーガーメニュー周りでよく行われるCSSカスタマイズの「方向性」をざっくり整理しておきます。細かいコードは、マニュアルや公式フォーラムのサンプルを見ながら当てはめていくと安心です。
| カスタマイズの方向性 | 具体例 | 難易度の目安 |
|---|---|---|
| テキストを非表示にする | キャプションや一部ラベルだけを消す | やさしい |
| 配置を少し調整する | ×ボタンの位置を右上に寄せる | ふつう |
| スライド方向を変える | 左からではなく右側からスライド表示する | ややむずかしい |
| アイコンを変える | Font Awesomeなどで独自アイコンにする | ややむずかしい |
一度にたくさんいじると、どこでおかしくなったのか分からなくなりがちです。1つ変更したら、表示を確認してから次へ進む、というペースで少しずつ試していくのがおすすめです。
PCでもcocoon ハンバーガーメニューを使いたいときの考え方
ここでは、「PC表示でもcocoon ハンバーガーメニューを使いたい」というときに、知っておきたい前提と考え方を整理します。仕組みを知らないまま無理に変えると、かえって使いづらくなってしまうこともあるので注意が必要です。
標準機能でできること・できないこと
Cocoonには、スマホ向けのハンバーガーメニュー（モバイルスライドインメニュー）は用意されていますが、PC表示を完全にハンバーガー専用にする設定は組み込まれていません。
| 項目 | スマホ表示 | PC表示 |
|---|---|---|
| ハンバーガーメニュー（スライドイン） | テーマの機能で利用できる | 標準ではなし |
| 通常のグローバルメニュー | カスタマイズ次第で表示可能 | 標準機能で利用できる |
| アイコンのみのメニュー | CSSやHTMLのカスタマイズで対応可能 | 同じくカスタマイズ次第 |
PCでもハンバーガーメニューを使う場合は、子テーマで独自にCSSやJavaScriptを追加したり、専用プラグインを組み合わせたりするなど、ある程度のカスタマイズが前提になります。
無理にPCをハンバーガーにしない方がいいケース
ノートPCなど、画面幅があまり広くない環境が増えてきたとはいえ、PCユーザーは「画面上部にメニューが並んでいる」状態を期待していることが多いです。その前提を踏まえると、次のようなサイトは無理にハンバーガーメニューにしない方が親切なこともあります。
- メニューの数が少なく、一目で全体が把握できるサイト
- 企業サイトや店舗サイトなど、初めて来た人が多いサイト
- PCにあまり慣れていない人もアクセスしそうなサイト
PCでハンバーガーメニューにすると、「メニューがどこにあるのか分からない」という不安を与えてしまう場合もあります。見た目の好みだけで決めるのではなく、「読者がどう使うか」という視点もあわせて考えると、結果的に使いやすいサイトになります。
サイトタイプ別のcocoon ハンバーガーメニュー構成例
ここでは、「ハンバーガーメニューに何を入れればいいか分からない」という方のために、サイトのタイプごとの構成例を紹介します。丸ごと真似するというより、「自分のサイトだと何を入れようかな」と考えるきっかけにしてもらえたらうれしいです。
ブログ・アフィリエイトサイト向けの構成
まずは、個人ブログやアフィリエイトサイトで使いやすい、cocoon ハンバーガーメニューの構成例です。
| メニュー項目 | 目的 | メモ |
|---|---|---|
| ホーム | 迷ったときの戻り先にする | ロゴからも同じページに戻れるようにしておく |
| プロフィール | 誰が書いているブログか伝える | 信頼感アップにつながる |
| カテゴリ一覧 | 読みたいジャンルの記事を探しやすくする | カテゴリは5〜7個程度にしぼると迷いにくい |
| 人気記事 | 読んでほしい代表的な記事へ案内する | アクセスを伸ばしたい記事を入れておく |
| お問い合わせ | 仕事の相談や質問を受ける窓口にする | SNSリンクと組み合わせてもOK |
私がやってしまいがちだった失敗は、「せっかく作った固定ページだから」と、細かいページまで全部メニューに詰め込んでしまうことでした。結果として、どこを押せばいいのか分からなくなり、クリックもあまりされませんでした。
今は「初めて来た人が最初に押しそうなボタン」と「リピーターがよく使うボタン」にしぼることを意識して、メニューを設計しています。
店舗・コーポレートサイト向けの構成
次に、店舗や会社の公式サイトで使いやすい、cocoon ハンバーガーメニューの構成例です。
- トップページ（サービス全体の入り口）
- サービス一覧（何をしている会社・お店なのか）
- 料金・プラン（料金がひと目で分かるページ）
- 会社概要・店舗情報（住所・代表者・アクセスなど）
- お問い合わせ・予約（行動してもらうためのページ）
店舗やコーポレートサイトの読者は、「どんなサービスか」「いくらくらいかかるのか」「どこにあるのか」「どうやって申し込むのか」が分かれば、安心して問い合わせや来店につなげられます。まずはこの4〜5つを軸にメニューを組み立てて、それ以外の細かい情報は、トップページやサービスページの中からたどれるようにしておくとスッキリまとまります。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
よくある質問（cocoon ハンバーガーメニューQ&A）
最後に、cocoon ハンバーガーメニューについて、よくある質問をQ&A形式でまとめておきます。細かいところで迷いがちなお悩みを中心にピックアップしました。
Q1：cocoonのハンバーガーメニューにカテゴリが表示されません
A：外観 → メニューで、カテゴリを追加したメニューが「モバイルスライドインメニュー」に割り当てられているかを確認してみてください。
よくあるのは、「メニュー自体は作ったものの、モバイルスライドインメニューではなく別の位置にチェックが入っている」というパターンです。cocoon ハンバーガーメニューの中身として表示されるのは、モバイルスライドインメニューにひも付いたメニューだけなので、どの位置に割り当てたかを一度見直してみましょう。
Q2：スマホではcocoon ハンバーガーメニューが出るのに、PCでは表示されません
A：Cocoonの標準機能では、PC表示をハンバーガーメニューにまとめる設定は用意されていません。cocoonのハンバーガーメニューは、基本的にはスマホやタブレット向けの機能と考えておくと分かりやすいです。
PCでもハンバーガーメニューを使いたい場合は、子テーマでのカスタマイズや、別のプラグインを使うといった対応が必要になります。ただ、PCユーザーは画面上部にメニューが並んでいる形を期待していることも多いので、見た目だけで決めず、使いやすさも一緒に考えてみてください。
Q3：cocoon ハンバーガーメニューの線の色や太さは変えられますか
A：CSSを追加すれば、cocoon ハンバーガーメニューの線の色や太さも調整できます。
ヘッダー背景を濃い色にして、ハンバーガーアイコンの線だけ白にする、といった変更も可能です。サイト全体のカラーやスキンとのバランスを見ながら、少しずつ変えてみるとよい雰囲気になります。大きくイメージを変えたい場合は、Cocoonのスキン機能と組み合わせるのもひとつの手です。
まとめ：cocoon ハンバーガーメニューは一度整えれば強い味方
この記事のポイントを整理します
- cocoonのハンバーガーメニューは「メニューの中身」「メニューの位置」「表示設定」の3つがそろって動く
- スマホ用メニューは「ヘッダーモバイルボタン」と「モバイルスライドインメニュー」をセットで考えると分かりやすい
- 「表示されない」ときは、割り当てミス → Cocoon設定 → キャッシュやカスタマイズの順に見直すと原因を見つけやすい
- カスタマイズは「文字を減らす」「色と背景をそろえる」だけでも見た目がグッと整う
- サイトのタイプごとにメニュー構成の型を持っておくと、迷わず設計できる
今日からできる最初の一歩としては、まずスマホで自分のサイトをじっくり眺めてみてください。cocoon ハンバーガーメニューを開き、「よく使う導線はどれか」「逆にいらない項目はないか」をメモしながら、外観 → メニューを開いて整理してみるのがおすすめです。
一度しっかり整えてしまえば、あとは記事が増えても、読者が迷わずにサイト内を巡ってくれるようになります。あなたのブログやサイトに合った、使いやすくて心地よいcocoon ハンバーガーメニューを育てていきましょう。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
