成功
パンくずリスト
カスタマイズ可能なパンくずリストで、ページ階層をさかのぼりやすくします。
ページ上部近くにパンくずリストを表示して、お客様が今どこにいるかをすばやく理解し、より広いページへ戻れるようにします。階層が深いナビゲーションパスのページで特に効果的で、追加の案内があるとより少ない手間で閲覧できます。
ホームアイコンをカスタマイズし、区切り線のスタイルを選び、必要に応じて固定の親リンクを追加できます。一般的な参照としては、パンくずリスト をご覧ください。エディターでブロックがどのように整理されるかについては、セクションとブロックに関するShopifyドキュメント をご覧ください。
主な設定で、パンくずリスト自体の見た目を調整します。
Home icon フィールドを使うと、ストアで一貫したアイコンセットを使っている場合や、よりシンプルな見た目にしたい場合に別のアイコンへ変更できます。Separator icon には絵文字または対応するアイコン名を使用でき、区切りを表示せずにパンくず項目を見せたい場合は空欄にできます。アイコン名の詳細については、Icons をご覧ください。
このグループでは、パンくずリストに固定の親リンクを追加します。ナビゲーションの流れの中で重要な特定のランディングページ、コレクションハブ、または厳選した移動先へお客様を戻したい場合に役立ちます。
親ステップがパンくずリストの中で自然に読めるように、テキストとリンクの両方を追加してください。親リンクを新しいタブで開くこともできますが、パンくずリストは通常、お客様を同じ閲覧パスに保つほうが自然に感じられます。詳しくは、親リンク をご覧ください。
固定の親リンクは、お客様が想定するページパスに一致する場合にのみ追加してください。順序が合っていないと、パンくずリストの信頼性が下がることがあります。
これらの設定では、デスクトップとモバイルで水平方向の配置をそれぞれ個別に制御できます。これは、パンくずリストをある画面サイズでは中央揃えのページヘッダーに、別の画面サイズでは左揃えのコンテンツ列に合わせたい場合に便利です。
パンくずリストが長くなる場合は、モバイルのレイアウトを注意して確認してください。リストが複数行に折り返される場合は、左揃えのほうが読みやすいことがよくあります。
標準ブロック設定
Section titled “標準ブロック設定”これらの設定は、このブロックに対するテーマの広範なカラー選択を上書きします。パンくずリストが色付きの背景、画像ベースの背景、またはそれ以外の標準ではない背景の上にあり、よりよいコントラストが必要な場合に使用してください。共通のカラー動作については、カラー設定 をご覧ください。
これらの設定を使うと、デスクトップまたはモバイルでブロックを非表示にできます。よりすっきりしたモバイルヘッダーにしたい場合や、パンくずリストが一方のレイアウトでのみ役立つ場合に便利です。共通の表示動作については、表示設定 をご覧ください。
エディター設定
Section titled “エディター設定”これらの設定は、エディターのサイドバーでこのブロックがどのようにラベル表示されるかに影響します。わかりやすいエディタータイトルにすると、ナビゲーションやヘッダー関連のブロックが複数ある場合でも、このブロックを見つけやすくなります。エディターのインターフェースについては、テーマエディターに関するShopifyドキュメント をご覧ください。
使用上の注意
Section titled “使用上の注意”- ページの上部に配置します。 パンくずリストは、顧客が案内ツールを期待するメインコンテンツの前に表示されると、最も役立ちます。
- パスを直感的に保ちます。 親リンクは、お客様がそのページ階層だと考える可能性が高い場合にのみ使用してください。
- 控えめなアイコンを選びます。 ホームアイコンと区切り線アイコンを控えめにすると、ページタイトルと競合せずにパンくずリストを読みやすく保てます。
- 小さい画面で確認します。 モバイルで長いパンくずリストを確認し、折り返しや配置がすっきり見えることを確かめてください。
- カラーの上書きは慎重に使います。 カスタムのアイコンとテキストカラーは、周囲のデザインアクセントに合わせるだけでなく、コントラストを高める必要があります。