区切り線設定

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. テーマエディターに関するShopifyドキュメント

役立つ動画

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

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

これらの設定を使用して、コンテンツ領域の上、下、または両端に区切り線を追加します。区切り線は、長いページを区切り、コンテンツ間の切り替えを明確にし、内容自体を変更せずに構成を加えます。テーマ内でコンテンツがどのように整理されているかについての概要は、セクションとブロックに関するShopifyドキュメントを参照してください。

区切り線設定

上部と下部の区切り線は個別にスタイル設定できるため、それぞれの端を強調したり、すっきり見せたりできます。これにより、一方の切り替えにはより明確な境界が必要で、もう一方はそうでない場合に柔軟に対応できます。

区切り線のスタイルは、視覚的な区切りをどの程度強く見せたいかに応じて選択してください。

1. Line は、最も明確で最小限の区切りを作ります。
2. Dashed は、より質感を加え、表現豊かなレイアウトに適しています。
3. Dotted は、より軽やかで装飾的な印象になります。
4. None は、その端の区切り線を削除します。

連続するすべてのコンテンツ領域で区切り線を有効にするのは避けてください。区切り線が多すぎると、ページが窮屈に感じられ、重要な切り替えの印象が弱まることがあります。

区切り線カラー

区切り線のカラーを使って、近くの枠線に合わせたり、コンテンツ領域間のコントラストを少し強めたりできます。ほとんどのレイアウトでは、控えめな色が最適です。区切り線は、コンテンツと競合するのではなく、ページ構成を支える役割であるためです。

カラーを透明のままにすると、区切り線にはテーマの枠線カラーが使用されます。空白、透明、またはデフォルトのスタイル値は通常、テーマのフォールバックスタイルを維持します。一方、明示的なカラー、グラデーション、またはメディアのオーバーライドを使うと、その領域により独立した印象を与えます。これは、各領域を個別に調整せずに複数の領域で一貫した見た目にしたい場合、通常最適な選択です。関連するテーマエディターのコントロールについては、テーマエディターに関するShopifyドキュメントを参照してください。

使用上の注意

1. 区切り線は必要な箇所だけ追加します。 スキャンしやすくしたり、2つのコンテンツ領域間の切り替えを明確にしたりする場合に使用します。
2. スタイルをレイアウトに合わせます。 すっきりしたデザインには実線が、より柔らかい、または装飾的な区切りには破線や点線が適しています。
3. コントラストは控えめに保ちます。 区切り線が強すぎると、見出し、画像、CTA の妨げになることがあります。
4. 一貫性のために共有の枠線カラーを使用します。 テーマ全体との揃いを保ちたい場合、透明カラーは実用的な選択です。
5. 両方の表示領域を確認します。 デスクトップとモバイルのコントロールでは、配置、表示、またはメディアの動作が異なる場合があるため、公開前に両方のサイズを確認してください。
6. オーバーライドは意図的に使用します。 明示的なカラーやメディアベースの選択は、特定の領域を際立たせることがあるため、より独立した見た目にしたい箇所だけに適用してください。