前略、non さん

アピールエリアには、文字やボタンを設置することができるようになっています。

アピールエリアの画像は、この文字やボタンの背景画像という位置付けになっています。

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

そのため、画像のアスペクト比を保って表示するためには、以下のようなCSSのコードで、アスペクト比を保つ必要が生じます。

#appeal {
  height: 数値vw;
}

背景画像の高さpx ÷ (背景画像の幅px + 17px)×100＝数値vw

背景画像に設定される画像のサイズは、どのようなサイズが用いられるのか、わからないので、ご自身で背景画像に設定した画像のサイズを参照してください。

ただし、上記のコードを設定してみるとわかるかと思いますが、アピールエリアに文字やボタンを設定していると、それらとの整合性がとれずに、デザインが崩れてしまいます。

背景画像のアスペクト比を保つ指定をしてしまうと、文字やボタンの表示と整合性がとれなくなってしまうため、現在のような仕様になっているものと推測されます。

表示させたいコンテンツが画像だけの場合は、「画像」ウィジェットを用いて、CSSでマージンを調整する方法もあります。

non さん

つまり、何が言いたいのかといいますと、

要望としては、ただ普通に画面幅いっぱいに合わせて縮小していってほしいのです。

このご要望は、アピールエリアには、適していないということです。

もし、画像だけを配置するのが目的であるなら、「画像」ウィジェットを用い、余分な余白が、周囲に生じてしまう場合にはCSSで調整する方が良いのかもしれません。

なぜかと言いますと、画像ウィジェットの方は、背景画像ではないので、「高さ」を持っています。

non さん

お差し支えがなければ、フォーラム冒頭の案内にありますとおり、対象ページのURLをご提示いただき、高速化設定を無効にして、いただければと思います。

より具体的なアドバイスがいただけるかもしれません。

高速化設定を無効にするには

https://wp-cocoon.com/theme-trouble/

nonさん

過去の同様の内容のトピックのリンクを貼っておきます。

[解決済] モバイル版のアピールエリアを全画面表示させたい

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

もしアピールエリアが背景画像だけの場合は、CSSのコードを３行、追加CSSか、子テーマのCSSに記述すれば解決します。

CSSの記述のやり方がわからないときは、この続きに書きこんでいただければと思います。

ご親切に回答くださいましてありがとうございます。

アピールエリアの画像が背景画像とのこと、理解いたしました。

calcで計算式を埋め込んで解決いたしました。

お手数をおかけしました。

nonさん

私も以前は calc の計算式を使っていたのですが、計算は事前に電卓や、ソロバン？などで行えばいいだけなので、以下のコードだけで済むようです。

#appeal {
  height: 30.5vw;
}

/*数値は事前に計算したものを記述するだけ*/