---
title: "コンポーネントウィザードを使ってカスタムレンダリングを作成します"
slug: "use-the-component-wizard-to-create-a-custom-rendering"
abstract: "コンポーネントウィザードを使って自分だけのコンポーネントを作成する方法を学びましょう。"
---
# コンポーネントウィザードを使ってカスタムレンダリングを作成します

SXAでは、[クローンスクリプトを使って](https://doc.sitecore.com/xp/ja/developers/sxa/100/sitecore-experience-accelerator/copy-and-customize-a-rendering.html "Copy and customize a rendering")SXAレンダリングのコピーを素早く作成できます。例えば、異なるスタイルで多くのプロモレンダリングをしたい場合など、これは便利です。既存のレンダリングと似ていないカスタムレンダリングを作成したい場合は、コンポーネントウィザードを使うこともできます。

標準のSXAツールボックスセクションはSXAのアップデートで上書きされるため、派生レンダリング用のツールボックスセクションを別に作成することをお勧めします。これはSXAに [新しいモジュールを追加](https://doc.sitecore.com/xp/ja/developers/sxa/100/sitecore-experience-accelerator/create-a-new-sxa-module--mvc-.html "Create a new SXA module (MVC)") することで可能です。

コンポーネントウィザードを使ってカスタムレンダリングを作成するには:

1.  コンテンツエディターで*sitecore/Layout/Renderings/Feature/* に移動し、カスタムレンダリング用のフォルダを作成します。これにより、SXA更新時にレンダリングが上書きされないようにします。
    
2.  作成したフォルダを右クリックし、「 **挿入**」をクリックし、「 **コンポーネント**」をクリックします。
    
3.  ウィザードで以下の項目を入力してください:
    
    タブ
    
    フィールド
    
    概要
    
    一般
    
    コンポーネント名
    
    新しいレンダリングの名前を入力してください。
    
    加算
    
    新しいレンダリングが属するモジュールを選択します。
    
    レンダリングCSSクラス
    
    レンダリングのためにCSSクラスを導入します。
    
    レンダリングビューへのパス
    
    デフォルトでは、SXAのビュー名はレンダリング定義アイテム名として解決されます。カスタムパスを提供するには、ビューの位置をここに入力してください。
    
    データソース
    
    データソース
    
    データソースの出所を特定するには、以下のいずれかを選択してください:  
      
    
    -   **現在のページを使う** - データソースの項目は現在のページからデータを読み取る。
    -   **ユーザーにデータソースを求める** - コンテンツ編集者がデータソースを選べるように。
    -   **ページ下に自動的にデータソースを作成する** - 特定のページの下にデータソースを相対的なデータソース項目として保存します。
    
    レンダリングテンプレート
    
    テンプレートを選択してください。
    
    ベースレンダリングパラメータテンプレート
    
    ベーステンプレートを選択します。デフォルトでは *Standard Rendering Parameters* テンプレートが選択されます。
    
    ベースデータソーステンプレート
    
    ユーザーが作成できるデータソースの種類を指定するために、データソーステンプレートを選択してください。
    
    追加の互換性テンプレート
    
    データソースのために複数のテンプレートを選択できます。例えば、プロモーションレンダリングではプロモーションテンプレートだけでなく、テキストや画像など他のデータソースも利用できます。
    
    行動
    
    データソースとしてページを選択する
    
    ページをデータソースとして使えます。コンポーネントが現在のページからコンテンツを取得したい場合は、このオプションを選択してください。
    
    背景画像
    
    コンポーネントの [背景画像を追加](https://doc.sitecore.com/xp/ja/developers/sxa/100/sitecore-experience-accelerator/enable-adding-a-background-image-to-a-rendering.html) できます。データソースのテンプレートにベーステンプレートが追加され、その中にはエディターが背景として使う画像を選べるフィールドが含まれています。
    
    データソースの挙動を選択する
    
    ユーザーが [データソースの動作](https://doc.sitecore.com/xp/ja/developers/sxa/100/sitecore-experience-accelerator/configure-a-snippet.html)を設定できるかどうかを判断します。
    
    コンポーネントバリアント
    
    レンダリングにバリエーションがあるかどうかを判定します。
    
    動的プレースホルダー
    
    レンダリングのための [動的なプレースホルダー](https://doc.sitecore.com/xp/ja/developers/sxa/100/sitecore-experience-accelerator/add-a-dynamic-placeholder-to-a-rendering-variant.html) を可能にします。