成功
Separator
ブロック間にレスポンシブな余白を作成し、必要に応じて区切り線を表示してコンテンツをより明確に区切ります。
Separator ブロックを使用して、近接するコンテンツの間に余白を追加したり、ページの 2 つの部分の間にシンプルな区切りを入れたりできます。レイアウトに、よりすっきりとした間隔、明確な区切り、またはデスクトップとモバイルで異なる余白が必要な場合に適しています。設定の詳細については、区切り線 を参照してください。
エディターでブロックがどのように機能するかをより詳しく確認するには、セクションとブロックに関するShopifyドキュメント を参照してください。
主な設定は、ブロックが追加する余白の量と、その余白に表示される線の有無という 2 つを制御します。
デスクトップとモバイルの高さを個別に設定すると、小さい画面で余白が広すぎるのを避けながら、大きい画面では快適な間隔を保てます。多くのレイアウトでは、モバイルの余白はデスクトップより低い値にすると効果的です。
線のスタイルでは、空白と表示される区切り線のどちらかを選べます。異なるコンテンツタイプを分けたいときや、より強い切り替わりを示したいときは線を使用し、余白だけで十分な場合は None を使用してください。
Separator の色は、線のスタイルが有効な場合に区切り線の色を変更します。色を透明のままにすると、ブロックはテーマの枠線色を使用します。通常、これが Separator の見た目を一貫させる最も簡単な方法です。
標準ブロック設定
Section titled “標準ブロック設定”表示コントロールを使用すると、このブロックをすべてのデバイスに表示したり、デスクトップまたはモバイルで非表示にしたりできます。これは、小さい画面で異なる余白パターンを使いたい場合や、区切り線が 1 つのレイアウトにのみ効果的な場合に特に便利です。詳細は 表示設定 を参照してください。
使用上の注意
Section titled “使用上の注意”- 各ビューポートを調整する。 余白、配置、表示、メディア関連の動作は画面サイズによって異なる場合があるため、デスクトップとモバイルの両方で Separator を確認してください。
- モバイルの余白は慎重に調整する。 小さい画面でページが広すぎると感じる場合は、まずモバイルの高さを下げてください。
- 可能な場合はフォールバックのスタイルを維持する。 Separator をテーマの標準スタイルになじませたい場合は、色を透明のままにするか、デフォルトスタイルの値を使用してください。
- 上書きを有効に使う。 Surrounding content から Separator の領域をより目立たせたい場合にのみ、明示的な色、グラデーション、またはメディアベースの上書きを使用してください。
- 線は意図的に使う。 余白だけでは得られない、より強い視覚的な区切りが必要な場合にのみ区切り線を追加してください。
- 最小の隙間があることを想定する。 ブロック間を完全に詰めた余白にするために、0 の高さ設定に頼らないでください。