〇当サイトではアフィリエイトプログラムを利用して商品やサービスを紹介しています。
〇当サイトにはプロモーションが含まれています。
〇当サイトはA8.netをはじめとするアフィリエイトサービスを通じて、成果報酬型の広告収入を得ています。
正直、ブログを始めたころはヘッダー画像のサイズどころか、ヘッダー画像自体を設定していませんでした。
シンプルが一番だと決めつけて、単色（なんかおしゃれ？）、ほぼ無画像（サイト全体が軽くなる）、テキストのみっていうよくわからないこだわりを持って運営していたのです。
けれど気が付いたんです。どのブログにも大手企業のウェブサイトにもヘッダー画像的な何か、採用されてるなって…。
で、用意しようと考えたところ今度は「何ピクセルで用意すればいいの？」「設定したのに表示がおかしい」「画像がぼやける」という壁が次々と出てきて。
同じ経験、ありませんか？
Cocoonはとても優秀な無料テーマですが、ヘッダー周りの設定は意外と「知らないと迷う」ポイントが多い。特にサイズ。何となく作った画像をアップしてみたら引き伸ばされてぼやけた、なんてことはあふぃはじの読者からもよく聞きます。
この記事では、10年以上のブログ運営経験をもとに、Cocoonのヘッダー画像サイズの考え方と設定の流れを整理します。「結局何ピクセルで作ればいいか」から「なぜその数字なのか」まで、一緒に確認していきましょう。
そもそもCocoonの「ヘッダー」って何を指してるの？
まず前提を整理しておきたいのですが、Cocoonでいう「ヘッダー」には2つの概念が混在しています。ここを混同したまま設定しようとすると、途中で迷子になりやすい。
ヘッダー背景画像：サイト上部のエリア全体に敷く背景の画像。横に大きく広がる帯状のもの。
ヘッダーロゴ：そのヘッダーエリアの中に重ねて表示するロゴ画像（サイト名の画像版）。
つまり「背景＋その上に乗るロゴ」という二層構造になっています。この記事で主に扱うのはヘッダー背景画像のサイズです。
設定場所は、WordPressの管理画面から「Cocoon設定」→「ヘッダー」タブ。ここで背景画像のアップロード、高さ（px）の指定、表示方法の選択ができます。
ヘッダーロゴも同じタブで設定できますが、ロゴはヘッダー背景より小さいサイズで用意するのが基本。目安としては「ヘッダー背景の高さ÷1.2」くらいに収めると収まりが良くなります。
ここで一つ確認しておきたいのですが、いま設定しようとしているのはどちらですか？ 背景画像だけを設定したい人、ロゴも変えたい人、それぞれで次の手順が少し変わります。自分の目的に合わせて読み進めてみてください。
結局、ヘッダー画像は何ピクセルで用意すればいい？
結論から言います。
横幅：1400px以上（できれば1920px） 縦幅：設定したいヘッダーの高さ × 1.2倍
この組み合わせが、さまざまなデバイスで無難に表示できる基準になります。
なぜ横幅が1400px以上必要なのか。それは画面サイズが人によってバラバラだから。ノートPCなら1280px前後、デスクトップなら1920px、大型モニターは2560pxのものもある。用意した画像の横幅より大きい画面で見たとき、画像が引き伸ばされてボケます。
だから大きめに作っておく発想が正解。1920pxで用意しておけば、ほとんどの環境でぼやけずに表示できます。画像ファイルが大きくなると表示速度に影響するので、アップロード前に圧縮ツール（TinyPNGなど）を使うと安心です。
縦幅を「1.2倍」にする理由もあります。
ヘッダーの高さをCocoon設定で「220px」に指定した場合、220px × 1.2 = 264pxの画像を用意するのが目安。なぜかというと、iPadを横向きにした場合など特定のデバイスで画像が縮小表示されるとき、縦が足りずにメニューとの間に空白が生まれることがある。少し余裕を持たせることでその問題を防げます。
ただし、「どのサイズにすれば完璧」という答えは正直ありません。訪問者が使うデバイスは千差万別で、どこかに最適化すれば他がズレる可能性はゼロにはならない。設定したらCocoonのレスポンシブテスト（管理画面下部に表示されるプレビューリンク）で複数デバイスの表示を確認する、というひと手間が意外と大事です。
まずは横1920px×縦（希望する高さ×1.2）pxを一つの基準に作ってみてください。
ヘッダーの「高さ」設定、ここが意外と落とし穴
Cocoon設定の「高さ（px）」に数値を入れたのに、思った通りの高さにならない。こういう経験、けっこうあるあるです。
原因は2つあることが多い。
①「変更をまとめて保存」を押し忘れている
シンプルですが意外とやりがちです。高さを変えてもページをリロードしたら元に戻っていた……という場合は、まず保存ボタンの押し忘れを疑ってみてください。
②キャッチフレーズやロゴ画像が高さに干渉している
これが本質的な落とし穴です。Cocoonでは「キャッチフレーズ」を表示している場合、一定の高さ以下に縮小できなくなる仕様があります。同じく、ロゴ画像のサイズがヘッダーの高さより大きい場合も、高さ設定が効かなくなります。
対処法は順番が大事です。
- まずキャッチフレーズを非表示にして高さが変わるか確認する
- ロゴ画像を削除した状態で高さ設定を試してみる
- それでうまくいったら、ロゴ画像を適切なサイズに作り直してアップし直す
「なぜか設定通りにならない」ときは、高さの数値より先に「何かが邪魔しているか」を確認する。この順番を知っているかどうかで、解決までの時間がかなり変わります。
実際のヘッダー高さを確認したいときはChrome拡張の「Page Ruler Redux」が便利です。測りたいエリアをドラッグするだけでpx数を教えてくれます。ヘッダー画像を作る前に現在の実際の高さを測ってから画像サイズを決めると、ズレが少なくなります。
設定手順：Cocoonでヘッダー画像を反映させるまで
実際の手順を整理します。管理画面のどこを操作するかを先に把握しておくと、迷いが減ります。
ステップ1：ヘッダー画像を用意する 横1920px、縦は（設定したい高さ×1.2）pxで画像を準備。CanvaやAdobe Expressなど無料ツールで作れます。ファイル形式はJPEGかPNG。アップ前にTinyPNGで圧縮しておくと表示速度に優しい。
これをやっておくと3ヶ月後、「あのとき画像を小さく作ってしまった」という後悔を防げます。
ステップ2：Cocoon設定を開く 管理画面 → 「Cocoon設定」 → 「ヘッダー」タブ をクリック。
ステップ3：ヘッダー高さを先に決める 「高さ（PC）」「高さ（モバイル）」を入力。ここを先に決めることで、画像の縦幅の基準が決まります。
ステップ4：背景画像をアップロード 「ヘッダー背景画像」の「選択」から画像をアップ。「表示方法」は「カバー（全体を覆う）」が最もきれいに表示されることが多いです。
ステップ5：保存して確認 「変更をまとめて保存」をクリック。サイトをプレビューして、PC・スマホ・タブレットそれぞれで確認する。
この流れで一度やってみてください。うまくいかない箇所があれば、次のセクションのトラブルシューティングも参考にしてみてください。
画像がぼやける・表示がずれるときに確認すること
設定したのに「なんかぼやける」「上下に変な余白ができる」という場合、原因はだいたい絞れます。
ぼやける場合の原因
- 用意した画像の横幅が、見ているモニターの解像度より小さい
- 画像を過度に圧縮してしまった（TinyPNGの圧縮率が高すぎた）
対処：横1920px以上で作り直し、圧縮は「画質70〜80%程度」を目安に。
上下に余白ができる場合の原因
- 縦幅の余裕が足りない（特にiPad横向き表示で起きやすい）
- 「表示方法」の設定が「繰り返し」や「左上固定」などになっている
対処：縦幅を高さ×1.2に見直す。「表示方法」を「カバー」に変更してみる。
スマホで表示が崩れる場合
- 「高さ（モバイル）」の設定を変えていない（PC高さとは別に設定が必要）
Cocoonはモバイル用の高さを別途設定できます。PC向けに大きな高さを設定しつつ、モバイルは100〜150px程度に抑えると、スマホで見たときに自然に収まることが多いです。
正直、一発で完璧な表示になるケースは少ないです。「大体こんな感じ」を目指して設定→確認→微調整を繰り返す、という感覚の方が現実に近い。まずやってみることが大事です。
ヘッダー画像にこだわりたくなったら、テーマを見直す選択肢も
ここまで読んでいくと、「Cocoonの設定、なかなか細かいな」と感じた人もいるかもしれません。
正直に言うと、Cocoonは無料テーマの中では高機能な部類ですが、デザインの細かいカスタマイズには一定の制約があります。ヘッダーのデザインをもっと自由に変えたい、設定の手間を減らしたい、という段階になったとき、有料テーマへの移行を検討する人は多いです。
ただ、今の段階ではCocoonのままで十分な場合がほとんどです。「もっとこうしたい」という具体的な欲求が出てきたときが、移行を考えるサイン。
もしそのタイミングが来たら、という話として。ヘッダーを含むデザイン性と設定の手軽さを両立したテーマとして、個人的にはXwriteやSTORK SEあたりが使いやすいと思っています。テーマ選びで迷ったときは、おすすめWordPressテーマのまとめ記事も参考にしてみてください。
今Cocoonを使っているなら、まず今の環境でできることをやり切る。それが遠回りのようで、一番早い道だと思っています。
Cocoonヘッダー画像サイズの早見表
| 項目 | 推奨値 | 補足 |
|---|---|---|
| 横幅 | 1920px（最低1400px） | モニターが大きいほど必要なpxが増える |
| 縦幅 | 設定した高さ × 1.2 | iPad横表示での余白を防ぐ余裕分 |
| ファイル形式 | JPEG / PNG | JPEGの方がファイルサイズが小さくなりやすい |
| 表示方法 | カバー（推奨） | 全体を覆うように自動調整される |
| 圧縮目安 | 画質70〜80% | TinyPNG使用時の参考値 |
| モバイル高さ | 100〜150px | PCとは別に設定が必要 |
FAQ
Q1. Cocoonのヘッダー画像のサイズは何ピクセルにすればいいですか？ 横幅は1920px以上が安心です。縦幅は、Cocoon設定で指定したヘッダーの高さ×1.2が目安。特定のサイズが「絶対正解」ではなく、作った後にレスポンシブテストで複数デバイスを確認するひと手間が大切です。
Q2. ヘッダー画像を設定したのに、なぜかぼやけます。 ほとんどの場合、用意した画像の横幅が見ている画面の解像度より小さいのが原因です。横1920pxで作り直してみてください。圧縮ツールを使った場合は、圧縮率が高すぎた可能性もあります。
Q3. 高さを設定したのに変わりません。 「変更をまとめて保存」ボタンを押し忘れていないか確認。次に、キャッチフレーズの表示をオフにしてみてください。ロゴ画像が大きすぎる場合も高さ設定が効かなくなることがあります。
Q4. スマホで見るとヘッダーが大きすぎます。 Cocoon設定の「高さ（モバイル）」はPC高さとは別に設定できます。スマホ向けは100〜150px程度に設定すると収まりが良くなることが多いです。
Q5. ヘッダーロゴはどのサイズで作ればいいですか？ ヘッダー背景の高さより小さければOKです。目安は「ヘッダー背景の高さ÷1.2」。Cocoon設定で表示サイズを調整できるので、まず用意してみてから微調整する流れで問題ありません。
まとめ
Cocoonのヘッダー画像サイズ、迷いポイントをまとめます。
- 横幅は1920pxが基準。モニターより小さい画像は引き伸ばされてぼやける
- 縦幅は設定高さ×1.2を目安に。iPadなど特定デバイスでの余白を防ぐため
- 高さが変わらないときは、キャッチフレーズの表示・ロゴ画像のサイズを確認する
- スマホ用の高さはPC用とは別に「高さ（モバイル）」で設定する
設定してみて、「なんか思ってたのと違う」という状態が続くようなら、数値を変えながら試行錯誤するしかない部分もあります。一発で完璧になることは正直少ない。でも、この記事で整理した順番で確認していくと、原因がどこにあるかは絞り込めるはずです。
Cocoonでヘッダー周りの基本設定が固まったら、次は記事のアイキャッチ画像やサイト全体のデザインを見直す段階になると思います。テーマ選びまで視野に入ってきたなら、WordPressテーマのまとめ記事も読んでみてください。あふぃはじで実際に調べた結果をまとめています。
