---
title: "レンダリングをコピーしてカスタマイズする"
slug: "copy-and-customize-a-rendering"
abstract: "スキャフォールディングでカスタムレンダリングを追加できる方法を学びましょう。"
---
# レンダリングをコピーしてカスタマイズする

SXAでは、クローンスクリプトを使ってSXAレンダリングのコピーを素早く作成できます。クローンレンダリングでは、レンダリング定義項目、レンダリングパラメータテンプレート、データソーステンプレート、ブランチの正確なコピーが手に入ります。既存のレンダリングをコピーし、名前やスタイルを変えます。例えば、異なるスタイルで多くのプロモレンダリングを使いたい場合など、これは便利です。

標準のSXAツールボックスセクションはSXAのアップデートで上書きされるため、派生レンダリング用のツールボックスセクションを別に作成することをお勧めします。これはSXAに新しいモジュールを追加することで可能です。

## 新しいモジュールの追加

新しいモジュールを追加するには:

1.  */sitecore/system/Settings*に移動し、**Features**または**Foundation**を右クリックして新しいフォルダを挿入します。
2.  新しいフォルダを右クリックし、「 **挿入**」をクリックし、「 **モジュール**」をクリックします。
3.  名前を入力し、モジュールを新しいフォルダの下にまとめてください。

## レンダリングをコピーしてカスタマイズする

レンダリングをコピーしてカスタマイズするには:

1.  使いたいレンダリングをクローンするには、 */sitecore/Layout/Renderings/* に移動してクローンしたいレンダリングを右クリックしてください。
2.  スクリプト**をクリックして、「****クローンレンダリング**」をクリックします。
3.  「 **派生レンダリングを作成する」** ダイアログボックスで、以下のフィールドを埋めてください:

タブ

フィールド

概要

一般

新しい名称

新しいレンダリングの名前を入力してください。

加算

新しいレンダリングが属するモジュールを選択します。標準のSXAツールボックスセクションはSXAのアップデートで上書きされるため、派生レンダリング用に独自のモジュールを追加することをお勧めします。

レンダリングCSSクラス

レンダリングのためにCSSクラスを導入します。

パラメータ

レンダリングパラメータ

レンダリングパラメータを選択し、コピーモード:既存のレンダリングパラメータから継承する – 新しいアイテムを作成し、\_\_Baseテンプレートを元のレンダリングパラメータテンプレートに指すように設定します。元のレンダリングパラメータのコピーを作成する – 元のレンダリングパラメータのコピーを新しい場所に作成します。これによりパラメータの拡張、削除、順序付け替えが可能になります。

データソース

データソース

データソースを選択し、コピーモード:既存データソースから継承する – 新しいアイテムを作成し、その\_\_Baseテンプレートをソースデータソースのテンプレートを指すように設定します。レンダリングのスタイリングのみを変更したい場合にこのオプションを選択してください。元のデータソースのコピーを作成する – 新しい場所にソースデータソーステンプレートのコピーを作成します。標準データ項目に追加フィールドを追加したい場合、このオプションを選択します。例えば、画像フィールドを背景に使いたい場合は。

眺め

眺め

ビューコピーモードを選択してください:元のMVCビューファイルを使用してください。事前に入力されたパスのビューをレンダリングビューフィールドに使います。ビューフィールドが指定されていない場合、StandardControllerはアイテム名のレンダリングに基づいてビューを解決しようとします。スタイリングだけを変更したい場合はこのオプションを選択してください。MVCビューファイルをコピーする(下記にパス指定)— ソースビューをレンダリングへのパス表示フィールドで指定された場所にコピーします。既存のマークアップを拡張または修正したい場合にこのオプションを選択します。既存のMVCビューファイルを選択し(下記にパスを指定します) — レンダリング画面フィールドで指定されたビューを使用しますが、コピーは作成しません。

レンダリングビューへのパス

ビューの位置を入力してください。例えば:

これでレンダリングをサイトのツールボックスに表示させることができます。

## ツールボックスにレンダリングを追加する

レンダリングをツールボックスに追加するには:

1.  サイトのプレゼンテーションフォルダに移動し、「 **Available Renderings**」を右クリックしてください。
    
2.  挿入**をクリックして「****利用可能なレンダリング**」をクリックしてください。
    
3.  追加したいレンダリングのセクション名を入力して**OK**をクリックします。
    
4.  作成した新しいセクションをクリックし、**データ** セクションで **編集**をクリックします。
    
5.  「 **アイテム選択** 」ダイアログボックスのレンダリングフォルダで、該当するレンダリングをクリックし、右矢印をクリックして選択されたアイテムのリストに移動させます。 **OK**をクリックします。
    
    ![Select Item dialog box](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/153E66A89E8F477B8A9B065CB424262F.png)
    
    新しいレンダリングはエクスペリエンスエディターで利用可能になりました。
    
    ![Special Promo component now available in EE.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/A04D6A12500D4B1596BCD73A7298284D.png)