前略、うおさとさん

Webサイトを作ったことがある方ですと、すぐに気づく事なのですが、「背景画像」に設定した画像は、画像だけでは、「高さ」を持っていません。

ですので、「高さ」を指定しなくては、画面上の高さが確保されません。

Cocoon設定の「ヘッダー」タブの設定では、PC用とモバイル用のそれぞれの高さを指定することができるようになっています。

うおさとさんのサイトのヘッダーの高さをブラウザのデベロッパーツールで、500pxにしてみたところ、画像が設定されているのが、わかります。

うおさとさん

現在、背景画像に設定されている画像は、縦方向が長く、画像の上の方に何も映っていないので、上の方だけですと、余白に見えてしまいます。

ですので、現在背景画像に設定している画像も、背景画像に適していません。

この画像を背景画像にお使いになりたい、ということでしたら、上の方グレーの部分を大幅にトリミングする必要があるようです。

また、Cocoonでは、サイトのロゴの方も、テキストではなく、画像にすることもできるようになっています。

ロゴを画像にする場合は、「ヘッダーロゴ」のところで、任意の画像を設定します。

ロゴ画像を設定される場合は、画像の背景を透明にして作成してください。

ロゴ画像を設定される場合は、透明をサポートしているpng形式かgif形式のものを使用してください。

ロゴを画像にしない場合は、テキストで表示されるので設定は不要です。

うおさとさん

ヘッダーの「背景画像」は横長のものを用意してください。

横幅は、1920px 程度あった方が良いかもしれません。

パソコンの画面の横幅が1920pxのものが多いようですので、それ以下ですと拡大表示になるため、ぼやけてきます。

フォーラムのメンバーの Ikumi さんの記事が参考になるかと思います。

[Cocoon] ヘッダー画像サイズと選ぶポイント

https://blogstudynotes.com/header/

うおさとさん

Cocoonは、設定項目がとても多く、何年も使っていても、あれ？こんな機能もあったんだ、というようなことも多々あります。

ですので、フォーラムにお問い合わせの際は、明らかに「不具合」というもの以外は、「不具合報告」のジャンルではなく、「テーマの質問」にお寄せいただいた方が良いのかもしれません。

うおさとさん

Webサイトに画像を掲載する場合は、

・画像

・背景画像

の2種類の設定が可能です。

これは、Cocoonに限らず、Webサイトであれば共通かと思います。

「画像」の方は、画像だけでも高さを持っているのに対して、「背景画像」の方は、画像だけでは高さをもっていない、ということです。

うおさとさん

ちなみに、このCocoonのサイトの画像を調べてみると、

背景画像は

1024×309px

ロゴ画像は

200×88px

が使われているようです。

案外小さいですね。

画像は実際に表示されるサイズより小さいと、拡大表示されるため、ぼやけてきます。

横幅1024pxでは、ちょっと小さいような気がします。

大きなサイズの画像は、ファイルサイズも大きくなってしまいがちですので、以下のようなサービスを使って、ファイルサイズをなるべく小さくした方が良いのかもしれません。

https://tinypng.com/

リフィトリーさん

ご回答いただきありがとうございました。

お気づきの通り、Webサイトの作成やフォーラムへの投稿が初めてのため、

お手数おかけしてしまい申し訳ありません。

　・背景画像に対して「高さ」を設定しなければ反映されない

　・問い合わせは「テーマの質問」へ投稿する

上記につきまして理解致しました。

また、横幅についてやファイルサイズの圧縮方法について

ご教授いただきありがとうございました。

今後の作業の参考にさせていただきます。

本投稿は解決済みと致します。

ご対応いただきありがとうございました。

引き続きどうぞよろしくお願いいたします。