Cocoonのヘッダーがスマホで見切れるときは、画像の作り直しより先に、背景の表示方法と高さを確認しましょう。同じ画像でも表示枠の比率が変わると、見える範囲が変わるためです。現在の設定を控え、枠・画像・文字を順番に見直すと、不要な画像の作り直しを減らせます。
PCでは横長に見えても、スマホでは表示領域の比率が変わります。背景を枠いっぱいに広げる設定だと、画像の左右が切れることがあります。
Yuu実際に当ブログの検証用サイト（Cocoon使用）で、PC用の横長画像をそのままスマホで表示させた状態です。画像が完全に切れてしまっています…。
この記事では検証サイトの表示例を使い、画像サイズの目安と設定の確認順を紹介します。どのサイトにも共通する一つの最適サイズがあるわけではありません。
まず現在のヘッダー設定を控え、表示を一項目ずつ変更して比べてみてください。
ヘッダー画像サイズの目安と、先に確認する設定
では、具体的にどのサイズで作ればいいのでしょうか。
横幅1240px、高さ300〜400pxは、この記事で扱う横長ヘッダーの作成目安です。実際に必要な幅は、サイトの表示幅と使う設定によって変わります。
この大きさを起点に、文字やロゴがスマホで読めるかを確認します。数値だけを合わせて完了とせず、実際の表示を優先してください。
なぜ「幅1240px」なのか？
横幅は表示領域から決める
大きく表示する画像を小さな元画像から引き伸ばすと、ぼやけることがあります。一方、必要以上に大きい画像は容量が増えるため、画質と容量を両方確認します。
Cocoonの公式手順では、ヘッダー背景画像を設定したうえで「背景画像の全てを表示」を有効にする方法が案内されています。全体が入る設定と切り抜かれる設定を比較し、どちらが目的に合うかを選んでください。全体が入ってもロゴや文字が小さすぎる場合は、画像内へ文字をまとめた構成も見直します。
Yuu標準設定で目的の表示にできれば、端末別の画像や追加CSSを増やさずに済みます。設定で足りない箇所だけ別の方法を検討します。
脱・ヘッダー画像依存
ここまで画像の設定方法をお話ししましたが、少し視点を変えてみましょう。
「そもそも、大きなヘッダー画像は本当に必要か？」というお話です。
1. あえて「画像なし」にする選択肢
大きな背景画像がなくても、サイト名と説明、次に読む記事へのリンクで入口を作れます。画像を減らした場合の速度への影響は、自サイトで測って確認してください。
また、無駄なデザインが省かれた、「シンプルで洗練されたデザイン」にすることによって、あなた自身飽きることもなく、記事の執筆に集中することができます。
2. 「アピールエリア」を使ったファーストビュー構築
アピールエリアを使うなら、何を案内する枠なのかを先に決めます。ボタンには「初めて読む記事」など実際の行き先を示し、設置後にクリックされるかを確認します。
3. ヘッダー画像そのものを「ブロック」に置き換える
アピールエリアの発展形として、もう一歩踏み込んだ方法もあります。
ヘッダー画像をやめて、ファーストビューごとブロックで組んでしまうやり方です。
ロゴや案内文を画像の端に入れると、スマホでの切り抜きによって重要な内容が消える場合があります。まずサイト名と次に進むリンクが読めるかを確認してください。画像を背景として使い、見出しをテキストで置く構成なら、文字だけを端末幅に合わせて調整する方法も選べます。
だったら、文字は文字のまま置いてしまえばいい。
画像を背景、見出しとボタンを別の要素として配置します。それでも余白や高さの設定で重なる可能性はあるため、スマホ幅で確認してください。
Yuu冒頭で「画像が完全に切れてしまっています…」とお見せしたのと、実は同じ検証サイトです。同じCocoonのままで、ここまで変わります。
これはLazy Blocksというプラグインで作った、自作のブロックです。
テーマはCocoonのまま、記事やトップページに置けるパーツとして追加できます。
背景には動画（mp4）と画像のどちらも指定でき、動画を入れなければ画像にフォールバックします。
メインコピー・サブコピー・ボタン2つは管理画面から入力するだけです。
このブロックの設計図（JSONファイル）は無料で配布しています。
Lazy Blocksの無料版で動くので、Pro版のライセンスは要りません。
もちろん、ヘッダー画像でうまくいっているなら、無理に変える必要はありません。
画像サイズの調整を繰り返す場合は、テキストと背景を分ける構成も比較できます。必要な機能と管理のしやすさで選びましょう。
まとめ
まず高さと背景の表示方法を一つずつ変え、PCとスマホでサイト名・ロゴ・案内文を確認しましょう。数値を目安に合わせたことより、読者が必要な情報を読めることが完了の基準です。ヘッダーが整ったら、Cocoonのメニュー・記事一覧を整える順番へ進み、トップページ全体の入口も確認できます。
確認できたら元の設定も控えておきます。ロゴや写真を替えたときも、同じ手順で見直せます。
Cocoonのカスタマイズに限界を感じていませんか？
正直なところ、私がCocoonを使っていた頃は、記事を書く時間よりも「デザインが崩れるのを直す時間」の方が長かったです。
標準設定を試しても編集の負担が残るなら、テーマの機能を比較する理由になります。変更後にも設定や移行作業は必要なため、「替えるだけで解決」とは考えないでください。
次の記事ではCocoonを続ける場合も含め、SWELLとの編集機能と移行負担を比べています。
ヘッダーの次は、トップページ全体を整える
メニュー・記事一覧・本文の順に、Cocoonの標準設定で直せる範囲を確認できます。
