WordPressテーマ「Cocoon」を入れてみたものの、ヘッダーがどこか味気ない、思っていた雰囲気と違う、とモヤモヤしていませんか。
私も最初はCocoonのヘッダーをどう触ればいいのか分からず、レイアウトを変えては戻して…を何度も繰り返しました。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
Cocoonヘッダー カスタマイズで何が変わる？まずはゴールを決めよう
ここでは、Cocoonのヘッダーをカスタマイズすると何が良くなるのか、そしてどんなゴールを目指すと迷いにくいのかを整理します。いきなり設定画面をいじる前に、「どんなヘッダーにしたいのか」をざっくり言葉にしておくと、ブレずに進められます。
デフォルトのCocoonヘッダーの特徴と、よくある悩み
Cocoonを有効化した直後のヘッダーは、とてもシンプルで必要最低限の情報しか出ていません。
その分、次のような悩みが出やすいです。
- タイトル文字だけで安っぽく見える
- ロゴや画像がなく、サイトの世界観が伝わりにくい
- ヘッダーが縦に長くて、記事本文がすぐに見えない
イメージしやすいように、状態ごとの違いを表にまとめてみます。
| 状態 | 見た目の印象 | よくある問題 |
|---|---|---|
| デフォルトのCocoonヘッダー | シンプルで情報は少ない | 個性が出にくく、少し味気なく感じられやすい |
| ロゴだけ追加したヘッダー | ブログらしさが少し出る | ロゴサイズや余白のバランスが崩れがち |
| ロゴ＋背景色や画像を整えたヘッダー | サイトの世界観が伝わりやすい | メニューの文字色やスマホ表示の調整も必要 |
私の感覚では、「ロゴ」「背景色（または背景画像）」「メニューの位置と色」の3つを整えるだけでも、読者の第一印象はかなり変わります。
ヘッダーカスタマイズで目指したい3つのゴール
Cocoonのヘッダーカスタマイズは、かっこよさだけが目的ではありません。
私は次の3つをいつも意識しています。
- ひと目で「どんなブログか」が伝わること
- メニューが見やすく、次に読む記事を探しやすいこと
- スマホで見ても邪魔にならず、ストレスなく読めること
もう少し具体的にすると、こんなイメージです。
- ロゴやタイトルで、ジャンルや雰囲気がなんとなく分かる
- ヘッダーの高さがほどよく、本文もすぐに目に入る
- スマホでロゴやメニューが重なったり、小さすぎたりしない
この3つのゴールを頭の片すみに置きながら、次の章から具体的な設定を見ていきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
Cocoonヘッダーの基本構造とカスタマイズの下準備
ここでは、そもそもCocoonのヘッダーがどんなパーツでできているのか、そして管理画面のどこを触ればよいのかを整理します。構造をざっくり理解しておくと、「どこを変えれば何が変わるのか」がイメージしやすくなります。
Cocoonヘッダー設定画面の開き方と主な項目
まずは、Cocoonヘッダーの設定画面を開きましょう。
手順はとてもシンプルです。
- WordPress管理画面にログインする
- 左メニューの「Cocoon設定」をクリックする
- 上部のタブから「ヘッダー」を選ぶ
ヘッダー画面には、こんな項目が並んでいます。
| 項目名 | できること | 最初に見る優先度 |
|---|---|---|
| ヘッダーレイアウト | ロゴやメニューの配置を選ぶ | 高い |
| ヘッダー高さ（PC・モバイル） | ヘッダーの縦幅を調整する | 高い |
| ヘッダーロゴ | ロゴ画像を設定する | 高い |
| キャッチフレーズ | タイトル下に説明文を出すかどうか決める | 中 |
| ヘッダー背景画像 | ヘッダーの背景に画像を敷く | 中 |
| ヘッダー色・文字色 | 背景色や文字色を変更する | 高い |
最初の段階では、この表で「優先度：高い」と書いた部分だけ触れば十分です。
細かな装飾や微調整は、全体の雰囲気が見えてきてからでも間に合います。
ヘッダーレイアウトと高さ設定の考え方
Cocoonのヘッダーカスタマイズで迷いやすいのが、「レイアウト」と「高さ」の設定です。
なんとなく好みだけで決めてしまうと、あとでスマホ表示が窮屈になったり、本文が見えにくくなったりします。
用途別のざっくりとした目安をまとめると、こんなイメージになります。
| サイトタイプ | レイアウトの例 | ヘッダー高さの目安（PC） |
|---|---|---|
| 雑記ブログ | ロゴ左＋メニュー右 | 80〜120px前後 |
| 特化ブログ・アフィリエイト | ロゴ中央＋メニュー下 | 100〜150px前後 |
| 事業サイト・ポートフォリオ | ロゴ左＋メニュー右＋ボタン | 120〜180px前後 |
ヘッダーを高くしすぎると、記事本文が画面の下に追いやられてしまいます。
私は、PCでは「ロゴとメニューがきちんと収まる最小限の高さ」、スマホでは「ロゴ1行＋メニューアイコン」で収まるくらいを目安にすることが多いです。
スキン・子テーマとヘッダーの関係
Cocoonには「スキン」というデザインの着せ替え機能があります。
スキンによっては、ヘッダーの色や背景があらかじめ設定されていて、ヘッダー画面で色を変えても反映されにくいことがあります。
よくあるケースを挙げると、こんな感じです。
- スキンがヘッダー背景色やロゴ位置をCSSで上書きしている
- スキンのスタイルでフォントやメニューの見た目が固定されている
- 子テーマの「追加CSS」でヘッダーをカスタマイズしていて、どこを直せばいいか分からない
こういった状況にハマったときは、次の順番で確認してみてください。
- 一度スキンを「なし」にして、ヘッダーの挙動が変わるか見る
- 子テーマの「追加CSS」に、ヘッダー関連の記述がないかざっと確認する
- どうにもおかしくなったら、スクショを残したうえで、設定のリセットも検討する
構造を理解しておくと、「Cocoonのヘッダーカスタマイズが効かない…」と感じたときも、落ち着いて原因を探しやすくなります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
ロゴと背景画像でCocoonヘッダーをカスタマイズ
ここからは、ロゴや背景画像、色の組み合わせでヘッダーの印象を大きく変える方法を見ていきます。一番目に入る部分なので、ここを整えるだけで「ちゃんと作り込まれたサイト」という印象になりやすいです。
ロゴの種類とおすすめ画像サイズ
ロゴには大きく分けて「テキストロゴ」と「画像ロゴ」の2パターンがあります。
それぞれの特徴を整理してみます。
| ロゴの種類 | 特徴 | 向いている人 |
|---|---|---|
| テキストロゴ | サイトタイトルの文字だけで構成される | まずは手軽に始めたい、デザインソフトを使いたくない人 |
| 画像ロゴ | 画像ファイルをアップロードして表示する | アイコンや手書き風ロゴなど、オリジナル感を出したい人 |
画像ロゴを使う場合のサイズの目安は、次のように考えるとバランスを取りやすいです。
- 横長のロゴなら、横幅600〜800px程度
- 高さは100〜200px程度に抑える
- 背景は透過PNGにしておくと、ヘッダー色を変えてもなじみやすい
Cocoonのヘッダーの高さをコンパクトにしたい場合は、ロゴの縦サイズも控えめにしておくのがポイントです。
私は、ロゴの上下に少し余白が見えるくらいのサイズを目安に調整することが多いです。
背景画像とヘッダー色の組み合わせパターン
Cocoonのヘッダーカスタマイズで雰囲気を一気に変えたいときに便利なのが、背景画像です。ただ、どんな画像でもいいわけではなく、文字の読みやすさとのバランスを取ることが大事です。
よく使われるパターンは、ざっくり分けると次の3つです。
- シンプル重視：背景画像なし＋単色背景
- 世界観重視：薄めのテクスチャ画像をうっすら敷く
- 写真重視：大きめの写真を大胆に使う
私がよくやる流れはこんな感じです。
- まずは単色背景で、ロゴとメニューが読みやすい色の組み合わせにする
- 物足りなければ、淡いテクスチャ画像を背景に足してみる
- 写真を使う場合は、メニューやタイトルの文字が読みにくくならないかを必ずチェックする
背景画像は、つい「おしゃれさ」だけで選びがちですが、文字がつぶれてしまうと一気にストレスの原因になります。
ロゴやメニューの文字がはっきり読めるかどうかを、常に確認しながら調整してみてください。
テキストロゴ派のシンプルカスタマイズ
「画像ロゴを作るのが面倒」「デザインツールは触りたくない」という方は、テキストロゴを活かしたシンプル路線も十分ありだと思います。
テキストロゴを使うときのポイントは次の通りです。
- タイトルのフォントサイズを少し大きめにする
- 太字にして、ヘッダー背景色とのコントラストをはっきりさせる
- キャッチフレーズは1行に収まる短い文章にする
Cocoonでは、追加CSSを使えばタイトル部分だけフォントサイズを変えることもできます。
イメージとしては、サイトタイトルのクラスに対して「少し大きめのフォント」、キャッチフレーズのクラスに対して「やや小さめで控えめなフォント」を指定する形です。
細かい数値はテーマやスキンによって変わりますが、「タイトルが主役、キャッチフレーズは補足」という役割が伝わるように調整すると、読みやすいヘッダーになります。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。 【稼げるキーワード教えます】
▼ ▼ ▼
グローバルメニューとスマホ表示のカスタマイズ
ここでは、グローバルメニュー（ナビゲーション）とスマホ表示の設定に絞って見ていきます。Cocoonのヘッダーをカスタマイズするとき、ここを整えるかどうかで「使いやすさ」が大きく変わります。
ヘッダーに表示するグローバルメニューの作り方
グローバルメニューは、WordPress管理画面の「外観」→「メニュー」から作成します。
ヘッダーに表示させる際のチェックポイントをまとめると、次の通りです。
| チェック項目 | 内容 | 見落としポイント |
|---|---|---|
| メニューを作成したか | 新規メニューを作り、名前を付けて保存する | メニュー名を付け忘れて、保存できていないことがある |
| 表示する項目を追加したか | 固定ページやカテゴリーをメニューに追加する | 重要なページを入れ忘れ、後から気づくことが多い |
| 表示位置を指定したか | メニューの「位置」を「ヘッダーメニュー」にチェックする | ここを忘れると、メニューを作ってもヘッダーに出てこない |
メニューに入れる項目は、多くても5〜7個くらいに絞るのがおすすめです。
何でもかんでも並べると、PCでは窮屈になり、スマホでは収まりきらずに見づらくなってしまいます。
スマホでのCocoonヘッダー カスタマイズのポイント
今は多くのアクセスがスマホから来るので、PCでかっこよく見えていても、スマホで窮屈だと台無しです。
スマホでCocoonのヘッダーをチェックするときは、次の点を確認してみてください。
- ロゴが2行以上に折り返されていないか
- キャッチフレーズが長すぎて、画面を占領していないか
- メニューアイコン（ハンバーガーメニュー）が押しやすい位置とサイズか
Cocoonにはモバイル専用の設定や、モバイルメニューの項目も用意されています。
ロゴが二重に表示されるときは、「ヘッダー」と「モバイル」の両方でロゴ表示がオンになっていないかを確認すると、解決することが多いです。
ちょっと差がつくCSSカスタマイズのイメージ
ここでは、細かいコードというより、「どこをCSSで触ると見た目の差が出るか」というイメージをお伝えします。
- ヘッダー全体の上下の余白を少しだけ広げて、窮屈さをなくす
- メニューにマウスを乗せたとき、下線や背景色をふわっと変えるようにする
- スマホ表示のときだけ、タイトルやメニューの文字サイズを少し大きくする
実際には、追加CSSにヘッダー全体のクラスやメニューのクラスに対するスタイルを足していく形になります。
私は、変更前に必ずスクリーンショットを残しておいて、「うまくいかなければ戻せばいい」という気持ちで少しずつ試すようにしています。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
よくある失敗とトラブルのCocoonヘッダーカスタマイズ術
ここでは、Cocoonのヘッダーをカスタマイズするときによくある失敗と、その対処法をまとめます。私自身がハマったポイントも多いので、先に知っておくとかなり楽になると思います。
ヘッダーが思った通りに変わらないとき
設定を変更してもヘッダーがうまく変わらないときは、だいたい次のような原因が多いです。
- スキンがヘッダーの色や背景を上書きしている
- キャッシュが残っていて、変更が反映されていない
- 別のプラグインや追加CSSがヘッダーに影響している
症状と原因、対処法をざっくり表にするとこうなります。
| 症状 | 考えられる原因 | 試してほしい対処 |
|---|---|---|
| 色を変えても反映されない | スキンが色を上書きしている | 一度スキンを「なし」にして挙動を確認する |
| 変更したはずなのに前のまま | ブラウザやプラグインのキャッシュ | シークレットウィンドウで確認し、キャッシュを削除する |
| メニューの位置が崩れる | プラグインや追加CSSの影響 | 一時的にプラグインを無効化し、追加CSSをコメントアウトして確認する |
Cocoonの設定だけをいじっても変わらないときは、いったんテーマ以外の要素も疑ってみると原因にたどり着きやすくなります。
画像がぼやける・ロゴが大きすぎるとき
ヘッダーにロゴを設定したとき、「なんとなくぼやっとして見える」「妙に大きくてバランスが悪い」と感じることがあります。
よくある原因は次のようなものです。
- 元のロゴ画像のサイズが小さすぎる
- 縦横比がヘッダーレイアウトと合っていない
- 表示サイズと元画像サイズの差が大きく、ブラウザ側で拡大されている
私が意識しているポイントは、次の通りです。
- ロゴ画像は、表示したい大きさより少し大きめで作る
- 正方形ではなく、やや横長にしておくとレイアウトしやすい
- アップロード後に、ヘッダー高さとのバランスを画面で確認しながら微調整する
また、ロゴ画像はJPEGよりもPNG形式の方が、ロゴや文字の輪郭がシャープに見えやすいです。背景を透過しておけば、ヘッダーの色を変えたときもロゴだけ浮いて見えにくくなります。
迷ったら一度リセットするのもアリ
いろいろ触っているうちに、「何をどう変えたのか分からなくなってきた…」という状態になることもあると思います。
私も何度か、ヘッダーがカオスな状態になって、どこから直せばいいか分からなくなりました。
そんなときは無理に小手先で修正しようとせず、次のように一度整理してしまうのもアリです。
- 今の状態をスクリーンショットで残しておく
- ヘッダー設定の「リセット」機能があれば試してみる
- スキンを一度オフにして、プレーンな状態に戻してから組み立て直す
一度まっさらな状態に戻してから、「ロゴ → 色 → メニュー → スマホ」の順にもう一度作り直すと、迷いが減ります。
Cocoonのヘッダーは何度でもやり直せるので、怖がらずに試してみて大丈夫です。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
よくある質問
ここでは、Cocoonのヘッダーカスタマイズについて、よくある質問をQ&A形式でまとめます。
Q1：cocoonヘッダー カスタマイズは初心者でもできますか？
A：はい、十分できます。
Cocoonはヘッダーの設定項目が分かりやすく、基本的には管理画面からのクリック操作だけでカスタマイズできます。
この記事で紹介してきたように、
- ロゴ
- 高さ
- 背景色（または背景画像）
- グローバルメニュー
といった順番で1つずつ調整していけば、コードを書かなくてもかなり見栄えの良いヘッダーに近づけられます。
Q2：cocoonヘッダーのロゴサイズはどれくらいがいいですか？
A：サイトにもよりますが、横長で高さ控えめのロゴが扱いやすいです。
Cocoonのヘッダーをカスタマイズするときは、ヘッダー自体の高さも調整するため、ロゴが縦に大きすぎると窮屈に見えがちです。
目安としては、横幅600〜800px、高さ100〜200px程度に収まっていると、PCでもスマホでもバランスを取りやすいです。
実際に表示させながら、「ロゴの上下に少し余白が残るくらい」を目安に微調整してみてください。
Q3：スマホのCocoonヘッダーだけ、別のデザインにできますか？
A：完全に別デザインにするには少し知識が必要ですが、「スマホだけ少し変える」というレベルなら十分可能です。
Cocoonにはモバイル専用の設定があり、追加CSSを使えば、
- スマホだけキャッチフレーズを非表示にする
- スマホだけタイトルの文字サイズを小さく（または大きく）する
といった調整ができます。
まずはPCとスマホで「ヘッダーの高さ」と「ロゴの見え方」を確認し、気になるところから少しずつ手を入れていくのがおすすめです。
まとめ：今日からできるCocoonヘッダー カスタマイズの一歩
この記事のポイントを整理します
- Cocoonのヘッダーカスタマイズのゴールは「世界観」「見やすさ」「スマホの使いやすさ」の3つ
- まずは「ヘッダーレイアウト」「高さ」「ロゴ」「色」の4項目を押さえると土台が整う
- ロゴは横長・高さ控えめ・透過PNGを意識すると、ヘッダーとのなじみが良くなる
- グローバルメニューは5〜7項目に絞り、スマホでの見え方も必ずチェックする
- トラブル時はスキン・キャッシュ・追加CSSを疑い、必要なら一度リセットして組み立て直す
今日から取るべき最初の一歩としては、次の流れをおすすめします。
- 今のヘッダーをスクリーンショットに残す
- Cocoon設定の「ヘッダー」を開き、レイアウトと高さだけ先に整える
- そのあとでロゴと色を調整し、最後にスマホ表示を確認する
この順番で進めれば、Cocoonのヘッダーカスタマイズで迷子になりにくくなります。
少しずつ手を入れながら、あなたのブログにぴったりなヘッダーを育てていきましょう。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
