お世話になります。
カスタマイズがうまくいかず質問させていただきます。
Dawn（バージョン11.0.0）を使っています。
サイトトップページの画像バナーのカスタムについての質問です。
テーマ＞カスタマイズ＞画像バナーで
サイトトップの画像を指定したのですが、
スマホサイズでちょうどよい感じに画像が表示されず、
PCではA画像、スマホではB画像という風に
出し分けをしたいのですが、
どのようにliquidファイルやCSSを編集すれば良いでしょうか？
ご教示お願い致します。
Topic summary
課題: Dawnテーマ（バージョン11.0.0）の画像バナーで、PC用とスマホ用の画像を出し分けたい。現在はスマホサイズでも同じ画像が表示されてしまう。
解決策: カスタムCSSを使用して対応可能。画像バナーに2枚の画像を追加し（1枚目がPC用、2枚目がスマホ用）、特定のCSSコードをカスタムCSSに追加することで出し分けが実現できる。
注意点:
- 元々の横並び2枚表示機能は失われる
- アニメーション設定（「背景位置の固定」「スクロールで拡大」）を使用する場合は、追加のCSS調整が必要
- Riseテーマ（バージョン15.2.0）でも同様の方法が適用可能
追加の問題: PC表示で画像がぼやける現象が報告された。これはCSSではなく、テーマのデフォルト設定が原因。解決にはimage-banner.liquidファイルの31行目と35行目にコメントアウトタグを追加する必要がある。
結果: コード編集により、画像のぼやけ問題も解決し、PC/スマホでの画像出し分けが正常に機能するようになった。
1 Like
ご質問いただいている、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用の画像を追加することも可能ですが、こちらはテンプレートのカスタマイズも発生しますので、必要な場合はご連絡いただけましたら、追加でご説明させていただきます。
ご参考まで。
（キュー小坂）
1 Like
株式会社Q 小坂様
お忙しい所、ご丁寧に回答いただき、ありがとうございます。
こういった方法を取る事想像もしていなかったです。
早速こちらの方法で実装してみようと思います。
ありがとうございました！
横から失礼致します。
バナーの出し分け、サイズ変更で検索しましたらコチラがヒットしましたので実装を試みようとしましたなか、
アニメーションの画像の挙動で「なし」と「周囲の挙動」では綺麗に出しわけができましたが、
「背景位置の固定」と「スクロールで拡大」を選択しますと元々の画像１、画像２が半分ずつ出るような、
左半分は画像が出ず、右半分に指定画像が出てきます。
コチラはLiqudの編集となりますでしょうか？
テーマRiseでバージョン15.2.0です。
よろしければアドバイスお願いいたします。
画像バナーのアニメーションの設定『背景位置の固定』『スクロールで拡大』を選択した場合でも、
PCサイズで1枚目の画像が全画面表示されるように調整したcssとなります。
下記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;
}
.banner__media-half.animate--fixed:first-child > img,
.banner__media-half.animate--zoom-in:first-child > img {
width: 100%;
}
}
ご参考まで。
（キュー小坂）
1 Like
小坂さま
ご丁寧な回答誠に感謝いたします。
コチラで一度実装してみようと思います。
ありいがとうございました！
すみません、上記をコピペして画像1,2を割り当ててSP確認してみましたが
やはり添付のように中央を境に分かれてしまいます・・・
前段の説明不足でしたが未解決がスマホの方になります。
申し訳ございません、再度アドバイスをいただけたらと思います。
@kj1300 様
テーマRiseのバージョン15.2.0のデフォルトで再度確認させていただきました所、
上記で提示させていただきましたコードのみカスタムcssに追加した場合ですが、
正常に表示されているように思われます。
画像バナーに画像を2点追加した状態
画像バナーに画像を2点追加しカスタムcssにはまだcssを追加せずPC表示で見た状態
画像バナーに画像を2点追加しカスタムcssにはまだcssを追加せずスマホ表示で見た状態
画像バナーに画像を2点追加しカスタムcssにcssを追加しPC表示で見た状態
画像バナーに画像を2点追加しカスタムcssにcssを追加しスマホ表示で見た状態
この状態にならない場合は、他のcssとの干渉が考えられますので、
設定されているサイトの見た目を確認させて頂けませんとこれ以上の調査が難しいです。
ご参考まで。
（キュー小坂）
こちらの質問のコメント欄より失礼します。
スマホとPCの画像の出し入れに関して同じコードをDawnのバージョン15.2.0にて試させて頂きました。
スマホの方は綺麗に画面表示を行うことが出来たのですが、
PCのバナーがぼやけてしまいました。
（コードを入れない場合は綺麗に表示されます）
原因が分かればご教示願います。
お手数ですがご確認して頂けると幸いです。
よろしくお願いします。
@r000016 様
ご連絡いただいております、PCのバナーがぼやける件ですが、
CSSの設定上画像を画面幅100%で表するように調整を入れておりますが、
テーマのコードには手を入れていませんので、画像がぼやけてしうまう場合は、
元の画像が小さい可能性がございます。
画面幅一杯に表示した場合、ご利用のPCによってモニターの解像度が異なるので、
画像の横幅は2500px程度でアップしてみていただければと思います。
ご参考まで
（キュー小坂）
@r000016 様
画像がぼやける件ですが、追加したCSSの設定ではなく、
元々のテーマで用意している設定が影響しているようです。
Dwan 15.2.0のテーマを編集していない前提での修正内容となります。
テーマ > 『•••』 > コードを編集 > image-banner.liquidを開いて、
31行目に**{%- comment -%}**
53行目に**{%- endcomment -%}**
を追加し保存してください。
以上で、元々テーマが持っている設定を打ち消すことが可能かと思います。
ご参考まで。
（キュー小坂）
1 Like
小坂様
ご返信ありがとうございます。
コード編集を行ったところ対応を行うことが出来ました。