パンくず要素

GemPages の Breadcrumb 要素とは何ですか?

A パンくずリスト は、ユーザーが Web サイトまたはアプリケーション内の現在の位置を理解するのに役立つナビゲーション要素です。通常、Web ページまたはインターフェイスの上部にクリック可能なリンクの列として表示され、ユーザーが現在のページに到達するまでにたどったページまたはセクションの階層を示します。

で作業する場合 サブカテゴリページ Shopifyでは（例えば「靴」の下にある「メンズシューズ」など）、パンくずリストがさらに重要になります。これにより、顧客は手動でメニューを閲覧することなく、親コレクションに素早く戻ったり、兄弟サブカテゴリー間を移動したりできるようになります。

サブカテゴリ ページにパンくずを使用すると、検索エンジンがサイト構造をよりよく理解するのにも役立ち、メイン カテゴリとサブカテゴリの関係を明確に示すことで SEO を向上させることができます。

パンくず要素を追加して構成するにはどうすればよいですか?

パンくず要素のすべての設定については、 GemPages エディター バージョン 7 以下のセクションで。

ステップ1： に行く GemPagesダッシュボード > 環境設定 > 設定を保存する。 下 その他の設定 セクションで「コレクションからアクセスされる製品の URL パスにコレクション ハンドルを含めます。「

ステップ2： 帰る 　 ページ セクションに移動し、対象のページを見つけてエディターを開きます。 

ステップ3： 左のサイドバーから ブレッドクラム 検索バーに要素をドラッグし、ページの上部にドロップします。

設定タブを構成する

その 設定 ブレッドクラム要素のタブを使用すると、ナビゲーション トレイルの外観、レイアウト、インタラクティブな動作を微調整できます。

セパレーターアイコン

パンくずリストの項目間の区切り線をカスタマイズします（例： /, >, →):

• アイコン: アイコンまたはキャラクターを選択してください。独自の.SVGアイコンをアップロードすることもできます。
• 色圏: HEX またはカラーピッカーでアイコンの色を選択します。
• サイズ: +/– ボタンを使用してアイコンのサイズを調整します。

文字スタイル

完全なタイポグラフィ コントロールを使用してパンくずテキストのスタイルを設定します。

アイテムの間隔、サイズ、背景

ギャップ： スライダーをドラッグするか、特定の値を手動で入力して、パンくずリスト項目間の水平間隔を調整します。

パディング: パンくずコンテナの内部間隔 (上、右、下、左) を調整して余裕を作ったり、要素をレイアウトに合わせて配置したりします。

背景色: カラー ピッカーを使用するか、正確な制御のために HEX コードを入力して、パンくずバーの背景色を設定します。

形状

パンくずコンテナに独特の外観を与えることができます。

• 境界： 色、太さ、線のスタイルを設定します。
• コーナー： 角を丸くするには、border-radius を定義します (例: 8px)。
• 影： 微妙な影や大胆な影を追加し、タイプ、方向、色、距離、ぼかし、サイズを変更します。

効果

• ホバー： ユーザーがパンくずリンクを操作するときにホバー スタイルを有効にします。
• アクティブ： 現在の（アクティブな）パンくず項目を他の項目とは異なる方法で強調表示します。

表示オプション

アクティブなページを非表示にする:

• あり: 現在のページ (最後のパンくず項目、例: Happy Dog Snack) を非表示にします。
• いいえ: 完全なパンくずリストを表示します。

整列

このパラメータを使用すると、ページ上での要素の配置方法を決定できます。左揃え、中央揃え、右揃えの 3 つのオプションがあります。

詳細タブを設定する

より高度なカスタマイズについては、「詳細設定」タブに移動し、 この記事.

さらに役立つヒントやビデオチュートリアルもご覧いただけます。 ジェムページアカデミー.

よくあるご質問

1. パンくずリストはサブカテゴリページにどのように役立ちますか?

パンくずリストは、メインカテゴリーからサブカテゴリーまでの階層構造を明確に表示し、ユーザーナビゲーションとSEOの両方を向上させます。これにより、顧客は自分がどこにいるのかを正確に把握し、セクション間を簡単に移動できるようになります。

2. サブカテゴリページごとにパンくずリストをカスタマイズできますか?

はい。サブカテゴリページのパンくずリストに異なるスタイル、セパレーター、または背景色を適用して、目立たせることができます。

3. サブカテゴリ ページがパンくずリストに表示されない場合はどうなりますか?

これは、商品URLにコレクション/サブカテゴリーのハンドルが含まれていない場合に発生する可能性があります。Shopifyの設定で「URLパスにコレクションハンドルを含める」が有効になっていることを確認してください。

4. パンくずリストはサブカテゴリページの SEO を向上させますか?

はい。検索エンジンがメインカテゴリとサブカテゴリの関係を理解するのに役立ち、インデックス作成と内部リンク構造の改善につながります。