前略、Hanana-man さん

投稿者:: @hanana-man

ご教示いただいたCSSをいれましたが、

子テーマに追記したコードを拝見したところ、余分な文字列が入ってしまっているようです。（見えていない文字かもしれません）

#appeal {
ﾂ� ﾂ�height: calc(100vw * 0.32);
}

ただ、幸いなことに？このコードが有効になっていないため、Cocoonの標準の機能で、体裁が保たれているようにも感じます。

文字コードをUTF-8（BOMなし）でプレーンテキストを扱うことができるテキストエディターをお使いになることをオススメします。

サイトを拝見しますと、いまのままでも、ある程度の体裁は保てているようにも見えます。

PC表示とスマホ表示のレスポンシブの段差？を無くすには、ロゴを入れた場合は、おそらく、CSSの細かい調整が必要になってくるかと思います。（ロゴ入りの場合については、まだコードを、よく検証していないんです。できないことはないとは思いますが・・）

ちょっと、小用で、出かけてしまいますので、また夜にでも、書きこませていただくかもしれません。

投稿者:: @hanana-man

いろいろ試してみて一つだけわかったのはcontent要素がレスポンシブに追いついていないということなのかと思います（あってますか？？？）

背景画像の縦横比を保つように設定すると、アピールエリアの中身が、はみ出してしまうと思われます。

なので、その部分のカスタマイズが要ると思います。

@leafytree

お待ちしておりました。

外出中ありがとうございます。

ご指摘いただいた余分な文字列を削除したとろ画像はうまくレスポンシブしているようなのですが、appel-inの要素が連動していない（appel-inのboxの高さが画像と合わない）ため文言が上下左右センターにならない場合があるようです。

これは画像をrelativeにしてappel-inをabsoluteにするといった指定をするのでしょうか？

画像要素は.appeal.adt-front-page-onlyでいいのでしょうか？

お時間ございます時で結構ですよろしくお願いいたします。

@hanana-man
私もまだ、ここと、ここを直せば、上手くいく、というところまで、やっていないので、やってみないとわからないのですが、アピールエリアの構造からすると、デフォルトのCSSをあちこち、細かく上書きしないとできないような気がします。

また、IEなどのレガシーブラウザでも、上手く表示されるかも、チェックする必要があります。

@hanana-man さん

アピールエリアの「メッセージ」や「ボタンメッセージ」は設定（使わず）せずに、「タイトル」だけを設定した場合を想定して、CSSのコードを書いてみました。

背景画像のアスペクト比は、hanana-manさんの設定したものをそのまま使っています。

#appeal {
   height: calc(100vw * 0.32);
   display: flex;
   justify-content: center;
   align-items: center;
}

.appeal-in {
   min-height: auto;
   padding: 0;
   margin: 0;
}

.appeal-content {
   padding: 0;
}

上手くいくかどうか、試してみないとわかりません。

アピールエリアの「メッセージ」や「ボタンメッセージ」を設定した場合は、別途工夫が必要になるかと思います。

@leafytree

ありがとうございます。さすがです！！！

まだ、他のブラウザでは試していませんが、safariでは問題ないです！

私が今試していたのはせいぜい以下でした。

#appeal{
position:rerative;
}

.appeal-in.wrap{
position:absolute;
height: 100%
}

「メッセージ」や「ボタンメッセージ」は設定（使わず）せずに、「タイトル」だけを設定した場合を想定して」という発送がありませんでしたので、いただいた記述に一人でたどり着くのは難しかったでしょうね。

お付き合いいただき感謝です！

@hanana-man さん

アピールエリアの「メッセージ」や「ボタンメッセージ」を利用する場合は、Cocoonのデフォルトのデザインを使った方が、スマホでも文字が読めますし、アピールエリアとしての機能が有効になるかと思います。

ただ、背景画像と中央のタイトル文字だけを使いたい、といった場合には、今回のようなカスタマイズでもイケるのかもしれません。