---
title: "レンダリングバリアントを作成する"
slug: "create-a-rendering-variant"
abstract: "レンダリングでフィールドを動的にレンダリングする方法を学びましょう。"
---
# レンダリングバリアントを作成する
SXAにはデフォルトのレンダリングとレンダリングバリアントのセットが付属しています。レンダリングバリアントは、デフォルトのレンダリングをカスタマイズ可能な適応形です。再利用性を促進するために、デザイナーやフロントエンド開発者は新しいレンダリングバリアントを作成することもできます。これにより、著者はコンテンツの提示方法により多くの選択肢が生まれます。
コンテンツエディターでバリエーションを追加することで、自分だけのレンダリングバリエーションを作成できます。
レンダリングバリアントを作成するには:
1. コンテンツエディターでサイトをクリックし、「プレゼンテーション/レンダリングバリアント」フォルダを開きます。このフォルダにはバリアントを許可するすべてのレンダリングが一覧化されています。
> !注フォルダにレンダリングを追加するには、管理者に連絡してください。
2. バリアントを追加したいレンダリングを右クリックし、その後「 **挿入**」→ **「バリアント定義**」をクリックします。
3. 名前を入力して**OK**をクリックします。
4. **バリアント詳細**セクションでは、以下のフィールドに情報を指定してください:
- **リンクターゲットとして使用されるフィールド** - ターゲット項目のフィールド名を提供します。このクラスはリストおよびナビゲーション項目マークアップ(要素li HTML)に追加されます。このリンクは **、Isリンク**、**Isn接頭辞リンク**、またはIs接尾 **辞リンク** のチェックボックスが選択されたすべてのリンクを上書きするために使われます。
- **テンプレートで許可** - バリアントが利用可能なページを指定します。該当するページテンプレートをクリックし、右矢印をクリックして選択アイテムのリストに移動し、その後 **保存をクリックします。**テンプレートが選択されていなければ、バリアントはすべてのページで利用可能です。
- **Compatible renderings** - レンダリングバリアントを他のレンダリングに利用可能にする。例えば、ページコンテンツレンダリングバリアントの**Compatible Renderings**フィールドでTitleを指定する場合、Titleレンダリングにもそのレンダリングバリアントを使えます。
- **CSSクラス**:レンダリングするコンテンツ要素にレンダリングするクラスを指定します。例えば:
- **Item Css クラスフィールド**:CSSクラスを取得・クラス属性にレンダリングするレンダリングアイテムのフィールド名を指定します。ナビゲーションレンダリングのみをサポートしています
5. オプションで、**外観** セクションでバリアントのサムネイル画像を追加できます。この画像は **バリアント** のドロップダウンボックスに表示され、コンテンツエディターが目的に最適なバリアントを選ぶのに役立ちます。
**コンテンツエディター**
**エクスペリエンスエディター**
名前だけが表示されたサムネイル表示なしのレンダリングバリアント。
6. フィールドを表示するには、子項目をレンダリングバリアントに追加し、バリアントを右クリックして **挿入をクリックし、**その後該当するアイテムをクリックできます。
レンダリングバリアントで利用可能な子項目は以下の通りです:
- **Field** - フィールド名やその他のフィールド値を表示します。
- **Date** - データと時刻をカスタム形式で表示する。カスタム形式で日付と時刻を表示するには、*Date*項目を使用する必要があります。この項目は*Field*項目に似ていますが、日付と時間のフォーマットを選択できる追加のフィールド「 **Date format** 」があります。 *Field*項目と同様に、*Date*項目もフォールバックアイテムとして使用でき、独自のフォールバックアイテムを定義できます。
> !注フィールドとバリアントの詳細は以下の表に説明されています。
- **Edit Frame** - 編集モードで使用できるバリアントアイテム。
- **HTML Tag** - ユーザーがHTMLの自己閉鎖タグをレンダリングできるようにします。
- **Model** - 現在のモデルからプロパティを表示する。SXAレンダリングモデルはSitecore.XA.Foundation.Mvc.Models.RenderingModelBaseから継承しています。 **Property path**フィールドで、表示したいプロパティへのパスを入力できます。
- **Model Iterator** - モデルリストからプロパティを表示すること。
- **Placeholder** - ユーザーが追加のレンダリングを追加できるプレースホルダーをレンダリングします。このプレースホルダー内でレンダリングのコンテキストを切り替えたい場合は、**VariantDetails**セクションに行き、「 **コンポーネントコンテキストを現在レンダリング済みアイテムに切り替え** る」チェックボックスを選択してください。
- **Reference** - 参照項目のフィールドを表示する。参照項目のフィールドを表示したい場合は、**PassThroughField**でこのフィールドを定義できます。このバリアントフィールドは以下のフィールドに使用できます: **LinkField** (GeneralLink, DropLink)、**FileField** (File)、**ImageField** (Image)、**ReferenceField** (Droptree)。参照項目は子項目として別の参照項目を持つことができます。これは参照項目の木を作成し、参照項目で参照される項目からフィールドを表示する際に便利です。
- **Responsive Image** - 画像のデフォルトサイズだけでなく、許容されるサイズや幅も定義できます。画像をレスポンシブにするには、ページ上の画像のサイズや画面解像度に応じて、ブラウザが異なるサイズの画像を表示します。 **バリアント詳細** セクションに入力された値はsrcset属性で統合されます。以下のスクリーンショットの値は以下のimgタグを生成します:
- **Query** - 現在のコンテキスト項目に対して実行するクエリを指定することができます。これにより子項目にクエリを問い合わせたり、SXAトークンを利用できます。例えば、レンダリングバリアントを特定のテンプレートの子項目だけに表示したい場合などです。クエリはクエリから始め、その後標準Sitecoreクエリ構文を使う必要があります。Sitecoreクエリは$homeや$siteなどのSXAトークンと組み合わせることができます。
- **Section** - グループ作成に使用されます。セクションにはTag(セクションのラップ要素(例:「div」)やCssClass(ラップタグにcssクラスを追加する)などのフィールドが含まれています。セクションアイテムをネストしてより複雑なバリアント構造を作成できます。
- **Template** - ユーザーがHTMLの一部をレンダリングするためのテンプレートを定義できます。
- **Text** - テキストを表示する。例えば説明文のカスタム文字列をレンダリングするために使用されます。以下のフィールドを使用できます: **Text**、**Tag** (テキストをラップする追加タグを定義)、**CssClass** (タグに追加されるCSSクラス)、**IsLink** (選択するとカスタムテキストはハイパーリンクで現在のアイテムにラップされます)。
- **Token** - SXAは、トークン $id (アイテムのIDをレンダリング)、$size (付属アセットのサイズをフォーマット)、, $name (アイテム名をレンダリング)、および $FileTypeIcon (CSSがファイル拡張子と等しいクラスでレンダリングされるレンダリング)をサポートしています。カスタムパイプラインresolveVariantTokensは、バリアントトークンのセットを拡張するために使用できます。
- **Component** - コンポーネントの埋め込みが可能です。例えば、ニュース見出しの場合は、Breadcrumbやタグレンダリングを含むバリアントを作成できます。 *Pagination*コンポーネントの埋め込みはサポートしていません。
**Rendering item**フィールドでレンダリングを選択できます。**Rendering パラメータ**フィールドでデータソースを選択できます。データソースを空にすると、通常フィールドのレンダリングに使われるアイテムがコンポーネントのデータソースとして提供されます。レンダリングパラメータを設定する前に、*Rendering* Itemを指定して保存する必要があります。
- **Scriban** - ユーザーがHTMLの一部をレンダリングするために使用する[Scriban](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/scriban-templates.html "Scriban templates")テンプレートを定義できるようにします。
> !注Scribanアイテムの下でコンポーネントバリアントを使用する場合、コンポーネント内でコンポジットやページネーションコンポーネントは使用できません。また、Scribanテンプレート内でプレースホルダー付きのコンポーネントは使用しないことをお勧めします。これらのコンポーネントはページ上で正しくレンダリングされない可能性があります。
追加するアイテムに応じて、以下のフィールドを設定できます:
**フィールド**
**バリアントの詳細**
**タグ**
レンダリングされたフィールドコンテンツをラップするために使われるHTMLタグ。例えば: div
空のままの場合、フィールドコンテンツはラップされていないままです。
選択したタグが無効なHTMLマークアップにつながらないように注意してください。HTMLマークアップが無効だと、エクスペリエンスエディターは正しく動作しなくなり、コンテンツページのアイテムフィールドを編集することはできません。例えば、ネストされたコンポーネントを含むアイテムプレゼンテーションで、両方のレンダリングが行われます
タグ。
My
text
which gives trouble
**フィールド名**
コンテンツのレンダリングに使われるアイテムのフィールド名。
**接頭辞**
文字列の値が接頭辞として加算されます。
**接尾辞**
文字列の値が接尾辞として加算されます。
**リンクは**
フィールド内容を巻き込むハイパーリンクを設置するかどうかを選択してください:
**アンラップ** – フィールドがリンクでラップされていない( HTML要素)
**ラップド** – フィールドは常に;HTML要素)で囲まれます
**空でない場合にラップされる** – フィールドは空でない場合にのみリンク( HTML要素)でラップされます。
**は接頭辞リンクです**
フィールド内容を巻き込むハイパーリンクを設置するかどうかを選択してください:
**アンラップ** – フィールドがリンクでラップされていない( HTML要素)
**ラップド** – フィールドは常にリンクでラップされます(;HTML要素)
**空でない場合にラップされる** – フィールドは空でない場合にのみリンク( HTML要素)でラップされます。
**is 接尾辞リンク**
フィールド内容を巻き込むハイパーリンクを設置するかどうかを選択してください:
**アンラップ** – フィールドがリンクでラップされていない( HTML要素)
**ラップド** – フィールドは常にリンクでラップされます(;HTML要素)
**空でない場合にラップされる** – フィールドは空でない場合にのみリンク( HTML要素)でラップされます。
**ダウンロードリンクです**
ダウンロード属性付きのリンクを選択してください。
**CSSクラス**
タグにCSSクラスを追加します。 **タグ** フィールドが指定されていない場合、**CSSクラス** はレンダリングされません。
**編集可能**
レンダリングされたフィールドを編集するために選択してください。
**日付形式**
日付のフォーマットを決定します。
**空の場合はレンダリングしてください**
フィールドが空のときに空の要素をレンダリングする選択をします。
**パススルーフィールド**
入れ子された項目からフィールド名を定義します。
**本文**
レンダリングするテキスト。
**テンプレート**
コンポーネントバリアントの一部をレンダリングする[Scribanテンプレート](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/scriban-templates.html "Scriban templates") をHTMLとして定義してください。
**トークン**
特定のフィールド値をフォーマットするために特別なトークンを使用します。サポートされているトークンは以下の通りです:
$Size: サイズ単位に応じてファイルのサイズを表示します。
$FileTypeIcon: ファイル拡張子に応じてアイコンが表示されます。
**クエリ**
現在のコンテキスト項目に対して実行されるクエリを決定します。例えば:
すべての子アイテムを入手するには:
query:./\*
現在のアイテムの下にあるすべての*Page template*アイテムを取得するには:
query:..//\*@@templatename='Page'
現在のサイトのホームアイテムから*Page template*アイテムをすべて取得するには:
query:$site/\*@@name='Home'//\*@@templatename='Page'
**最大結果数**
返却されるアイテムの数を制限するために番号を入力してください。
**プロパティパス**
**Property path**フィールドで、表示したいプロパティへのパスを入力します。例えば、Item.Paths.Pathはまず*Model*のItemプロパティにアクセスし、さらに深く掘り下げてPathsプロパティ、そしてPath文字列にアクセスします。
**データ属性**
レンダリングバリアントアイテムによって生成されたHTML要素にデータ属性を追加します。
**リンク属性**
レンダリングバリアントで生成されたリンク要素にリンク属性を追加します。
**ボタン**
フレームボタンを編集します。ボタンを選択するには、/sitecore/content/Applications/WebEdit/Edit Frame Buttonsにアクセスしてください。
**プレースホルダーキー**
プレースホルダーをレンダリングするためのプレースホルダーキーを定義します。
**RenderingItem**
レンダリングバリアントレンダラーで使われるレンダリングを選択します。
**RenderingParameter**
バリアントレンダラーのレンダリングパラメータを指定します。
**デフォルトサイズ**
レスポンシブ画像のデフォルトサイズを決定します。レスポンシブ画像構文を生成するために使用されます。例えば、
img srcset="photo-author1-320w.jpg 320w,
photo-author1-480w.jpg 480w,
photo-author1-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,800px"
src="photo-author1-800w.jpg" alt="Blog author 1"
**サイズ**
レスポンシブ画像のメディア条件を定義し、最適な画像サイズを示します。レスポンシブ画像構文を生成するために使用されます。例えば、
img srcset="photo-author1-320w.jpg 320w,
photo-author1-480w.jpg 480w,
photo-author1-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,800px"
src="photo-author1-800w.jpg" alt="Blog author 1"
**幅**
レスポンシブ画像の利用可能な幅を決定します。レスポンシブ画像構文を生成するために使用されます。例えば、
img srcset="photo-author1-320w.jpg 320w,
photo-author1-480w.jpg 480w,
photo-author1-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,800px"
src="photo-author1-800w.jpg" alt="Blog author 1"