--- title: "ウォークスルー:レンダリングバリアントの参照アイテムを使ってリンクされたアイテムのフィールドを表示します" slug: "walkthrough--using-the-rendering-variant-reference-item-to-display-fields-from-a-linked-item" abstract: "リンクを通してリンクされたアイテムからコンテンツを取得しましょう。" --- # ウォークスルー:レンダリングバリアントの参照アイテムを使ってリンクされたアイテムのフィールドを表示します レンダリングバリアント参照項目は、参照された項目のフィールドを表示できます。このウォークスルーでは、ブログ記事に著者情報を追加する方法を説明しています。ウォークスルーで説明されているシナリオと同じです [:ブログ記事用のレンダリングバリアント作成](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/walkthrough--creating-a-rendering-variant-for-a-blog-post.html "Walkthrough: Creating a rendering variant for a blog post")。 この例では、ブログ記事の著者フィールドに行き、リンクされたアイテムを順に行ってそれらの項目からフィールドをレンダリングするレンダリングバリアント参照アイテムの作成方法を説明しています。 ## シナリオと最終結果 シナリオは以下の通りです: - ブログ記事を掲載するサイト。 - 著者の名前、姓、経歴、写真、関連メディアアイテムを含むサイトデータフォルダー: ![SXA-blog-author-list.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-author-list.png) - クエリを用いてこのデータソースを参照するページテンプレート: ![SXA-blog-author-query.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-author-query.png) - ブログページには、リストから選ばれた関連商品が掲載されています: ![SXA-blog-author-selected.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-author-selected.png) 最終的な仕上がりは次のようになります。 ![SXA-blog-end-result.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-end-result.png) このウォークスルーでは、以下の方法を説明します: - [レンダリングバリアントの参照項目を作成する](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/walkthrough--using-the-rendering-variant-reference-item-to-display-fields-from-a-linked-item.html#UUID-107cdd9f-d764-d7ff-6042-6cc7917049e8_N1539764056763 "Create the rendering variant reference item") - [フィールドをレンダリングする](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/walkthrough--using-the-rendering-variant-reference-item-to-display-fields-from-a-linked-item.html#UUID-107cdd9f-d764-d7ff-6042-6cc7917049e8_section-idm46365220235728 "Render the fields") - [レンダリング関連メディア](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/walkthrough--using-the-rendering-variant-reference-item-to-display-fields-from-a-linked-item.html#UUID-107cdd9f-d764-d7ff-6042-6cc7917049e8_N1539764026772 "Render related media") ## レンダリングバリアントの参照項目を作成する レンダリングバリアント参照項目は参照された項目のフィールドを表示します。参照項目のフィールドを表示したい場合は、**パススルーフィールド** フィールドでそのフィールドを定義できます。 レンダリングバリアント参照項目を作成するには: 1. *Presentation/Rendering Variants***に移動し、ページコンテンツ****を右クリックして「挿入****」→「バリアント定義」をクリックします。** 2. *Post Author*を入力して**「OK」**をクリックします。 3. 次に、ブログ記事の著者フィールドに行き、そのフィールドの内容をレンダリングするレンダリングバリアント参照項目を作成します。 Post **Author**バリアントを右クリックし、「 **Insert**」をクリックし、「**Reference**」をクリックし、「Enter」を*Authors*、「**OK**」をクリックします。 **Pass through field**フィールドは、入れ子されたアイテムからフィールド名を定義します。レンダリングバリアントは今後、Authorsフィールドを通過します。 ![SXA-blog-pass-through-field.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-pass-through-field.png) ## フィールドをレンダリングする これで著者のフィールドをレンダリングし始められます。 フィールドをレンダリングするには: 1. まず、セクションを追加してラッパーを作成します。 **「投稿者**」を右クリックし、「 **セクション**」をクリックし、「 *HeadingWrapper* 」を入力して「 **OK」**をクリックします。 2. レンダリングバリアントが表示するフィールドを定義するには、子項目を追加できます。 右クリックで**HeadingWrapper**を選び、**挿入をクリックしてから**該当するアイテムをクリックします。この例では、以下の項目を追加しましょう。 アイテム フィールド名 タグ 接頭辞 フィールド 名前 スパン フィールド 姓 スパン フィールド 写真 ディビジョン フィールド 経歴 ディビジョン ## レンダリング関連メディア サンプルサイトの著者には写真に加え、他のメディア資料も添付されています。 ![SXA-blog-related-media.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-related-media.png) レンダリングバリアントに作者に関連付けられた関連メディアをレンダリングさせるために、リファレンスアイテムを使ってレスポンシブな画像アイテムをレンダリングします。 関連メディアの表示: 1. **投稿者**バリアントを右クリックし、「**参考文献**」をクリックし、*RelatedMedia*を入力して**「OK」**をクリックしてください。 2. **RelatedMedia**を右クリックし、「**レスポンシブ画像**」をクリックして「**OK」**をクリックします。 3. **フィールド名**フィールドを空にします。 4. **デフォルトサイズ**欄に*64*を入力してください。