この記事では、そんなモヤモヤを少しずつ解消しながら、Cocoonのモバイルメニューの設定＆カスタマイズ方法を、初心者にも分かりやすく解説していきます。
結論を先に一言でまとめると、cocoonのモバイルメニューを少しカスタマイズしてあげるだけで、スマホの使いやすさとブログの回遊率はぐっと変わります。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
cocoonモバイルメニューをカスタマイズすると何が変わるのか
まずは「そもそもモバイルメニューをいじる意味ってあるの？」というところから整理します。ここが腹落ちしていると、細かい調整をする気力も湧いてきます。
モバイルメニューでよくある悩みとcocoonカスタマイズの効果
私自身がそうだったのですが、多くのブロガーさんがモバイルメニューまわりで同じような悩みを抱えています。代表的なものをまとめると、こんな感じです。
| よくある悩み | 状態のイメージ | 起きがちな問題 |
|---|---|---|
| メニューが目立たない | ハンバーガーアイコンが小さいまま放置されている | 読者がメニューに気づかず、そのまま離脱してしまう |
| ボタンが押しづらい | 細いテキストリンクだけで構成されている | 誤タップが増えて、ストレスを感じさせてしまう |
| どこを押せばいいか分からない | 「ホーム」「カテゴリ」「お問い合わせ」などの優先度がバラバラ | 収益記事や読んでほしい記事にたどり着いてもらえない |
| スマホとPCでメニュー構成がバラバラ | PC用メニューと別にモバイル用を作りっぱなし | メニュー更新のときに片方を更新し忘れやすい |
こういった悩みの多くは、Cocoonの設定と少しのCSS調整でかなり改善できます。
- ボタン数をしぼって、行き先を分かりやすくする
- ボタンの色やサイズを変えて、タップしやすくする
- 「ホーム」「カテゴリ」「ランキング」などの導線を整理する
cocoonのモバイルメニューをカスタマイズする、というと「デザインをおしゃれにする」イメージが強いかもしれませんが、実際は「読者が迷わず動けるようにするための整備」に近い感覚です。
Cocoonで設定できるモバイルメニューの種類をざっくり整理
Cocoonには、モバイル向けのメニューやボタンがいくつか用意されています。ここを一度頭の中で整理しておくと、のちほどのカスタマイズがやりやすくなります。
- ヘッダーモバイルボタン
- フッターモバイルボタン
- モバイルスライドインメニュー
- グローバルメニュー（PCと共通のメニュー）
それぞれの役割をざっくり表にすると、こんなイメージです。
| 種類 | 表示位置 | 主な役割 |
|---|---|---|
| ヘッダーモバイルボタン | 画面上部（ヘッダー付近） | メニューや検索、ロゴなどへのボタンをまとめる |
| フッターモバイルボタン | 画面下部に固定表示 | よく使うページへのショートカット |
| モバイルスライドインメニュー | 画面横からスッと出てくるメニュー | カテゴリや固定ページをまとめて表示する |
| グローバルメニュー | ヘッダー内の通常メニュー | PCでもスマホでも共通で使うメニュー |
この記事では、このうち「ヘッダーモバイルボタン」「フッターモバイルボタン」「スライドインメニュー」を中心に、実際のカスタマイズの考え方を解説していきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
カスタマイズ前に知っておきたい注意点
cocoonのモバイルメニューを触る前に、次の3つだけは頭に入れておくと安心です。
- カスタマイズは子テーマか「追加CSS」に書く
- 大きく見た目を変える前に、いまの状態を控えておく
- 一気に変えずに、1か所ずつ確認しながら進める
特に、Cocoon本体のファイルを直接いじるのはおすすめしません。テーマの更新で上書きされてしまう可能性があるからです。子テーマや「外観 → カスタマイズ → 追加CSS」に書いておけば、後から自分で見返したり、修正しやすくなります。
cocoonモバイルメニューの基本設定（ノーコード編）
ここからは、CSSを書かなくてもできる、cocoonのモバイルメニュー設定を整理していきます。まずはノーコードでできる範囲をきちんと整えておくと、そのあとにデザインを変えるときもスムーズです。
Cocoon設定→モバイルで押さえておきたい項目
Cocoonの管理画面には「Cocoon設定」というメニューがあり、その中にモバイル関連の設定がまとまっています。モバイルメニューを調整するときは、ここを外さないようにチェックしておきましょう。
| 項目名 | ざっくり内容 | 最初のおすすめ設定例 |
|---|---|---|
| モバイルメニューの表示位置 | ヘッダー、フッター、両方などを選べる | 迷ったらヘッダーか、ヘッダー＋フッター |
| モバイルメニューの種類 | どのメニューをモバイルに使うかを決める | 専用のモバイル用メニューを作って割り当て |
| モバイルボタンの表示 | モバイルボタン自体を出すかどうか | 基本はオンにしておく |
| サイドバーの表示方法 | スライドインで表示するかどうか | サイドバーを使うならスライドインをオン |
「モバイルメニューをヘッダーに出すのか」「フッターにボタンを置くのか」といった方針はここで決めます。迷う場合は、まずヘッダーモバイルボタンとスライドインメニューを組み合わせる構成から始めると、一般的なブログの形に近づけやすいです。
外観→メニューでモバイル専用メニューを作る
次に、WordPressの「外観 → メニュー」から、モバイル専用のメニューを用意しておきます。ここをきちんと組んでおかないと、どれだけデザインを整えても中身がスカスカのままなので、少し時間をかけてもやっておきたい部分です。
モバイルメニューに入れておきたい代表的な項目は、次のあたりです。
- ホーム
- 主要カテゴリ（3〜5個程度）
- 人気記事のランキングページ
- プロフィールページや、このブログについて
- お問い合わせやフォームへのリンク
| メニューに入れる候補 | 優先度の目安 | ポイント |
|---|---|---|
| ホーム | ほぼ必須 | 迷ったときに戻れる場所として、分かりやすく置いておく |
| カテゴリ一覧 | 高い | 特化ブログなら3〜5カテゴリに絞るとスッキリ見えやすい |
| ランキング・まとめページ | 高い | 稼ぎやすい記事や読んでほしい記事をまとめておく |
| プロフィール | 中くらい | 運営者を知ってもらいたい場合は置いておきたい |
| お問い合わせ | 中くらい | 仕事や相談を受けたい人には重要な導線 |
大事なのは、「とりあえず全部突っ込む」ではなく、「このボタンだけは見せたい」というものに絞ることです。メニューが増えすぎると、結局どれも押されなくなってしまうので、数を整理してあげるだけでも印象が変わります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
ヘッダーモバイルボタンとフッターモバイルボタンの役割整理
Cocoonでは、ヘッダー側とフッター側の両方にモバイルボタンを設置できます。それぞれ、少し役割を分けて考えると使いやすくなります。
私がよくやるパターンは、次のようなイメージです。
- ヘッダーモバイルボタン
メニューボタンや検索ボタン、ロゴボタンなどを配置して、スライドインメニューを開くきっかけに使う。 - フッターモバイルボタン
ホーム、カテゴリ、ランキング、プロフィールなど、よく使ってほしいページへのショートカットにする。
役割を分けずに何でもかんでもボタンにしてしまうと、「どれが大事なのか」が読者から見えにくくなります。cocoonのモバイルメニューをカスタマイズするときは、「上はメニューを開くため」「下は行き先のボタン」とざっくり分けてあげると、全体が整理されて見えます。
cocoonモバイルメニューのデザインカスタマイズ（CSSの基本）
基本設定が整ってきたら、次はCSSを使って見た目や使い勝手を少しずつ整えていきます。難しいコードは書かなくても、背景色や文字色を変えるだけで印象はがらっと変わります。
CSSを追加する場所とcocoonカスタマイズの基本ルール
まずは「どこにCSSを書くか」を決めておきましょう。Cocoonの場合、次の二つの場所が代表的です。
| 追加場所 | メリット | デメリット |
|---|---|---|
| 子テーマのstyle.css | コードをまとめやすく、本格的な運用に向く | 子テーマの編集に慣れていないと最初は少し不安 |
| 外観 → カスタマイズ → 追加CSS | ブラウザ上から手軽に試せる | 書く量が増えると、どこに何を書いたか分かりづらくなる |
私は、最初は「追加CSS」で試して、うまくいったコードをあとから子テーマに移す、というやり方をよく使っています。いきなり完璧に整理しようとせず、「まずは表示を変えてみる」ぐらいの軽い気持ちで触ってみると、案外すんなり慣れてきます。
ヘッダーモバイルメニューの色と文字を変えるカスタマイズ例
ヘッダー部分の色や文字色を変えるだけでも、「自分のブログっぽさ」がかなり出てきます。やることはシンプルで、ヘッダーに使われているクラスやIDに対して、background（背景色）やcolor（文字色）を指定するだけです。
- ヘッダーバーの背景色を、自分のサイトカラーに合わせる
- 文字色を白や黒にして、コントラストをはっきりさせる
- ハンバーガーメニューのアイコン色を強調して目立たせる
cocoonのモバイルメニューをカスタマイズするとき、まずはこの「色の調整」から始めると、変化が目に見えやすいのでモチベーションも上がります。
スライドインメニューと背景デザインの整え方
モバイルスライドインメニューは、スマホサイトでよく見る「横からにゅっと出てくるメニュー」です。ここも少し手を入れてあげると、かなり使いやすくなります。
- 背景色を少し暗めにして、前面の文字を読みやすくする
- メニュー項目の行間や上下の余白を広げて、タップしやすくする
- 区切り線を入れて、項目同士の境目をはっきりさせる
背景を半透明にして、下のコンテンツが少し透けるようにすると、「いまどのページからメニューを開いたか」が感覚的に分かりやすくなります。細かい部分ではありますが、こうした調整を積み重ねていくと、cocoonのモバイルメニューに「丁寧さ」が出てきます。
フッターモバイルメニューのレイアウトカスタマイズ
続いて、画面下部に固定されるフッターモバイルメニューの調整です。ここは、タップしやすさと回遊率の両方に関わる、とても重要なポイントです。
フッターメニューのボタン数と並び順を決める
【稼げるキーワード教えます】
▼ ▼ ▼
フッターモバイルメニューは、あれもこれもとボタンを増やしがちですが、多すぎると逆に押されなくなります。私の感覚では、ボタン数は3〜5個くらいに収めるのがちょうどいいです。
- 左側に「ホーム」か「カテゴリ」を置く
- 中央付近に、収益記事やランキングなどの導線を置く
- 右端にプロフィールや問い合わせ、メニューアイコンなどを置く
| ブログタイプ | ボタン構成の例 | ポイント |
|---|---|---|
| 雑記ブログ | ホーム / カテゴリ / ランキング / プロフィール | まずは「どんな記事があるか」を見てもらう構成 |
| 特化ブログ | ホーム / 主要カテゴリA / 主要カテゴリB / 比較記事 | 収益につながりやすいカテゴリや比較記事を優先 |
| 店舗系サイト | ホーム / メニュー表 / アクセス / 予約ページ | 来店・予約など、行動につながるボタンを前面に出す |
フッターは親指が自然に届く位置にあるので、ここに「次にしてほしい行動」を素直に並べてあげるイメージで、cocoonのモバイルメニューをカスタマイズしていくと良いです。
1列表示や横スクロールなどレイアウトを変えるアイデア
ボタン数が増えてきたら、フッターメニューのレイアウトも工夫してあげると見やすくなります。代表的なパターンを整理しておきます。
| レイアウトパターン | 特徴 | 向いているケース |
|---|---|---|
| 固定の1列表示 | 画面幅に収まる数だけボタンを横一列に並べる | 3〜4個のボタンで十分なブログ |
| 横スクロール | 指でスライドすると隠れているボタンが現れる | カテゴリ数が多い雑記ブログなど |
| アイコンのみ表示 | テキストを消してアイコンだけを並べる | ホームや検索など、意味が分かりやすいアイコンを使うとき |
横スクロールの場合は、メニュー全体に横方向のスクロールを許可するスタイルを当て、ボタンを横並びにしていくイメージです。アイコンのみ表示にしたいときは、テキスト部分を非表示にしてFont Awesomeのアイコンを活かすと、スッキリした印象になります。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
ボタンサイズとタップしやすさを意識したcocoonモバイルメニュー調整
最後に、意外と見落とされがちな「ボタンの大きさ」と「間隔」の話です。
- ボタンが小さすぎると、指で押したときに隣のボタンまで触ってしまう
- ボタン同士の間隔が狭いと、全体が窮屈で扱いにくく感じる
- 文字サイズが小さいと、そもそも押す気が起きなくなる
これらは、padding（余白）やfont-size（文字サイズ）、margin（ボタン同士の間隔）を調整することで改善できます。cocoonのモバイルメニューをカスタマイズするときは、見た目だけでなく、実際に自分のスマホで何度かタップしてみて、「ストレスなく押せるか」を基準に調整してみてください。
UXとSEOの視点から見るcocoonのモバイルメニューカスタマイズ
ここからは、デザインや見た目の話だけでなく、「ユーザー体験（UX）」と「SEO」の視点も少しだけ取り入れて、モバイルメニューをどう設計していくかを考えてみます。
クリックされる位置とボタン設計の考え方
スマホでよく触られる場所は、画面の下側、特に親指が届きやすいエリアです。そのため、本当に押してほしいボタンはフッターモバイルメニュー側に置き、ヘッダー側のボタンは補助的な役割にする、という考え方がしやすくなります。
たとえば、次のように分けるイメージです。
- ヘッダーモバイルボタンには、メニューを開くボタンや検索、ロゴを置いておく
- フッターモバイルボタンには、ホームやカテゴリ、ランキング、問い合わせなど「次の行動」につながるボタンを置く
こうして上下の役割を決めてからcocoonのモバイルメニューをカスタマイズすると、ボタンの配置で悩みにくくなります。
回遊率と収益を意識したメニュー構成の作り方
ブログの目的が「たくさん記事を読んでもらうこと」なのか、「アフィリエイト記事をしっかり読んでもらうこと」なのかによって、モバイルメニューの構成も変わってきます。
意識しておきたいポイントは次の3つです。
- 収益記事やまとめ記事にワンタップで行ける導線を作る
- カテゴリ構成を整理して、読者が次に読む記事を選びやすくする
- PCとスマホで、メニューの内容を極端に変えすぎない
たとえば、次のような考え方でメニューを組んでいくと、方向性が決めやすくなります。
- PVを増やしたいなら
フッターメニューに「人気記事ランキング」「新着記事」などを置いて、つい色々な記事を見たくなる導線にする。 - アフィリエイト重視なら
比較記事やレビュー記事のまとめページをボタンにして、すぐに商品情報にたどり着けるようにする。 - ブランディング重視なら
プロフィールページや「このブログについて」を目立つ位置に置き、読者と距離を縮めていく。
cocoonのモバイルメニューをカスタマイズするときは、「見た目」だけではなく、「このボタンを押してもらえたらうれしいな」という導線を先に決めてから、配置やデザインを整えるのがおすすめです。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
よくある質問
最後に、cocoonのモバイルメニューをカスタマイズするときに、よく聞かれる質問をいくつかまとめておきます。
Q1. cocoonのモバイルメニューをカスタマイズするとき、最初にやるべきことは何ですか？
A1. いきなりCSSを書くのではなく、「Cocoon設定 → モバイル」と「外観 → メニュー」で基本の状態を整えるのが先です。
どのメニューをモバイルに使うのか、ヘッダー側とフッター側にどんなボタンを置きたいのかを決めてから、足りない部分だけをCSSでカスタマイズしていく流れにすると、迷いが少なくなります。
Q2. CSSがほとんど分からない私でも、cocoonのモバイルメニューをカスタマイズできますか？
A2. できます。
cocoonのモバイルメニューは、テーマの設定画面だけでもかなり整えることができますし、色や文字サイズを変える程度なら、サンプルコードをコピペして「追加CSS」に貼り付けるだけでも十分です。
最初から完璧を目指さず、「背景色を変えてみる」「ボタンの文字サイズを少し大きくしてみる」といった小さな変更から始めて、少しずつ慣れていくのがおすすめです。
Q3. スマホで見たときだけ、PCとは違うメニュー構成にすることはできますか？
A3. Cocoonでは、モバイル専用のメニューを作って割り当てることができるので、PCとは違う構成にすることも可能です。
PCと同じメニューだと分かりにくいと感じる場合は、「モバイル用メニュー」を別に作り、スマホから見たときだけそのメニューが使われるように設定してあげると、より使いやすくなります。
まとめ：cocoonのモバイルメニューカスタマイズの最初の一歩
この記事でお伝えしたポイントを振り返ります
- cocoonのモバイルメニューは、見た目を整えるだけでなく「読者の導線」を意識してカスタマイズすることが大事。
- まずは「Cocoon設定 → モバイル」と「外観 → メニュー」で、メニューの中身と表示位置を整える。
- ヘッダーのモバイルボタンはメニューや検索の入り口、フッターボタンは行き先のショートカットと考えると設計しやすい。
- ボタン数やレイアウト、ボタンの大きさを工夫することで、タップしやすく迷いにくいメニューにできる。
- UXとSEOの視点から、人気記事や収益記事への導線を意識したメニュー構成にしていくと、回遊率アップが期待できる。
今日からできる最初の一歩としては、まず自分のスマホでブログを開き、「ホームに戻りたいとき」「カテゴリを探したいとき」「お問い合わせしたいとき」に何回タップが必要か、実際にやってみてください。
そのうえで、Cocoon設定とメニュー編集画面を開き、この記事で紹介した考え方を参考にしながら、少しずつcocoonのモバイルメニューをカスタマイズしていけば、読者にとっても自分にとっても気持ち良く使えるスマホ導線に近づいていきます。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
