成功
レイアウト設定
ストアのグローバルな幅と角のスタイルを調整して、よりすっきりと一貫性のあるレイアウトにします。
これらの設定は、ストアフロント全体の構造をコントロールします。コンテンツ領域をどこまで広げられるか、セクション背景をどこまで広げるか、多くのインターフェイス要素をどの程度角丸に表示するかに影響します。これらはテーマ全体に適用されるため、個別のセクションをテーマエディターで微調整する前に、明確なデザインの方向性を設定する用途に最適です。
すべてのセクションは、引き続き独自の幅設定を提供できます。そのため、このグループはデフォルトのレイアウト基盤と考えてください。関連するレイアウトリファレンスも、より詳しいガイダンスとして確認できます。
基本のレイアウトコントロール
Section titled “基本のレイアウトコントロール”角丸は、ほとんどのフロントエンド要素に丸みのある角を追加します。値が低いほどよりシャープで端正な印象になり、値が高いほどストアフロントはより柔らかく、表情豊かに感じられます。
この設定は、装飾的な調整としてだけでなく、ブランド全体のスタイルの一部として使用してください。最適な結果は、ボタン、カード、入力欄、メディアフレーム全体で自然に感じられる角丸を選ぶことから生まれることが多いです。
コンテンツ幅
Section titled “コンテンツ幅”コンテンツ幅は、大きな画面でのテーマコンテンツの主な最大幅を設定します。これは主要なレイアウト設定であり、ページのゆとり感や集中感に最も大きな影響を与えます。
幅を狭くすると、可読性が向上し、より編集的な印象を作れます。幅を広くすると、商品グリッド、画像セクション、プロモーションコンテンツにより多くの余白を与えられますが、非常に広いレイアウトではテキスト中心の領域が読みにくくなることがあります。
エディターでは、幅の変更が実際のストアフロントよりも狭く見えることがあります。レイアウトを変更した後は、特にデスクトップでライブプレビューを確認してください。
セクション幅
Section titled “セクション幅”セクション幅は、主に背景を使用するセクションに影響します。これにより、背景をメインのコンテンツ幅に合わせたままにするか、より没入感のある表示のために広く伸ばすかをコントロールできます。
セクション背景をコンテンツに揃えると、すっきりと一貫した枠になります。より広い背景の処理は、注目のプロモーションや画像主体のセクションを目立たせるのに役立ちますが、頻繁に使いすぎるとページの構成が弱く感じられることがあります。背景をデフォルトまたは透明のスタイルのままにすると、通常は周囲のフォールバックスタイリングが維持されます。そこに単色、グラデーション、またはメディアベースの背景を追加すると、その領域はページの他の部分からより独立して感じられます。
これらの設定の連携
Section titled “これらの設定の連携”これらのコントロールは、1つのシステムとして使うのが最適です。コンテンツ幅は読みやすさと閲覧のための主な枠を定義し、セクション幅は背景領域とその枠との関係を形作り、角丸はインターフェイスのトーンを設定します。テーマ領域の構成についてさらに広い概要を確認するには、セクションとブロックに関するShopifyドキュメントを参照してください。
コンテンツ幅を抑えめにし、時折より広い背景を組み合わせると、動きのあるバランスの取れたレイアウトが作られることが多いです。より広々とした見た目を優先する場合は、画像、余白、テキスト量がその追加のスケールに対応できるか確認してください。
使用上の注意
Section titled “使用上の注意”- まずグローバルな枠を設定します。 個別のセクションを調整する前に、全体の幅の方向を決めて、テーマの見た目を一貫させます。
- ストアフロントでプレビューします。 エディター外でレイアウト変更を確認し、余白と幅をより正確に判断します。
- 可読性を保ちます。 ページで長い見出し、リッチテキスト、詳細な商品情報を多用する場合は、非常に広いコンテンツレイアウトを避けてください。
- 広い背景は意図を持って使います。 追加の視覚的強調が役立つ領域に、広めのセクション処理を限定してください。セクションを周囲のレイアウトになじませたい場合は、デフォルトまたは透明の背景を維持します。
- スタイルの一貫性を保ちます。 ブランドに合う角丸を選び、一般的なインターフェイス要素が統一感を持つようにします。