前略、benokiさん

ヘッダーの表示より重要な事があるのですが、先ずは、ヘッダー画像の件。

以下のコードを追加CSSか、子テーマのstyle.cssファイルにコピペすると、PC、モバイルとも背景画像が同じように表示されるかと思います。

#header {
    height: 45vw;
}

追加CSSは、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」と辿ると開けます。

コードをコピペしたら、すぐ上にある「公開」ボタンをクリックして保存します。

サイトの表示を確認する場合は、プラグインの「WP Fastest Cache」は停止して、ブラウザのキャッシュを削除して確認してください。

benokiさん

別件ですが、ConoHa WING で提供されている Cocoonのテーマのフォルダ名が、標準のフォルダ名と異なっていることが原因で、ダッシュボードの操作でCocoonの親テーマをアップデートできない方が多くいらっしゃるようで、benokiさんも、そのお一人のようです。

Cocoonのテーマのデフォルトのフォルダ名

親テーマ→ cocoon-master

子テーマ→ cocoon-child-master

ConoHaからインストールしたCocoonのテーマのフォルダ名（これでは自動アップデートが有効にならないようです）

親テーマ→ cocoon

子テーマ→ cocoon-child

Cocoonの親テーマを最新版にすると、プラグインの「Classic Widgets」は不要となります。

これを解決する方法は、以下のいくつかの過去のトピックを参照してください。

最もスムーズに解決したトピック↓

[解決済] Cocoon設定に寄付タブが表示されない

https://wp-cocoon.com/community/postid/54748/

ｍｋ２さんがまとめてくださったトピック
https://wp-cocoon.com/community/postid/55027/

初心者向けのトピック↓
[解決済] ウィジェット機能のカテゴリ追加が正しくサイドバー内で反映されない

https://wp-cocoon.com/community/postid/55462/

benokiさん

ヘッダー画像の件は、このConoHaからインストールしたテーマの件が解決してから、行った方が確実です。

benokiさん

ConoHaのテーマの件が解決した後、以下はアンインストールなさってください。

投稿者:: @benoki

Classic Widgets 0.2

Cocoonは、「ウィジェットブロックエディタ」を無効にしていますので、上記プラグインは不要です。

※親テーマが、WordPress 5.8以降に対応したバージョンである必要があります。
　（Cocoon最新版であれば問題ありません。）

リフィトリーさん

丁寧に解説頂きありがとうございます！

まず、cocoonテーマ設定については、ダウンロードから再設定まで無事完了しました！
ありがとうございます！
初期の段階で教えていただけてよかったです！

ヘッダー画像の件ですが
CCSを追加すると画像はフルサイズで表示されていますが、画面いっぱいがヘッダー画像になってしまいました...

理想としては、ヘッダーの高さが300px内で画像が切れることなく表示させたいのですが、可能ですか？

モバイル表示ではいい感じに表示されています

----------------------------------------------
サイト名：子どもニガテパパのアウトドア子育て日誌
サイトURL： https://benokiblog.com 
ホームURL： https://benokiblog.com 
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.8.1
PHPバージョン：7.4.16
ブラウザ：Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.6
カテゴリ数：21
タグ数：39
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：1
Retina：0
ホームイメージ：/wp-content/themes/cocoon/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：0
JavaScript縮小化：1
Lazy Load：1
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 4.1.12
BackWPup 3.10.0
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.4.2
EWWW Image Optimizer 6.2.5
Post Type Switcher 3.2.1
Rinker 1.9.1
SiteGuard WP Plugin 1.6.0
WP Media Category Management 1.9.7
WP Multibyte Patch 2.9
XML Sitemaps 4.1.1

ｍｋ２さん

丁寧な説明、ありがとうございます！

benokiさん

高さというよりは、幅のような気もしなくはないです。

benokiさんの理想がどういうカタチなのか次第ではありますが。

幅を1920pxにすると、以下のように高さも画面いっぱい近くまで広がります。

@benoki さん

これは、画像のアスペクト比の問題ですね。

今お使いの画像は、1280 × 720pxですので、横縦の比率は、1：0.56 ぐらいです。

例えば、多くのパソコンで利用されている解像度は、横が1920ですので、高さを300pxにするには、

1920 × 300pxの画像を用意する必要があります。

@benoki さん

Cocoonのヘッダーは、背景画像とロゴ画像の２枚の画像が利用できるように設計されています。

背景画像は文字どおり背景画像で、画像の下側の方は、画面幅によって隠れても差し支えない画像を使います。

ロゴ画像の方は、サイトのタイトルで利用も可能です。タイトルを黄色の文字にした場合は、その画像の背景色を透明に設定して、背景画像に重ねて表示させる仕組みです。

ですので、ロゴ画像の方は、透明をサポートしているpng形式の画像を使います。

Cocoonのサイトの背景画像とロゴ画像を貼り付けてみますので、イメージを掴んでいただけるかと思います。

@benoki さん

Cocoonのサイトでブラウザの幅を広げたり、縮めたりしてみてください。

ブラウザの幅を広げると、背景画像の下の方が隠れるのがわかるかと思います。

@benoki さん

上記で説明したとおり、Cocoonは、基本的には２枚の画像を使ってヘッダーをデザインするように設計されています。

この仕組みを上手く利用するのが、難しいようで一番簡単です。

１枚の画像をPCとモバイルで差し替えて表示するとなると、Cocoonの標準の機能ではできないので、CSSでカスタマイズする必要が生じます。

@benoki さん

ちょうど、昨日、２枚の画像を差し替えて表示させる、というトピックがあったので、リンクを貼ってみます。

[解決済] グローバルナビメニューの高さを変更したい（太くしたい）

https://wp-cocoon.com/community/postid/56703/

PCとモバイルで、背景画像を差し替えるには、CSSでのカスタマイズが必要になります。

@benoki さん

もう一つ方法としては、1920×440px ぐらいの背景画像１枚だけで済ましてしまう、という方法です。

ブラウザの幅をパソコンの前面にして見ている方もいらっしゃいますが、少しウィンドウを小さくして見ている方もいらっしゃるかと思います。

私はFirefoxがメインなので、横幅は1300pxぐらいで見ていることが多いです。そうすると、1920×440pxぐらいの画像で、高さが300pxぐらいになるという具合です。

１枚の画像だけでデザインするときは、PCでもスマホでも違和感がないような画像の内容と横縦比にしておけば良い訳です。

@benoki さん

背景画像１枚だけのときは、以下のような計算式で、CSSのコードの数値を設定すればOKです。

背景画像の高さ÷(背景画像画像の幅+17px(縦スクロールバーの幅))×100＝数値vw

#header {
    height: 数値vw;
}

誤字訂正します。

ブラウザの幅をパソコンの前面にして見ている

ブラウザの幅をパソコンの全面にして見ている

@benoki さん

ｍｋ２さんご案内のCocoon設定の「全体」タブの設定の「サイト幅の均一化」のところの「サイト幅を揃える」にチェックを入れて、「ヘッダー」タブの設定の「高さ」を300にすると以下のような感じになります。

ヘッダーの背景画像がブラウザの幅いっぱいには広がらず、サイトの幅になります。

それでも、やっぱり、画像は横長の比率で作り直した方が良いかもしれません。

スマホや、デジカメにパノラマモードみたいのがあれば、それを使う手もあるかもしれません。

リフィトリーさん

ご指摘の通り、ブラウザ幅を変えると画像の見え方もかわっていました！

画像幅をつくりなおします！

丁寧な解説ほんとうにありがとうございました！

ｍｋ２さん

『サイトの幅を揃える』にチェックを入れるとかなり見やすくなりました！

あとは、もう少し画像幅を編集します！

丁寧な解説ほんとうにありがとうございました！