---
title: "リンクやパンくずを追加してください"
slug: "add-links-and-breadcrumbs"
abstract: "リンクやパンくずを使ってサイトのナビゲーションを改善しましょう。"
---
# リンクやパンくずを追加してください

リンク、リンクリスト、ブレッドクラムのレンダリングはナビゲーションセクションの一部です。これらは訪問者があなたのサイトをナビゲートするのを助けます。

## リンクレンダリングを追加

リンクは、人々があなたのサイトをナビゲートするのに非常に役立ちます。内部リンクを使ってウェブサイトのアーキテクチャや階層を定義することができます。外部リンクを使って、他の関連ウェブサイトへのアクセス、ファイルを開く、メール送信を助けることもできます。

リンクレンダリングをページに追加するには:

1.  エクスペリエンスエディターのツールボックスの **ナビゲーション** グループから「 **リンク** 」をクリックしてページにドラッグします。
    
2.  「 **関連コンテンツ選択** 」ダイアログボックスで、既存のアイテムにリンクするには、欲しいコンテンツをクリックして **「OK」**をクリックします。
    
3.  または、新しいリンクを作成するには、「 **関連コンテンツ選択** 」ダイアログボックスで「 **新しいコンテンツを作成**」をクリックしてください。
    
4.  ![A308E9A1E38A4803BE90AC6FF20F6A00.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/A308E9A1E38A4803BE90AC6FF20F6A00.png)クリック**クリック:リンクの宛先と外観を編集**して**「リンクを挿入**」ダイアログボックスを開き、リンクタイプを選択します:
    
    -   **内部リンク** – ウェブサイト内のアイテムへのリンクを追加します。例えば、ウェブサイト内の別のページへのリンクです。
    -   **Media Link** – メディアライブラリ内のメディアファイルのダウンロードリンクを追加します。例えば、動画やPDFファイルなどです。
    -   **外部リンク** – 別のサイトのページへのリンクを追加します。
    -   **アンカー** – ページ内の特定のセクションへのリンクを追加します。
    -   **Mail** – 訪問者のデフォルトのメールプログラムで新しいメールメッセージを開いて作成するリンクを追加します。
    -   **JavaScript** – JavaScriptコードを呼び出すリンクを追加します。
    
    > !注リンクを削除するには ![8BEBBE6D6BA94CEFB4B5E6F0535C8ED8.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/8BEBBE6D6BA94CEFB4B5E6F0535C8ED8.png)リンクが消去されます。リンクを確認するには ![43F3CADF22B24C399684A891AD9C41FA.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/43F3CADF22B24C399684A891AD9C41FA.png)Follow link.」をクリックしてください。
    

## リンクリストのレンダリングを追加してください

リンクリストは、ユーザーをページ外に誘導したい場合に非常に役立ちます。例えば、収集した他のウェブサイトやブログへのリンクリストを共有したい場合などです。リンクリストレンダリングでは、タイトルが先行する項目のリストを表示できます。

リンクリストのレンダリングをページに追加するには:

1.  エクスペリエンスエディターのツールボックスの **ナビゲーション** グループから「 **リンクリスト** 」をクリックしてページにドラッグします。
2.  「 **関連コンテンツ選択** 」ダイアログボックスで、欲しいコンテンツ項目をクリックして **OK**をクリックします。
3.  リンクリストのプロパティを設定するには、 **スタイルと動作を編集。**
4.  ダイアログボックスの **スタイリング** セクションで、バリアントとスタイルを選択できます。

## ブレッドクラムレンダリングを追加してください

ブレッドクラムとは、ウェブサイト内でユーザーの位置を示すナビゲーションヘルプのことです。特に、ウェブサイトに多くのページがある場合、ブレッドクラムナビゲーションはユーザーが案内しやすくなります。ブレッドクラムは、ウェブサイト訪問者が上位ページにアクセスするために必要な操作数を減らし、ウェブサイトのセクションやページの見つけやすさを向上させます。

最も単純な形では、パンくずは横方向に並べられたテキストリンクで、大きい記号(>)で区切られています。記号はそのページの横のページリンクに対するレベルを示します。

ユーザーがパンくずを使ってナビゲーションできるようにしたい場合:

![Breadcrumb navigation](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/9C7766BFDBF044009BA268964606F64E.png)

Breadcrumbレンダリングは、ルートから現在のアイテムまでのすべてのパス項目を一覧にしたパンくずを生成します。レンダリングバリアントもサポートしています。

Breadcrumbレンダリングをページに追加するには:

1.  エクスペリエンスエディターのツールボックス、 **ナビゲーション** グループから「 **パンくず** 」をクリックしてページにドラッグします。
2.  パンくずプロパティを設定するには、 **Edit style and behavior をクリックします。**
3.  ダイアログボックスの **スタイリング** セクションで、バリアントとスタイルを選択できます。
4.  **パンくず設定**のセクションで、以下のフィールドを設定します:
    -   **スタートページ** – パンくずの開始点を指定します。これを空にすると、デフォルトでホームページが使われます。
    -   **区切り子** – パンくずの項目を区切る文字を指定します。例えば、>、>>、/、//。
    -   **ナビゲーション ブレッドクラム** – ドロップダウンメニューで兄弟姉妹を含めることができます。
    -   **ナビゲーションフィルター** – ブ **レッドクラムナビゲーション**を選択します。

設定を変更することで、さまざまなスタイルのパン粉を作成できます。例えば:

**種類**

**スクリーンショット**

**舞台設定**

単純なパンくず

![Simple breadcrumb example](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/6D3AA426787A41A3ABC0CD6033988FCF.png)

レンダリングバリアント:ページタイトル  
  
セパレーター:>  
  
ナビゲーションフィルター:ブレッドクラムナビゲーション  
  
スタイル:インデントトップ、インデントボトム、インデントサイド

省略記号付きのパンくず

![Ellipsis breadcrumb example](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/474289846FD542F0A9236E1E348E4C94.png)

レンダリングバリアント:ページタイトル  
  
セパレーター:>  
  
ナビゲーションフィルター:ブレッドクラムナビゲーション  
  
スタイル:インデントトップ、インデントボトム、非表示中間項目、インデントサイド

アイコン付きのパンくず

![Icon breadcrumb example](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/E412C1EC7AB148C2A63FC1CC1DB02E3B.png)

レンダリングバリアント:アイコン  
  
セパレーター:>  
  
ナビゲーション ブレッドクラム:選択  
  
ナビゲーションフィルター:ブレッドクラムナビゲーション  
  
スタイル:パンくずカスタムインジケーター