すいません。画像が添付できていませんでした。

こちらが、PCで表示したアピールエリアの画像になります。

初めに投稿させていただいた方についてる画像がモバイルで見た状態になります。

画像の順番が逆になりますがよろしくお願いいたします。

前略、@たいち さん

背景画像のアスペクト比を保ったまま、表示させるだけでしたら、先日のトピックとほぼ同じやり方でできそうです。

[解決済] スマホ表示だとアピールエリアの画像が切れる

アピールエリアの文字等を入れて、と、いうことになりますと、また別の工夫が必要かもしれません。

ラフィトリーさん、ありがとうございます。
試してみます！

夜分に申し訳ございません。

教えていただいた

[解決済] スマホ表示だとアピールエリアの画像が切れる

をみてやってみた結果

現在、【外観】→【テーマエディター】→【style.css】の一番下の部分に以下の文字を貼り付けた状態になっていますが、とくにアピールエリアに変化はなく、画面の縦幅はPC、モバイルともに狭いままです。

#appeal {
    height: calc(100vw * 0.34);
}

【cocoon設定】の【高さ】を800に変更した場合は、PCでは高さ800に変更されるのですが、モバイルでは縦幅（高さ）が狭くなってしまいます。

お時間のある時にでも教えて頂きたいです。よろしくおねがいします。

@たいち さん

ヘッダー画像が表示されるコンテナの比率を、使用する背景画像の比率に合わせます。

背景画像の高さ÷（背景画像の幅+ブラウザのスクロールバーの幅）＝横幅に対する高さの比率

932px÷(1,676px+17px)=0.55

#appeal {
    height: calc(100vw * 0.55);
}

@たいち さん

ヘッダー画像じゃなくて、アピールエリアの背景画像でした。 ? 

間違えました。

リフィトリーさん、勉強不足で大変申し訳ございません。

さきほど送っていただいた

932px÷(1,676px+17px)=0.55

は実際、僕が使っている画像のサイズで計算すると横幅に対する高さの比較は0.55ということで、

#appeal {
    height: calc(100vw * 0.55);
}

をstyle.cssに貼ったらいいよという意味でよろしいですか？

@たいち さん

たぶん、それで合っていると思いますので、試してみてください。

ありがとうございます。

これで試してみたのですが、変わりませんでした。

ちなみに【cocoon設定】→【アピールエリア】の【高さ】は空白に設定しています。

文字はこんな感じでstyle.cssに貼っている状況です。

@たいち さん

子テーマのCSSの記述ですが、閉じ括弧が抜けている箇所があるので、エラーになっていると思われます。

あとアピールエリアの白い文字エリアは、Cocoon設定の「アピールエリア」タブの「テキストエリア表示」のところの「テキストメッセージエリアを表示する 」のチェックを外して、変更をまとめて保存ボタンをクリックすれば、消えるのではないかと思います。

@たいち さん

まだ、閉じ括弧が抜けたままです。

@たいち さん

閉じ括弧が足りないので、閉じ括弧を付けてください。

@たいち さん

以下のようにしてみてください。

.page .entry-title{
  display: none;
}

/*アピールエリアの高さを調整*/
#appeal {
    height: calc(100vw * 0.55);
}

リフィトリーさん

できました！

ほんと迅速かつご丁寧にわかりやすく教えて頂いてありがとうございました。

そしてとても勉強になりました。

本当にありがとうございました。