Dawn 画像バナー 最大幅と最小幅の指定方法

日本語 ディスカッション 技術的なQ＆A

Topic summary

Dawnテーマの画像バナーで、ウインドウ幅に合わせた自動拡大縮小を実装しつつ、極端なサイズ変化を防ぐため最大幅・最小幅を指定する方法についての質問。

提案された解決策:

  • section-image-banner.cssを編集
  • 79行目付近の.banner--large:not(.banner--adapt)セレクタに以下を追加:
    • max-width: 最大幅の指定
    • min-width: 最小幅の指定
    • 例: max-width: 1800px; min-width: 1000px;
  • モバイル表示では最小幅・最大幅の設定は不要との見解

質問者の対応:

  • 提案とは異なる方法で解決
  • 66行目の@media screen and (min-width: 750px)部分で、.bannerにmax-widthとmin-widthを数値指定することで希望通りの仕様に変更できたと報告
Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Dawnテーマを用いてストアを構築しております。

画像バナーについて、

画像をウインドウ幅に合わせて表示したいと考えておりますが、

極端に大きくなったり極端に小さくなったりするのは避けたいです。

修正するliquidファイルは image.banner.liquid と想定しておりますが、

画像を自動で拡大縮小させたいが、最大幅と最小幅を指定しておきたい場合、

どのようにコードを修正すべきか、教えていただけますでしょうか。

2

十分に検証していませんので、

うまくいかない場合は申し訳ございません。

アセット(assets)の

section-image-banner.css

を編集します。

おそらくモバイル表示の際には、

最小幅や最大幅の設定は必要ないと思いますので、

下記のようにします。

お使いのDawnのバージョンによりますが、79行目付近に下記のような記述はないでしょうか？

.banner--large:not(.banner--adapt) {
    min-height: 72rem;
  }

これを下記のようにします。

.banner--large:not(.banner--adapt) {
    min-height: 72rem;
    max-width: 1800px;
    min-width: 1000px;
    margin: 0 auto;
  }

max-widthが最大幅

min-widthが最小幅

ですので、

ご希望の数値にご変更ください。

ご参考まで。

(キュー田辺)

3

ご回答ありがとうございます。

頂いた方法ではないですが、section-image-banner.css の66行目の下記部分

@media screen and (min-width: 750px) {
  .banner {
    flex-direction: row;
  }

にて数値でmax,minを指定することで、求めていた仕様に変更できました。

修正方法のヒントになりました。ありがとうございました。

1 Like