Prestage セクションの横幅について

日本語 ディスカッション Shopify テーマ

Topic summary

Prestageテーマを使用しているユーザーが、PC表示時に各セクションの横幅がバラバラで統一感がない問題に直面しています。

提案された解決策:

  • CSSで横幅を統一し、中央寄せすることで一体感を持たせる
  • 共通のmax-widthを設定した.custom-containerクラスを作成
  • theme.cssまたはbase.cssに以下のスタイルを追加:
    • max-width: 1200px(サイトデザインに合わせて調整可能)
    • margin-left: auto; margin-right: autoで中央寄せ
    • 左右にpadding: 20pxを設定
  • 各セクションのliquidファイルにこのクラスを適用

補足:
テーマに既存のpage-widthやcontainerクラスがあれば活用可能ですが、横幅にバラつきがある場合はカスタムクラスの使用が推奨されています。

議論は解決策の提示で終了しており、元の投稿者からの返答は未確認です。

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Prestageを使用しています。

PCから見ると各セクションの横幅がバラバラで、統一感がなく困っています。

左右の横幅を綺麗に揃えるにはどうしたら良いでしょうか？

1 Like
2

ご質問拝見しました。

こちらに関してはcssで調整ができるかと思います！

width（横幅） を統一して中央寄せすることで、全体に一体感を持たせることができます。以下の方法で対応可能です。

共通の max-width を設定する1. 共通のCSSクラスを作成

theme.css または base.css などの共通スタイルシートに以下を追加します：クラス名は一例になります。

.custom-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

:light_bulb: max-width の値（例：1200px）はサイト全体のデザインに合わせて調整してください。- 各セクションにクラスを適用する
セクションの liquid ファイル内で、セクションの外枠に .custom-container を追加します。

■ ポイント- すべてのセクションに .custom-container を追加することで、横幅が統一されます。

  • すでにテーマに page-width や container などのクラスがあれば、それを活用するのもOKです（ただし、横幅にバラつきがあるならカスタムクラス推奨です）。

お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス