---
title: "ウォークスルー:ブログ投稿用のレンダリングバリアントの作成"
slug: "walkthrough--creating-a-rendering-variant-for-a-blog-post"
abstract: "ブログ記事用のバリエーションを素早く作成しましょう。"
---
# ウォークスルー:ブログ投稿用のレンダリングバリアントの作成

レンダリングバリアントでは、同じレンダリングを異なる方法で表示できます。このウォークスルーでは、ページコンテンツレンダリング用のレンダリングバリアントを作成します。ページコンテンツレンダリングは、バリアントなしで単一のフィールドを表示するシンプルなレンダリングです(例えばページタイトルレンダリングなど)。バリアントを追加すると、コンテンツを表示するフィールドを動的に選択できます。

この例はブログ記事を表示するサイトを使います。バリアントフィールドの作成方法や、サイト内のすべてのブログ記事が同じスタイルで作られているかを学ぶことができます。

## テンプレートを追加してください

この例は、ブログ記事用のフィールドを含むページテンプレートを持つシンプルなサイトを使います。

![Page template blog post example.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-template.png)

サイトにはいくつかのデータを含む様々なブログ記事が掲載されています。

![Blog pages example.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-pages.png)

テンプレートをテナントテンプレートフォルダに追加するには:

1.  コンテンツエディターでtenant templatesフォルダ(*sitecore/Templates/Project/*)に移動します。例えば、新しいプロジェクトにカスタムテンプレートを追加するには、*/sitecore/templates/Project/*へ行ってください。
    
2.  アイテムを右クリックして「**挿入**、**新しいテンプレート**」をクリックします。または**オプションセクションの**「**新しいテンプレート**」をクリックしてください。
    
3.  新しいテンプレートの名前を入力し、ベーステンプレートを選択し、「 **次へ**」をクリックします。ページを表すアイテムのテンプレートは、デフォルトの*Page*テンプレートから継承しなければなりません。
    
4.  **ビルダー**タブの「**新しいセクションを追加**」フィールドで、関連するデータテンプレートフィールドを追加します。例えば:
    
    ![Date template fields example.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-template.png)
    

## バリアントを作成する

現在の設定では、ページコンテンツレンダリングをページにドラッグすると、デフォルトで最初に見つけたバリアント、つまり **コンテンツ** フィールドが使われます。

![The rendering uses the first found variant](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-page-content-default.png)

他のフィールドを表示するためのページコンテンツバリアントを作成するには:

1.  コンテンツエディターで*Presentation/Rendering Variants*に移動し、右クリックで **「ページコンテンツ**」をクリックし、「 **挿入**」→ **「バリアント定義**」をクリックします。
    
2.  *Blog Post*を入力して**OK**をクリックします。
    
3.  レンダリングバリアントが表示するフィールドを定義するには、子項目をレンダリングバリアントに追加できます。バリアントを右クリックし、「 **挿入**」をクリックし、該当するアイテムをクリックします。
    
    この例では、以下の項目を追加しましょう。
    
    アイテム
    
    名称
    
    タグ
    
    本文
    
    フィールド
    
    タイトル
    
    H1
    
    フィールド
    
    著者
    
    スパン
    
    本文
    
    著者プレフィックス
    
    スパン
    
    著者
    
    日付
    
    ウェブ出版
    
    スパン
    
    HTMLタグ
    
    境界線
    
    人事
    
    フィールド
    
    概要
    
    H4
    
    フィールド
    
    リードイメージ
    
    ディビジョン
    
    フィールド
    
    内容
    
    ディビジョン
    
    > !注多くのフィールドを含む複雑な構造を持つバリアントをレンダリングする場合は、セクション内で構造化とスタイリングを検討してください。
    > 
    > ![SXA-wrapper.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-wrapper.png)
    
    Experience Editorでブログ投稿バリアントを選択すると、レンダリングバリアントに追加したフィールドが表示されます:
    
    ![SXA-blog-example.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-example.png)
    
    > !注レンダリングアイテムにスタイリングを追加することも可能です。もしそうするなら、サイトで使うテーマがこのスタイリングを上書きする可能性があることに注意してください。
    

## 部分的なデザインを作成する

すべてのブログ記事のスタイル化には、部分デザインやページデザインを組み合わせることができます。部分的なデザインとは、レンダリングのセットや特定のバリエーションを用いたレンダリングのことです。

部分的なデザインを作成するには:

1.  リボンの**Experience Accelerator**タブで **「部分的なデザイン**」をクリックし、「 **新しい部分的なデザインを挿入**する」をクリックしてください。
    
2.  「 **アイテム挿入** 」ダイアログボックスで「**部分設計**」をクリックし、*Blog Post Partial*を入力して **「OK」**をクリックします。
    
3.  次にページコンテンツレンダリングを部分的なデザインにドラッグし、ブログ投稿バリアントのあらかじめ定義されたスタイルを選択します。
    
    ![SXA-blog-partial-design.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-partial-design.png)
    

## ページデザインを作成しましょう

SXAのページデザインは、部分的なデザインとレンダリングの組み合わせです。ページデザインには部分的なデザインやレンダリングが含まれることもあります。この例のすべてのブログページが同じスタイリングを使うようにするために、ページデザインを作成できます。

ページデザインを作成するには:

1.  リボンのExperience **Accelerator**タブで **「Page Designs**」をクリックし、「 **Insert Page Design**」をクリックしてください。
    
2.  アイテム **挿入** ダイアログボックスで「 **ページデザイン**」をクリックし、「 *Blog Post Design*」を入力し、「 **OK」**をクリックします。
    
3.  「**アイテム選択**」ダイアログボックスで、追加したい部分的なデザインを選択します。この例では、作成した**ヘッダー、****フッター**、**メタデータ**、**ブログ投稿部分**を追加してください。右矢印をクリックして選択したアイテムのリストに移動し、その後「**確定」**をクリックします。
    
    ![SXA-blog-page-design.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-page-design.png)
    

## ページデザインを割り当てる

これで、すべてのブログページが同じスタイリングを使うようにページデザインを割り当てることができます。ページデザインを使ってコンテンツタイプをページレイアウトにマッピングできます。こうすることで、サイトのレイアウトを一貫性を保てます。

ページデザインを割り当てるには:

1.  リボンの**Experience Accelerator**タブで「 **Site Page Designs**」をクリックしてください。
    
2.  表示されたダイアログボックスの左列でテンプレートを選択し、ページデザインに関連付けるために右欄でページデザインを選択します。
    
    ![SXA-page-design-blog.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-page-design-blog.png)
    
3.  変更を適用するには、**OK**をクリックしてから**保存**をクリックします。