レイアウト幅の設定

コンテンツ幅とセクション幅を調整して、読みやすさ、余白、視覚的な広がりを微調整します。

注目のリンク

役立つ動画

Shopify Academy動画：ストアのカスタマイズ

この設定を使って、表示領域全体の幅と、その中でコンテンツをどこまで広げられるかを制御します。ページの一部を、より読みやすく、よりゆとりのある、またはより視覚的に際立った印象にしたい場合に役立ちます。

幅設定

このグループには、内側のコンテンツ領域用のコントロールが 1 つと、外側のセクションラッパー用のコントロールが 1 つ含まれます。これらを組み合わせることで、テキスト、画像、背景がページ上でどのように配置されるかが決まります。

また、レイアウト幅の設定に関するCompany XYZドキュメントで、これらの幅の選択肢が実際にどのように機能するかの例をさらに確認できます。

これらの設定がストアフロントのレイアウトにどう組み込まれるかをより広く確認するには、セクションとブロックに関するShopifyドキュメントをご覧ください。

コンテンツ幅は、領域内にある素材の最大幅を設定します。これは通常、読みやすさ、メディアのサイズ、レイアウトの密度や開放感に直接影響するため、最も重要な設定です。

短い行で読めるように、テキスト中心のコンテンツには狭めの幅がよく適しています。広めの幅は、画像中心のレイアウト、商品グリッド、そしてより横方向のスペースを必要とする複数列のコンテンツに向いています。

共有テーマ設定をそのまま使用すると、その領域はサイト全体の他の部分と揃ったままになります。カスタム幅を選ぶと、その領域を意図的によりコンパクトにも、より広々とも見せられます。

コンテンツ幅は小さい画面でも引き続き調整されるため、この選択は主に大きなビューポートでのレイアウトの見え方に影響します。

セクション幅は、コンテンツの外側にあるラッパーを制御します。これは、コンテンツ自体の外側まで広がる背景色、画像、またはその他の視覚効果を使う場合に最も重要です。

コンテンツ幅に従うラッパーは、囲まれた印象を作ります。より広いラッパーを選ぶと、その領域はより広く感じられ、背景効果の存在感も増します。

空白、透明、またはデフォルトスタイルの背景値は、通常、周囲のテーマスタイルをそのまま維持します。明示的な色、グラデーション、またはメディアベースの背景を使うと、その領域はより独立して見え、隣接するセクションと視覚的に区別されます。

全幅およびフルブリードのオプションは、外側の領域をページ全体にさらに広げたい場合に最も便利です。実際には、これは通常、読みやすさの判断というより視覚的な判断です。

強い背景効果を使う場合は、コンテンツ幅とセクション幅を一緒に確認してください。外側の領域が非常に広く、内側のコンテンツが狭いと意図的に見えることもありますが、余白が狭すぎたり広すぎたりすると、バランスが悪く感じられることもあります。

異なる領域間でページのリズムを一貫させたい場合は、共有テーマ設定を使用してください。これは通常、ある領域から次の領域まで整った配置を保つための最も安全な選択です。

特定の領域に別の見せ方が必要な場合は、カスタム幅を使用してください。よくある理由には、長いテキストの読みやすさを改善する、メディアのためのスペースを増やす、または注目領域を目立たせることが含まれます。

幅の変更は、エディター内と公開ページで見え方が異なる場合があります。特に、広いレイアウトや端から端までのデザインではその傾向があります。余白とバランスが適切かを判断する前に、ストアフロント表示を確認してください。

エディターでの作業について詳しくは、テーマエディターに関するShopifyドキュメントをご覧ください。

読みやすさを優先する。 長いテキストには、行の長さを読みやすく保てるよう、コンテンツ幅を狭めに設定します。
必要に応じてメディアの余白を確保する。 画像が多いレイアウトや複数列レイアウトで、より横方向のスペースが必要な場合は、広めのコンテンツ幅を選びます。
外側の幅で視覚的な印象を強める。 背景や端から端までのスタイルをページ上でより強く見せたい場合は、セクション幅を変更します。
背景スタイルを一貫させる。 周囲のテーマスタイルを継続したい場合は、背景値を空白またはデフォルトのままにします。領域を際立たせたい場合は、明示的な色、グラデーション、またはメディアを使用します。
配置の一貫性を保つ。 サイト全体で領域を揃えたい場合は、共有テーマ設定を使用します。
エディターの外でプレビューする。 広いレイアウト、全幅レイアウト、またはフルブリードレイアウトを確定する前に、公開ページ表示を確認します。