ブロックのレイアウト設定

デスクトップ、タブレット、モバイルのグリッドレイアウトでコンテンツがどれだけ幅を取るかを調整します。

注目のリンク

役立つ動画

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

この設定グループを使用して、コンテンツ項目が親グリッド内で占める水平方向のスペース量を制御します。これにより、より強い視覚的階層を作成したり、1行により多くの項目を収めたり、注目コンテンツにより広い余白を持たせたりできます。

列の占有幅

主な選択肢は、コンテンツが各デバイスサイズで何列分を占めるかです。占有幅が大きいほど、項目はより目立って見え、テキスト、メディア、アクションにより多くのスペースが与えられます。占有幅が小さいほど、コンパクトな補助コンテンツや、より詰まった複数列レイアウトに適しています。

デスクトップの占有幅は、通常、レイアウト全体の意図を決めます。タブレットとモバイルの占有幅を使うと、画面スペースが狭くなってもこの構造を読みやすく保てます。すべてのデバイスに同じ幅を強制する必要はありません。

これらのレイアウトの仕組みの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。

タブレットは独自の占有幅を使用することも、デスクトップの占有幅に従うこともできます。このフォールバックは、デスクトップのレイアウトがすでによく拡張されており、タブレット向けの個別調整が不要な場合に便利です。

モバイルは、読みやすさを最優先に設定してください。テキストの折り返しが不自然になる、ボタンが窮屈に見える、コンテンツの積み重なり方が不均一になる場合は、モバイルの占有幅が最初に見直すべき設定になることがよくあります。

デスクトップのレイアウトが正しく見えても、タブレットとモバイルは個別に確認してください。大きな画面ではバランスよく見える占有幅でも、利用可能な幅が狭くなると見え方が変わることがあります。

この設定グループは、親レイアウトの列構造の中で機能します。選択した占有幅が親レイアウトで利用可能な列数より大きい場合、コンテンツは1行全体に広がります。

この動作は柔軟性に役立ちますが、項目の折り返し方も変わることがあります。何かが予期せず独立した行に落ちる場合は、間隔やコンテンツを変更する前に、その項目の占有幅を親レイアウトで利用可能な列数と比較してください。

選択した占有幅が親レイアウトの列数より大きい場合、コンテンツは1行全体を使用します。

親レイアウトがモバイルでスライドショーとして表示されるように設定されている場合、この設定グループの通常のモバイル占有幅は、通常どおり最終的なモバイル幅を制御しません。代わりに、モバイルのレイアウト動作は親レイアウトのモバイル列設定に従います。

スマートフォンのレイアウトが期待どおりでない場合は、まず親のモバイルレイアウト設定を確認してください。これは、より狭い、またはより広いモバイル表示を期待しているのに、代わりにスライドショーベースのサイズ調整が表示される場合に特に重要です。

これらの設定をエディターで見つけるのに役立つ場合は、テーマエディターに関するShopifyドキュメントを参照してください。

幅を重要度に合わせます。 注目コンテンツには大きめの占有幅を与え、補助項目は狭めに保って、より明確な視覚的階層を作ります。
親の列を先に確認します。 項目が何度も独立した行に移動する場合、その占有幅が親レイアウトで許可されている幅より大きい可能性があります。
タブレットの上書きは選択的に使います。 読みやすさや余白の都合で明確に別の調整が必要な場合を除き、タブレットはデスクトップに合わせてください。
モバイルの見やすさを優先します。 テキストが窮屈にならず、ボタンの配置が不自然にならず、折り返しが不自然にならないモバイルの占有幅を選びます。
各ビューポートでテストします。 同じ占有幅でもサイズごとに配置や余白が異なる場合があるため、デスクトップ、タブレット、モバイルは個別に確認してください。
スライドショーレイアウトは個別にテストします。 モバイルでスライドショーが有効な場合は、幅の動作を確認する前に親のモバイル列設定を確認してください。