Dawnの画像バナーをPC用、スマホ用とで出し分けしたい

[Arhgifgkdj]

お世話になります。

カスタマイズがうまくいかず質問させていただきます。

Dawn（バージョン11.0.0）を使っています。

サイトトップページの画像バナーのカスタムについての質問です。
テーマ＞カスタマイズ＞画像バナーで
サイトトップの画像を指定したのですが、
スマホサイズでちょうどよい感じに画像が表示されず、
PCではA画像、スマホではB画像という風に
出し分けをしたいのですが、
どのようにliquidファイルやCSSを編集すれば良いでしょうか？

ご教示お願い致します。

[Qcoltd · Accepted solution]

@Arhgifgkdj様

ご質問いただいている、Dawnの画像バナーを使って、PC用、SP用で画像を出し分けたい件ですが、CSSの調整のみで対応可能な、Dawnの画像バナーに元々用意されている、最初の画像をPC用、2番目の画像をSP用として表示させるのはいかがでしょうか。

※元々画像を横並びに2枚表示する機能は失われてしまいます。

この調整で、PCではバナーの高さで選択したサイズにて表示されますが、SPでは9/16比率の縦長で固定表示されます。

調整方法

テーマ＞カスタマイズ＞画像バナーを選択いただき、カスタムCSSに下記CSSを追加ください。

.banner {
  aspect-ratio: 9/16;
}
.banner__media {
  width: 100%;
}
.banner > div.banner__media {
  display: none;
}
div.banner__media + div.banner__media {
  display: block;
}
@media (min-width: 750px) {
  .banner {
    aspect-ratio: auto;
  }
  .banner > div.banner__media {
    display: block;
  }
  div.banner__media + div.banner__media {
    display: none;
  }
}

PCでの表示

SPでの表示

また、標準の機能（最初の画像、2番目の画像）を残し、SP用の画像を追加することも可能ですが、こちらはテンプレートのカスタマイズも発生しますので、必要な場合はご連絡いただけましたら、追加でご説明させていただきます。

ご参考まで。

（キュー小坂）

[Arhgifgkdj]

株式会社Q 　小坂様

お忙しい所、ご丁寧に回答いただき、ありがとうございます。

こういった方法を取る事想像もしていなかったです。

早速こちらの方法で実装してみようと思います。

ありがとうございました！