前略、mami1977 さん

ヘッダー画像を背景画像として設定した場合ですが、そもそも背景画像は、高さという概念がないため、設定した箇所のコンテナに高さを別途指定してあげる必要があります。

以下のようなCSSのコードを追加CSSか、子テーマのCSSに記載すれば、スマホでも同じアスペクト比で表示できるみたいです。

#header {
   height: calc(100vw * 0.26);
}

0.26の数値は適宜調整してください。

設定する画像の幅が800pxぐらいで、タイトル文字を画像に含めると、解像度が足らず、ぼやけてしまいます。もう少し大きい画像を設定した方が良いかもしれません。1600pxぐらい？

mami1977 さん

背景画像全体を表示するときの計算式は、ヘッダーの背景画像の

高さ ÷ （横幅 + 17px） ＝ ｘ

#header {
  height: calc(100vw * x);
}

で、だいたい合っていると思います。

17pxは、スクロールバーの幅です。（18pxでもいいかもしれません）

例えば、1500×500pxの背景画像なら、

0.33 ぐらい、

以下のように分数で書いてもイケルっぽいです。

#header {
   height: calc(100vw * 500/1517);
}

mami1977 さん

モバイルのサブメニューについては、あまり詳しくわからないのですが、モバイル用のメニューはPC用とは別に作ることができるので、６つに絞って、サブメニューなし、というのは、答えになってないですかね？

mami1977 さん

前述した以下の式ですが、

#header {
   height: calc(100vw * x);
}

画像全体を表示ではなく、画像の下の方が切れてしまっても良いデザインの背景画像の場合は、ｘの値を調整すれば、表示させたい縦幅を調整できるかと思います。

値を減らすと、横長のアスペクト比になるかと思います。

mami1977 さん

私も当初、PC用のメニューがモバイル表示でも表示されたので、PC用のメニューがそのままスマホメニューになるのだと勘違いしていました。

フォーラムを読んでいるうちに、なんだ、モバイルヘッダーメニューは、モバイルヘッダーメニューとして、PC用のメニューとは別に作れるようになっているんだと、遅まきながら気づいた次第です。

モバイル用のグローバルナビメニューを設定する方法

mami1977 さん

よく考えたら、モバイルメニューを別のメニューにしても、カテゴリのタイトルにしたいのだから、意味がないですよね。

Cocoon設定の「モバイル」タブの設定で「モバイルメニュー」を「トップメニュー」にすると、ハンバーガーメニューのようなデザインにはなってしまいますが、サブメニューが開けるようにはなるんですけど・・（でもかなりデザインが変わってしまうし・・）

mami1977 さん

ヘッダー画像をヘッダーの背景画像ではなく、ヘッダーロゴ画像の方に設定した場合は、以下のようなCSSのコードでイケルような気がします。

/*ヘッダーロゴ画像を画面幅いっぱいに広げ、上下の隙間も無くす*/
.header-in {/*ロゴ画像を画面幅いっぱいに広げる*/
   width: 100%;
}

.logo-image{/*画像上のCocoonデフォルトの10pxのpaddingを無くす*/
   padding: 0;
}

.logo-image a {/*ブロック要素にして横幅いっぱいに広がるようにする*/
   display: block;
}

.site-name-text {/*ロゴ画像を画面幅いっぱいに広げる*/
   width: 100%;
}

.site-logo-image.header-site-logo-image {/*画像下の隙間を無くす*/
   width: 100%;
   vertical-align: middle;
}

.tagline {/*サイトのキャッチフレーズの非表示（cocoon設定のヘッダータブの設定でもできる）*/
   display: none;
}

ヘッダーロゴ画像に設定したときは、ヘッダーの背景画像は不要になります。

なお、これは、ヘッダー画像を１つの画像だけでデザインする場合の話です。

背景画像とロゴ画像の両方を設定する場合は、ロゴ画像はpng形式の画像を使うのが良いと思います。png形式の画像は、背景を透明にすることができるので、背景画像と重ねても、ロゴだけ表示させることができます。（CocoonのWebサイトもこの方法を使っているようです）

ヘッダー画像を１つの画像で表示する場合、背景画像でもロゴ画像でもどちらでもできるようですが、ロゴ画像の方で設定すると、クリックできます。

クリックすると、トップページへのリンクになっているので、トップページへ ページ移動します。

背景画像を使用して calc() を使って高さを設定した場合ですが、「Opera Mini」というブラウザでは、上手く表示されないかもしれません。「Opera Mini」は calc() をサポートしていないようです。