# Debutテンプレートで オーバーレイテキスト付き画像の横サイズ最大値を決める方法(デスクトップ表示) **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [March 10, 2021, 1:50am UTC](https://community.shopify.com/t/debut/38947 "2021-03-10T01:50:11Z")\ **Posts on this page:** 5\ **Page:** 1 ## AI-generated summary Debutテーマの「テキストオーバーレイ付き画像」をデスクトップで全幅表示した際、ウィンドウ幅を広げると画像の縦方向が切れてしまう問題への対処が相談された内容です。モバイル表示には問題なく、画像の横幅に最大値を設けたいという要望でした。 提示された解決策は次の2点です。 - 背景画像を持つ `.hero` 要素に `max-width` を追加する - 左寄せになる場合は `margin: 0 auto;` で中央寄せする 具体的には、`assets/theme.css` 内の `.hero`（初期状態では5790行目付近）に `max-width` を記述すれば対応可能と案内されました。別案として、セクション設定を「全幅」から「固定幅」に変える方法も示されました。 最終的に質問者は解決済みと報告しています。なお、「固定幅」にしなかった理由として、画像同士の間に縦の空白が入るため、画像中心のページ構成ではCSS編集による対応が適しているという補足がありました。
**Author:** ![m\_takahashi](https://avatars.discourse-cdn.com/v4/letter/m/b38774/32.png) [@m\_takahashi](https://community.shopify.com/u/m_takahashi)\ **Post date:** [March 10, 2021, 1:50am UTC](https://community.shopify.com/t/debut/38947/1 "2021-03-10T01:50:11Z")
debutテンプレートでオーバーレイテキスト付き画像を複数縦に並べて使用し、デスクトップ表示の際、画像の横幅を超えてウィンドウを広げると画像の縦方向が切れてしまいます。 画像アライメント:中央 レイアウト：全幅 モバイル表示は問題ないのですが、デスクトップ表示の場合、横幅を想定することが難しいため、縦方向が切れないように横幅の最大値を設定方法を探しています。 CSSでページの横幅の制限値を決める方法でもいいのですが、こちらをtheme.cssの編集などでできれば、そちらでも問題ございません。 ご教授いただけると大変幸いです。 ---
**Author:** ![toooru](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@toooru](https://community.shopify.com/u/toooru)\ **Post date:** [March 11, 2021, 4:30am UTC](https://community.shopify.com/t/debut/38947/2 "2021-03-11T04:30:10Z")
「テキストオーバーレイ付き画像」の背景画像が指定されているdivに対して、 max-width: 1920px; などで最大幅を追加で指定してはいかがでしょうか。 その場合左寄せになってしまうため、margin: 0 auto; などで中央寄せにしてみてください。 ---
**Author:** ![m\_takahashi](https://avatars.discourse-cdn.com/v4/letter/m/b38774/32.png) [@m\_takahashi](https://community.shopify.com/u/m_takahashi)\ **Post date:** [March 11, 2021, 5:15am UTC](https://community.shopify.com/t/debut/38947/3 "2021-03-11T05:15:44Z")
返答ありがとうございます。 以下のページの情報を参考にしているのですが [https://webutubutu.com/webdesign/8323#toc\_H2-0](https://webutubutu.com/webdesign/8323#toc_H2-0) [https://community.shopify.com/c/Technical-Q-A/Clickable-Slideshow-Debut/td-p/618624](https://community.shopify.com/c/Technical-Q-A/Clickable-Slideshow-Debut/td-p/618624) ファーストビューで表示される背景画像の横幅の最大値を設定する場合 「hero.liquid」にmax-widthを記述すればいいのでしょうか？ 的はずれな質問になっていたら恐縮です。 ---
**Author:** ![toooru](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@toooru](https://community.shopify.com/u/toooru)\ **Post date:** [March 11, 2021, 1:12pm UTC](https://community.shopify.com/t/debut/38947/4 "2021-03-11T13:12:19Z")
レイアウト：全幅 のまま最大幅を決めたいということでしたら、 assets/theme.css の（デフォルトだと5790行目あたりの） .hero に対して max-widthの記載を追加すれば大丈夫かと思います。 それよりも簡単なのは、セクションの設定を レイアウト：固定幅 にすればcssを編集せずとも固定幅になります。 ---
**Author:** ![m\_takahashi](https://avatars.discourse-cdn.com/v4/letter/m/b38774/32.png) [@m\_takahashi](https://community.shopify.com/u/m_takahashi)\ **Post date:** [March 20, 2021, 8:03am UTC](https://community.shopify.com/t/debut/38947/5 "2021-03-20T08:03:04Z")
返信が遅くなり失礼しました！ おかげさまで解決できました。 画像を固定幅にしなかった理由は画像と画像の間に縦に空白が入ってしまうからです。 画像を主にしたページをつくりたい方にこの情報は役立つのではないかと思います！