ブログのメニューを変えたいのに、cocoonの設定画面やメニュー編集画面がややこしくて手が止まっていませんか。
この記事では、cocoonのヘッダーメニューやグローバルメニューを自分好みにカスタマイズする方法を、初心者目線で順番に整理して解説していきます。
結論として、cocoonのヘッダーメニューやグローバルメニューは「WordPressのメニュー設定」と「Cocoon設定」と「簡単なCSS」の三つを押さえれば、初心者でも十分きれいにカスタマイズできます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
cocoonでヘッダーメニューをカスタマイズする前に知っておきたいこと
まずは、そもそも「ヘッダーメニュー」と「グローバルメニュー」がどう違うのかを整理しておきます。ここが曖昧なままだと、設定画面を開くたびに迷ってしまうからです。
ヘッダーメニューとグローバルメニューの違い
cocoonでは、メニューを表示できるエリアがいくつか用意されています。中でもよく使うのが「ヘッダーメニュー」と「グローバルメニュー」です。イメージしやすいように、ざっくり比較してみます。
| 項目 | ヘッダーメニュー | グローバルメニュー |
|---|---|---|
| 位置 | 画面の一番上付近、ロゴの近く | ヘッダー内のナビ部分やロゴ下 |
| 役割 | サイト全体で共通の案内 | 主要カテゴリや重要ページへの導線 |
| 表示数の目安 | 3〜5個程度 | 5〜8個程度 |
| よく置くもの | ホーム、プロフィール、お問い合わせなど | カテゴリー、サービス、実績など |
| 優先度 | シンプルにまとめたい場所 | 回遊性を高めたい場所 |
どちらも「サイト全体で共通して表示されるナビゲーション」ですが、ヘッダーメニューはできるだけシンプルに、グローバルメニューは読者にサイト内を回ってもらうための道しるべというイメージで考えると分かりやすいです。
子テーマとバックアップなど最低限の準備
cocoonのヘッダーメニューやグローバルメニューをCSSでカスタマイズするなら、最初にここだけ準備しておくと安心です。
- cocoonの子テーマを有効化しておく
- カスタマイズ前に、現在の設定画面をスクリーンショットで残しておく
- CSSは「外観 → カスタマイズ → 追加CSS」にまとめて書く
- キャッシュ系プラグインを使っている場合は、一時的にキャッシュを削除しておく
特にCSSを親テーマ側に書いてしまうと、テーマ更新のタイミングで上書きされて消えることがあります。子テーマか追加CSSにまとめておくと、あとから見直しやすく、トラブルも少なくなります。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
cocoonヘッダーメニューの基本設定とカスタマイズ手順
ここからは、cocoonのヘッダーメニューを実際にカスタマイズしていく手順を、WordPressの基本設定から順番に整理していきます。まずは「メニューを作ってヘッダーに割り当てる」ところからスタートです。
WordPressメニューを作成してヘッダーメニューに割り当て
cocoonのヘッダーメニューは、WordPress標準の「メニュー機能」で作成します。流れはいつも同じなので、一度覚えてしまえば後がとてもラクになります。
ざっくりした手順は次のようなイメージです。
| 手順 | やること | 補足ポイント |
|---|---|---|
| 1 | 「外観 → メニュー」を開く | まだメニューがない場合は新規作成する |
| 2 | メニュー名を決めて作成 | 例：ヘッダーメニュー用など、分かりやすい名前にする |
| 3 | 固定ページやカテゴリーを追加 | よく読んでほしいページを優先して入れる |
| 4 | 「メニューの位置」でヘッダーにチェック | 「ヘッダーメニュー」や「ヘッダーナビ」など、テーマ側で用意された項目にチェック |
| 5 | 保存して表示を確認 | PCとスマホの両方で表示をチェックする |
最初は、ホーム、プロフィール、ブログ一覧、お問い合わせなど、最低限のリンクだけで十分です。あとからいくらでも増やしたり減らしたりできるので、まずは「シンプルで分かりやすいメニューを一つ作る」ところから始めてみてください。
Cocoon設定「ヘッダー」で見た目を整える
次に、Cocoonの「ヘッダー設定」で、ヘッダーメニュー周りの見た目を整えます。ここで調整できる項目を知っておくと、「CSSを書かなくても設定画面だけで解決できた」という場面が増えます。
よく触る項目をまとめると、だいたい次のようなイメージです。
| 設定項目 | できること | よく使う調整例 |
|---|---|---|
| ヘッダーレイアウト | ロゴとメニューの配置を選べる | ロゴ左＋メニュー右、中央ロゴなど |
| ヘッダー高さ | ヘッダー全体の縦幅を調整 | スマホで圧迫感があるときに少し低くする |
| ヘッダー背景色 | 上部の背景色を変更 | サイト全体のテーマカラーに合わせる |
| ヘッダー文字色 | ヘッダー内の文字色を変更 | 背景とのコントラストをはっきりさせる |
| ロゴ画像 | ロゴの表示・非表示やサイズ調整 | テキストロゴから画像ロゴへの切り替え |
まずはレイアウトと色だけ調整してみて、「自分のサイトの雰囲気と合っているか」を確認するとイメージがつかみやすいです。ここで大きな違和感がなければ、CSSを細かくいじらなくても十分きれいに見えることも多いです。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
cocoonグローバルメニューを見やすくカスタマイズする方法
ヘッダーメニューの基本が分かったら、次はグローバルメニューを整えていきます。グローバルメニューは、読者がカテゴリーを行き来するときの「道しるべ」なので、見やすさと分かりやすさがとても重要です。
グローバルメニューのレイアウトと配置パターン
cocoonのグローバルメニューは、ヘッダー内のどこに表示するか、いくつかのパターンから選べます。よく使われる配置をざっくり整理すると、次のような感じです。
| パターン | 特徴 | 向いているサイト |
|---|---|---|
| ロゴ左＋メニュー右 | もっとも一般的でバランスが良い | 雑記ブログや法人サイト全般 |
| ロゴ中央＋メニュー下 | ロゴをしっかり見せられる | ブランドイメージを重視したいサイト |
| メニューのみ（シンプル） | とにかくスッキリ見せられる | ミニマルなデザインが好きな人 |
cocoonのグローバルメニューをカスタマイズするときは、「どの配置が一番クリックされやすいか」というより、「自分のサイトの雰囲気やロゴとの相性」で選ぶのがおすすめです。ロゴが大きめならロゴ中央＋メニュー下、テキストロゴだけならロゴ左＋メニュー右など、しっくりくるパターンを試してみてください。
色・余白・ホバー時のスタイルを整える
グローバルメニューで大事なのは、派手さよりも「ここがメニューだ」と一目で分かることです。具体的には、次のようなポイントを押さえるだけで、一気に見やすくなります。
- 背景色と文字色のコントラストをはっきりさせる
- メニュー同士の間隔（余白）を少し広めにとる
- マウスを乗せたとき（ホバー時）に色や下線を変える
- スマホでは文字サイズを少し大きめにして、タップしやすくする
これらは、Cocoon設定と追加CSSを組み合わせるだけでも十分対応できます。色や余白を少しずつ変えながら、PCとスマホの両方で見やすいバランスを探してみてください。
CSSでcocoonのヘッダーメニュー・グローバルメニューを一歩進めてカスタマイズ
ここからは、CSSを少し書いて、cocoonのヘッダーメニューやグローバルメニューを「もう一段階見やすく」する方法を紹介します。すべて「コピペして数値を変えるだけ」で使えるようなイメージでお話しするので、難しく考えなくて大丈夫です。
フォントサイズ・高さを変えるシンプルCSS例
まずは、メニュー文字のサイズと高さ（行の高さ）を整えるイメージです。PCとスマホで少し数値を変えると、ぐっと読みやすくなります。
目安となる数値は、だいたい次のような感じです。
| 端末 | フォントサイズの目安 | 高さ（行の高さ）の目安 |
|---|---|---|
| PC | 14〜16px | 40〜48px |
| タブレット | 13〜15px | 38〜44px |
| スマホ | 13〜14px | 38〜42px |
メニューのリンク部分（aタグ）に対して、font-sizeとline-heightを指定するだけでも見た目はかなり整います。スマホだけ数値を変えたいときは、画面幅で条件分けする「メディアクエリ」の中に、スマホ用のfont-sizeやline-heightを書いてあげる形になります。
【稼げるキーワード教えます】
▼ ▼ ▼
細かいクラス名やidは、利用している環境によって違うこともあるので、ブラウザの検証ツールなどでメニュー部分の要素名を確認しながら指定していくと安心です。
サブメニュー（ドロップダウン）を読みやすくするCSS
cocoonのグローバルメニューでは、親メニューにカーソルを合わせると子メニュー（サブメニュー）を下に表示できます。ただ、そのままだと少し窮屈に見えたり、どこまでがリンクなのか分かりにくいこともあります。
そんなときは、サブメニューの背景色や余白を調整してあげると、一気に読みやすくなります。
- サブメニュー全体の背景色を親メニューより少し暗めにする
- 文字色は白など、背景としっかり差が出る色にする
- 上下左右に適度なpadding（内側の余白）をとる
- ホバー時の色は、親メニューと揃えるか、少し明るくして分かりやすくする
CSSでは、サブメニューのリストやリンクに対してpaddingや背景色、文字色を指定していくイメージです。PCだけでなくスマホでもタップしやすいかを意識して、余白を広めにとっておくと失敗しにくくなります。
よく使うcocoonメニューカスタマイズと注意点一覧
ここまで紹介してきたcocoonのヘッダーメニューやグローバルメニューのカスタマイズを、「よくある要望」ごとにまとめておきます。やりたいことに合わせて、どこを触ればいいかを確認するときのチェックリストとして使ってみてください。
| やりたいこと | 主な方法 | 注意点 |
|---|---|---|
| 文字を大きくしたい | font-sizeを変更する | 大きくしすぎると2行になって崩れることがある |
| 高さをそろえたい | line-heightを指定する | ロゴとのバランスを一緒に確認する |
| 背景色を変えたい | Cocoon設定とCSSで背景色を指定する | 文字色とのコントラストをしっかりつける |
| ホバー時に色を変えたい | :hoverを使って色を変更する | スマホではホバーがないので、やりすぎないようにする |
| サブメニューを見やすくしたい | paddingと背景色を調整する | マウスだけでなくタップでも操作しやすい幅にする |
| モバイルだけ調整したい | メディアクエリを使う | 対象にする画面幅のpx値を自分のサイトに合わせる |
一気に全部やろうとすると混乱しやすいので、「文字サイズ → 高さ → 色 → サブメニュー」のように順番を決めて、一つずつ調整していくと失敗が少なくなります。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
サイト設計から考えるcocoonヘッダーメニュー構成のコツ
ここからは、見た目だけでなく「メニューに何を置くか」という中身の話です。cocoonのヘッダーメニューやグローバルメニューは、サイトの案内板のようなものなので、設置するリンクの選び方で読者の動きが大きく変わります。
ブログタイプ別メニュー構成テンプレ
ブログのジャンルによって、ヘッダーメニューやグローバルメニューに置くとよい項目は少しずつ変わります。ざっくりテンプレにすると、次のような形が使いやすいです。
| サイトタイプ | ヘッダーメニュー例 | グローバルメニュー例 |
|---|---|---|
| 雑記ブログ | ホーム / プロフィール / お問い合わせ | 人気カテゴリを3〜5個 |
| 特化ブログ | ホーム / サービス概要 / 実績 | テーマ別カテゴリ / 比較記事 |
| アフィリエイト系 | ホーム / ランディングページ / お問い合わせ | レビューカテゴリ / ランキング記事 |
| 店舗サイト | ホーム / メニュー表 / 予約 | アクセス / スタッフ紹介 / よくある質問 |
最初から完璧を目指す必要はありません。まずはこのテンプレを参考にしながら大枠を決めてみて、アクセスが集まってきたら、よく読まれているページや見てほしいページに入れ替えていくくらいの感覚で十分です。
クリックされる並び順とラベルの付け方
同じリンクでも、「どの順番で並べるか」「どんな名前をつけるか」でクリック率は変わります。cocoonのグローバルメニューをカスタマイズするときは、次のようなポイントを意識してみてください。
- 左側から「よく使うもの」「読んでほしいもの」を優先して並べる
- ラベルは専門用語を避けて、シンプルで短い言葉にする
- 1つのメニュー名は、できれば全角4〜8文字くらいにおさめる
- 似たような内容のページは親メニューにまとめて、サブメニューで分ける
例えば「コンテンツマーケティング戦略」よりも「集客の考え方」、「リード獲得」よりも「お問い合わせを増やす」のように、読者の頭の中にある単語に寄せたラベルの方がクリックされやすくなります。cocoonのヘッダーメニューやグローバルメニューを見直すときは、「ラベルの言い方を変えてみる」という視点も試してみてください。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
よくある質問
Q1. cocoonのヘッダーメニューが表示されません。ヘッダーメニューのカスタマイズで、どこか設定を忘れているのでしょうか。
A. もっとも多い原因は、「外観 → メニュー」で作成したメニューが、ヘッダーメニューの位置に割り当てられていないパターンです。まず、メニュー編集画面で「メニューの位置」のチェックがヘッダー関連の項目に入っているか確認してみてください。
それでも表示されない場合は、キャッシュ系プラグインのキャッシュ削除、ブラウザの再読み込み、別のメニューがスマホ用に設定されていないかなども合わせてチェックすると解決しやすくなります。
Q2. cocoonのグローバルメニューで文字サイズを大きくしたら、スマホで2行になってしまいました。どう調整すればいいですか。
A. 文字サイズだけを一気に大きくすると、メニューの横幅とのバランスが崩れて2行になりがちです。次の三つを組み合わせると解決しやすくなります。
- メディアクエリを使って、スマホだけfont-sizeを少し小さくする
- メニュー数を減らして、横幅に余裕を持たせる
- メニュー名（ラベル）の文字数を短くする
特にラベルを短くするだけでも効果が大きいです。「長い説明的なラベルを、シンプルな言葉に言い換える」という視点で見直してみてください。
Q3. CSSでcocoonのヘッダーメニューをカスタマイズするのがちょっと怖いです。最低限、どこまでなら安心して触っていいでしょうか。
A. 追加CSSの欄に書く範囲であれば、万が一崩れても「書いたCSSを消す」だけで元に戻せるので、そこまで怖がらなくて大丈夫です。
最初の一歩としては、次のプロパティだけに絞ると安心です。
- font-size（文字サイズ）
- line-height（メニューの高さの調整）
- color（文字色）
- background-color（背景色）
いきなりpositionやdisplayなど、レイアウト全体に大きく影響するプロパティに手を出さず、まずは「見た目をちょっと整える」感覚でcocoonのヘッダーメニューやグローバルメニューをカスタマイズしてみるのがおすすめです。
まとめ
ポイントをあらためて整理します
- ヘッダーメニューはシンプルな案内板、グローバルメニューは回遊性を高めるナビと考える
- 「外観 → メニュー」でメニューを作り、ヘッダーやグローバルの位置に正しく割り当てる
- Cocoon設定の「ヘッダー」で、レイアウトと色を整えるだけでもかなり見やすくなる
- CSSはfont-size、line-height、color、background-colorなど、見た目の微調整から始める
- サイトのタイプに合わせてメニュー構成テンプレを使い、アクセスを見ながら少しずつ入れ替えていく
今日からできる最初の一歩は、「外観 → メニュー」を開いて、ヘッダーメニュー用のメニューを一つ作ってみることです。
ホーム、プロフィール、お問い合わせ、ブログ一覧など、まずは3〜5個だけでかまいません。メニューを作ってヘッダーに割り当て、Cocoon設定で色とレイアウトを軽く整えるところまで進めれば、あなたのブログの印象はそれだけでも大きく変わります。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
