余談ですが、Kosugi フォントは、Firefoxでは、なぜか カスレて表示されるので、Firefoxユーザーとしては、とても読みづらい状況となっています。（Firefoxだけフォントのレンダリングが違う？）

アクセス解析で、Firefoxユーザーが一定の割合で訪問されている場合は、他のフォントを主にした方が良いかもしれません。

とてもよくわかりました。

背景画像とロゴ画像を二つ使うのですね。

ありがとうございます！

ヘッダーロゴ画像を設定すれば、ヘッダーの高さは自動的に調整される場合が多いですが、意図したとおりにならない場合は、Cocoon設定の、やはり、「ヘッダー」タブの設定で高さの数値を入力して設定すると良いかもしれません。

ヘッダーの高さは、PC用、スマホ用と、別に設定ができるようになっています。

ヘッダーロゴ画像を設定して自然な高さになるようであれば、高さの数値は入れなくても良いかもしれません。

1枚の画像だけで済ませていらっしゃる方もおられますが、１枚だけでデザインする方が難易度が高いです。

Cocoonの仕様に合わせて２枚の画像をお使いになった方がデザインし易いと思います。

背景画像の方は、中央上部を基準に配置されるので、画面幅によっては、画像の下の方が隠れて見えなくなる場合があります。

実際に設定してみて、画面幅を広げたり、縮めたりして、どのように表示されるかを確認してみてください。

ヘッダーロゴの方は、文字どおりロゴなので、画像の背景色を透明にして、背景画像に重ねて表示するイメージになります。

Ikumiさんの記事が参考になるかと思います。

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

Cocoonのヘッダーは、２枚の画像を使うような仕様になっています。

1つは「ヘッダーロゴ」画像で、通常は背景を透明にしたpng画像を使います。

もう一つは「ヘッダー背景画像」で、こちらが背景になります。

どちらも、Cocoon設定の「ヘッダー」タブで設定します。

キャッチフレーズを消すには、「キャッチフレーズの配置」のところの「表示しない」にチェックをいれます。

Cocoon設定で何かを変更したときは、「変更をまとめて保存」のボタンで確定します。

スキンは以下の通りです。

可能でしたらメニューは現状通りにしたいです。

https://how-plus.com/category/hukugyou/

カラフルライン   

ご教示お願いいたします。