成功
パンくずリスト
パンくずリストを表示して、顧客が親ページを簡単にさかのぼれるようにします。
Breadcrumbs を使用して、上位ページへ戻る明確なナビゲーション経路を表示します。ページの上部付近に配置するのが最適で、メインコンテンツと競合せずにナビゲーションを支援できます。より広いテーマ設定のコンテキストについては、テーマエディターに関するShopifyドキュメント を参照してください。
主な設定では、パンくずトレイルで使用するアイコンを制御します。最初の項目にホームアイコンを使用し、パンくずリンク間の区切りアイコンを選択できます。区切りアイコンには、絵文字やアイコン名を入力するか、よりすっきりした見た目にするためにフィールドを空欄にして区切りを表示しないこともできます。アイコンについては、icon guide を参照してください。
ページの近くにすでに強い視覚要素がある場合は、パンくずのスタイルをシンプルに保ってください。最小限の区切り線は、よりすっきり見え、小さい画面でも確認しやすくなります。
これらの設定では、デスクトップとモバイルで水平配置を個別に制御します。これは、パンくずを大きい画面では周囲のコンテンツと揃えつつ、小さい画面では別の位置にしたい場合に便利です。
左揃えは、特にパンくずのパスが長い場合に、通常もっとも読みやすいです。モバイルでトレイルが窮屈に感じる場合は、より装飾的な配置を強制する前に、アイコンを簡素化するかラベルを短くしてください。
これらの設定は、このセクションのより広いテーマカラーを上書きします。パンくずトレイルをカスタム背景の上に置く場合や、ページの他の部分より明るい、または暗い見せ方が必要な場合に特に有用です。
読みやすさと明確な操作性を保ちながら、パンくずは視覚的に控えめにしてください。テキストとアイコンの色は、主要な行動喚起のようには見せずに、簡単に見つけられる十分なコントラストが必要です。
Breadcrumbs は控えめに保つべきですが、顧客がナビゲーションであると認識できる必要があります。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- Breadcrumb
Breadcrumb
Section titled “Breadcrumb”このブロックを使用して、パンくずトレイルに静的な親リンクを追加します。ランディングページ、カスタムコンテンツの経路、特別なナビゲーションフローに手動の手順を挿入したい場合に役立ちます。ブロックの設定詳細については、Breadcrumbに関するCompany XYZドキュメント を参照してください。
- ブロックテキストは短くして、トレイル全体が読みやすいようにします。
- link 設定は、装飾的なリンクや重複するリンクではなく、本当に親となる移動先に使用します。
- 手動の親リンクがデスクトップでのみ、またはモバイルでのみ有用な場合は、ブロックの表示設定を使用します。
標準セクション設定
Section titled “標準セクション設定”余白設定 では、デスクトップとモバイルのパンくずトレイルの上下の余白を制御します。このセクションでは、ヘッダーとページコンテンツから適度に離すのに役立ちます。
パンくずはコンパクトなので、軽めの余白が通常は最適です。セクションを視覚的に分けたい場合や、背景処理を含める場合にのみ、余白を増やしてください。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 では、パンくずトレイルの背後に色、グラデーション、画像、または動画を配置できます。特に、よりカスタマイズされたページレイアウトでは、セクションをより明確に見せるのに役立ちます。
パンくずは小さく、背景に負けやすいため、ここでは背景処理を慎重に使用してください。画像や動画を使用する場合は、オーバーレイコントロールで読みやすさを保てます。
区切り線設定
Section titled “区切り線設定”区切り線設定 では、セクションの上または下に任意の線を追加します。余分な空白をあまり増やさずに、パンくずエリアを周囲のコンテンツから分けたい場合に便利です。
上部の区切り線はヘッダーの下で効果的に機能し、下部の区切り線はメインページコンテンツの開始を定義するのに役立ちます。区切り線の色を透明のままにすると、標準の境界線カラーが使用されます。
表示設定 では、パンくずセクション全体をデスクトップ、モバイル、またはその両方に表示するかどうかを制御します。これは、あるデバイスサイズではよりシンプルなレイアウトにしたい場合に便利です。
広いレイアウト判断にはセクションの表示設定を使用します。セクションがあるデバイスサイズで非表示の場合、その中のブロックレベルの表示設定も表示されません。
幅設定 では、パンくずトレイルのコンテンツ幅とセクションラッパーの幅の両方を制御します。これにより、パンくずを近くのコンテンツに揃えたり、背景処理をページ全体にさらに広げたりできます。
コンテンツ幅を周囲のレイアウトに合わせると、通常はもっともすっきりした結果になります。幅設定を変更する場合は、レイアウト変更がそれぞれで異なって感じられるため、エディター画面だけでなくライブページもプレビューしてください。
使用上の注意
Section titled “使用上の注意”- ラベルは簡潔に保ってください。 短いパンくず名のほうが読みやすく、モバイルで不自然に折り返されにくくなります。
- 手動リンクは有用な場合のみ使用してください。 明らかなナビゲーションを繰り返すのではなく、経路を明確にする場合に Breadcrumb ブロックを追加してください。
- ブロックによる変更に注意してください。 追加のパンくずは、セクションレベルの設定よりもトレイルに大きく影響することがあるため、ブロックを追加または削除した後は全体の経路を確認してください。
- 周囲のレイアウトに合わせてください。 幅、余白、位置を周囲のページに合わせることで、トレイルに意図感が生まれます。
- カスタム背景での読みやすさを確認してください。 色、画像、グラデーション、動画を追加したら、テキスト、アイコン、区切り線のコントラストを必ず確認してください。
- 両方のデバイスサイズでテストしてください。 パンくずはデスクトップとモバイルで異なる動作をすることがあるため、両方の表示で配置、表示、メディア処理を確認してください。