【Cocoon】モバイルメニューの設定とカスタマイズ3ステップ

この記事では、そんなモヤモヤを少しずつ解消しながら、Cocoonのモバイルメニューの設定＆カスタマイズ方法を、初心者にも分かりやすく解説していきます。

結論を先に一言でまとめると、cocoonのモバイルメニューを少しカスタマイズしてあげるだけで、スマホの使いやすさとブログの回遊率はぐっと変わります。

cocoonモバイルメニューをカスタマイズすると何が変わるのか

モバイルメニューでよくある悩みとcocoonカスタマイズの効果

私自身がそうだったのですが、多くのブロガーさんがモバイルメニューまわりで同じような悩みを抱えています。代表的なものをまとめると、こんな感じです。

よくある悩み	状態のイメージ	起きがちな問題
メニューが目立たない	ハンバーガーアイコンが小さいまま放置されている	読者がメニューに気づかず、そのまま離脱してしまう
ボタンが押しづらい	細いテキストリンクだけで構成されている	誤タップが増えて、ストレスを感じさせてしまう
どこを押せばいいか分からない	「ホーム」「カテゴリ」「お問い合わせ」などの優先度がバラバラ	収益記事や読んでほしい記事にたどり着いてもらえない
スマホとPCでメニュー構成がバラバラ	PC用メニューと別にモバイル用を作りっぱなし	メニュー更新のときに片方を更新し忘れやすい

こういった悩みの多くは、Cocoonの設定と少しのCSS調整でかなり改善できます。

• ボタン数をしぼって、行き先を分かりやすくする
• ボタンの色やサイズを変えて、タップしやすくする
• 「ホーム」「カテゴリ」「ランキング」などの導線を整理する

cocoonのモバイルメニューをカスタマイズする、というと「デザインをおしゃれにする」イメージが強いかもしれませんが、実際は「読者が迷わず動けるようにするための整備」に近い感覚です。

Cocoonで設定できるモバイルメニューの種類をざっくり整理

Cocoonには、モバイル向けのメニューやボタンがいくつか用意されています。ここを一度頭の中で整理しておくと、のちほどのカスタマイズがやりやすくなります。

• ヘッダーモバイルボタン
• フッターモバイルボタン
• モバイルスライドインメニュー
• グローバルメニュー（PCと共通のメニュー）

それぞれの役割をざっくり表にすると、こんなイメージです。

種類	表示位置	主な役割
ヘッダーモバイルボタン	画面上部（ヘッダー付近）	メニューや検索、ロゴなどへのボタンをまとめる
フッターモバイルボタン	画面下部に固定表示	よく使うページへのショートカット
モバイルスライドインメニュー	画面横からスッと出てくるメニュー	カテゴリや固定ページをまとめて表示する
グローバルメニュー	ヘッダー内の通常メニュー	PCでもスマホでも共通で使うメニュー

この記事では、このうち「ヘッダーモバイルボタン」「フッターモバイルボタン」「スライドインメニュー」を中心に、実際のカスタマイズの考え方を解説していきます。

 

【深呼吸タイム】

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

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

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

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

 

カスタマイズ前に知っておきたい注意点

cocoonのモバイルメニューを触る前に、次の3つだけは頭に入れておくと安心です。

特に、Cocoon本体のファイルを直接いじるのはおすすめしません。テーマの更新で上書きされてしまう可能性があるからです。子テーマや「外観 → カスタマイズ → 追加CSS」に書いておけば、後から自分で見返したり、修正しやすくなります。

cocoonモバイルメニューの基本設定（ノーコード編）

Cocoon設定→モバイルで押さえておきたい項目

Cocoonの管理画面には「Cocoon設定」というメニューがあり、その中にモバイル関連の設定がまとまっています。モバイルメニューを調整するときは、ここを外さないようにチェックしておきましょう。

項目名	ざっくり内容	最初のおすすめ設定例
モバイルメニューの表示位置	ヘッダー、フッター、両方などを選べる	迷ったらヘッダーか、ヘッダー＋フッター
モバイルメニューの種類	どのメニューをモバイルに使うかを決める	専用のモバイル用メニューを作って割り当て
モバイルボタンの表示	モバイルボタン自体を出すかどうか	基本はオンにしておく
サイドバーの表示方法	スライドインで表示するかどうか	サイドバーを使うならスライドインをオン

「モバイルメニューをヘッダーに出すのか」「フッターにボタンを置くのか」といった方針はここで決めます。迷う場合は、まずヘッダーモバイルボタンとスライドインメニューを組み合わせる構成から始めると、一般的なブログの形に近づけやすいです。

外観→メニューでモバイル専用メニューを作る

次に、WordPressの「外観 → メニュー」から、モバイル専用のメニューを用意しておきます。ここをきちんと組んでおかないと、どれだけデザインを整えても中身がスカスカのままなので、少し時間をかけてもやっておきたい部分です。

モバイルメニューに入れておきたい代表的な項目は、次のあたりです。

メニューに入れる候補	優先度の目安	ポイント
ホーム	ほぼ必須	迷ったときに戻れる場所として、分かりやすく置いておく
カテゴリ一覧	高い	特化ブログなら3〜5カテゴリに絞るとスッキリ見えやすい
ランキング・まとめページ	高い	稼ぎやすい記事や読んでほしい記事をまとめておく
プロフィール	中くらい	運営者を知ってもらいたい場合は置いておきたい
お問い合わせ	中くらい	仕事や相談を受けたい人には重要な導線

大事なのは、「とりあえず全部突っ込む」ではなく、「このボタンだけは見せたい」というものに絞ることです。メニューが増えすぎると、結局どれも押されなくなってしまうので、数を整理してあげるだけでも印象が変わります。

 

【ちょっと一息♪】

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

⇒今すぐ秘密を見る

 

ヘッダーモバイルボタンとフッターモバイルボタンの役割整理

Cocoonでは、ヘッダー側とフッター側の両方にモバイルボタンを設置できます。それぞれ、少し役割を分けて考えると使いやすくなります。

私がよくやるパターンは、次のようなイメージです。

• ヘッダーモバイルボタン
  メニューボタンや検索ボタン、ロゴボタンなどを配置して、スライドインメニューを開くきっかけに使う。
• フッターモバイルボタン
  ホーム、カテゴリ、ランキング、プロフィールなど、よく使ってほしいページへのショートカットにする。

役割を分けずに何でもかんでもボタンにしてしまうと、「どれが大事なのか」が読者から見えにくくなります。cocoonのモバイルメニューをカスタマイズするときは、「上はメニューを開くため」「下は行き先のボタン」とざっくり分けてあげると、全体が整理されて見えます。

cocoonモバイルメニューのデザインカスタマイズ（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万」と聞くと、

1. センスが必要
2. 文章力が要る

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

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

 

ボタンサイズとタップしやすさを意識したcocoonモバイルメニュー調整

最後に、意外と見落とされがちな「ボタンの大きさ」と「間隔」の話です。

これらは、padding（余白）やfont-size（文字サイズ）、margin（ボタン同士の間隔）を調整することで改善できます。cocoonのモバイルメニューをカスタマイズするときは、見た目だけでなく、実際に自分のスマホで何度かタップしてみて、「ストレスなく押せるか」を基準に調整してみてください。

UXとSEOの視点から見るcocoonのモバイルメニューカスタマイズ

クリックされる位置とボタン設計の考え方

スマホでよく触られる場所は、画面の下側、特に親指が届きやすいエリアです。そのため、本当に押してほしいボタンはフッターモバイルメニュー側に置き、ヘッダー側のボタンは補助的な役割にする、という考え方がしやすくなります。

たとえば、次のように分けるイメージです。

• ヘッダーモバイルボタンには、メニューを開くボタンや検索、ロゴを置いておく
• フッターモバイルボタンには、ホームやカテゴリ、ランキング、問い合わせなど「次の行動」につながるボタンを置く

こうして上下の役割を決めてからcocoonのモバイルメニューをカスタマイズすると、ボタンの配置で悩みにくくなります。

回遊率と収益を意識したメニュー構成の作り方

ブログの目的が「たくさん記事を読んでもらうこと」なのか、「アフィリエイト記事をしっかり読んでもらうこと」なのかによって、モバイルメニューの構成も変わってきます。

意識しておきたいポイントは次の3つです。

• 収益記事やまとめ記事にワンタップで行ける導線を作る
• カテゴリ構成を整理して、読者が次に読む記事を選びやすくする
• PCとスマホで、メニューの内容を極端に変えすぎない

たとえば、次のような考え方でメニューを組んでいくと、方向性が決めやすくなります。

• PVを増やしたいなら
  フッターメニューに「人気記事ランキング」「新着記事」などを置いて、つい色々な記事を見たくなる導線にする。
• アフィリエイト重視なら
  比較記事やレビュー記事のまとめページをボタンにして、すぐに商品情報にたどり着けるようにする。
• ブランディング重視なら
  プロフィールページや「このブログについて」を目立つ位置に置き、読者と距離を縮めていく。

cocoonのモバイルメニューをカスタマイズするときは、「見た目」だけではなく、「このボタンを押してもらえたらうれしいな」という導線を先に決めてから、配置やデザインを整えるのがおすすめです。

 

---

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

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

例えば、

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

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

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

---

 

よくある質問

Q1. cocoonのモバイルメニューをカスタマイズするとき、最初にやるべきことは何ですか？

A1. いきなりCSSを書くのではなく、「Cocoon設定 → モバイル」と「外観 → メニュー」で基本の状態を整えるのが先です。

どのメニューをモバイルに使うのか、ヘッダー側とフッター側にどんなボタンを置きたいのかを決めてから、足りない部分だけをCSSでカスタマイズしていく流れにすると、迷いが少なくなります。

Q2. CSSがほとんど分からない私でも、cocoonのモバイルメニューをカスタマイズできますか？

A2. できます。

cocoonのモバイルメニューは、テーマの設定画面だけでもかなり整えることができますし、色や文字サイズを変える程度なら、サンプルコードをコピペして「追加CSS」に貼り付けるだけでも十分です。

最初から完璧を目指さず、「背景色を変えてみる」「ボタンの文字サイズを少し大きくしてみる」といった小さな変更から始めて、少しずつ慣れていくのがおすすめです。

Q3. スマホで見たときだけ、PCとは違うメニュー構成にすることはできますか？

A3. Cocoonでは、モバイル専用のメニューを作って割り当てることができるので、PCとは違う構成にすることも可能です。

PCと同じメニューだと分かりにくいと感じる場合は、「モバイル用メニュー」を別に作り、スマホから見たときだけそのメニューが使われるように設定してあげると、より使いやすくなります。

まとめ：cocoonのモバイルメニューカスタマイズの最初の一歩

この記事でお伝えしたポイントを振り返ります

今日からできる最初の一歩としては、まず自分のスマホでブログを開き、「ホームに戻りたいとき」「カテゴリを探したいとき」「お問い合わせしたいとき」に何回タップが必要か、実際にやってみてください。

そのうえで、Cocoon設定とメニュー編集画面を開き、この記事で紹介した考え方を参考にしながら、少しずつcocoonのモバイルメニューをカスタマイズしていけば、読者にとっても自分にとっても気持ち良く使えるスマホ導線に近づいていきます。

 

---

★ちょっとブレイク★

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

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

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

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

---