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

SXAでは、[クローンスクリプトを使って](https://doc.sitecore.com/xp/ja/developers/sxa/93/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/93/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のビュー名はレンダリング定義アイテム名として解決されます。カスタムパスを提供するには、ビューの位置をここに入力してください。

データソース

データソース

データソースの起源を特定するには、以下のいずれかのオプションを選択します:現在のページを使用 - データソースの項目が現在のページからデータを読み取る。ユーザーにデータソースを求める - コンテンツエディターにデータソースを選択させる。ページの下に自動的にデータソースを作成する - 特定のページ下にページ相対的なデータソース項目としてデータソースを保存する。

レンダリングテンプレート

テンプレートを選択してください。

ベースレンダリングパラメータテンプレート

ベーステンプレートを選択してください。デフォルトでは標準レンダリングパラメータテンプレートが選択されています。

ベースデータソーステンプレート

ユーザーが作成できるデータソースの種類を指定するために、データソーステンプレートを選択してください。

追加の互換性テンプレート

データソースのために複数のテンプレートを選択できます。例えば、プロモーションレンダリングではプロモーションテンプレートだけでなく、テキストや画像など他のデータソースも利用できます。

行動

データソースとしてページを選択する

ページをデータソースとして使えます。コンポーネントが現在のページからコンテンツを取得したい場合は、このオプションを選択してください。

背景画像

コンポーネントの背景画像を追加できます。データソースのテンプレートにベーステンプレートが追加され、その中にはエディターが背景として使う画像を選べるフィールドが含まれています。

データソースの挙動を選択する

ユーザーがデータソースの動作を設定できるかどうかを判断します。

コンポーネントバリアント

レンダリングにバリエーションがあるかどうかを判定します。

動的プレースホルダー

レンダリングのための動的なプレースホルダーを可能にします。