---
title: "レンダリング用のスタイルを追加する"
slug: "add-a-style-for-a-rendering"
abstract: "スタイルクラスアイテムを追加し、レンダリング用にする方法について。"
---
# レンダリング用のスタイルを追加する

SXAにはレンダリング用のプリセットスタイルが付属しています。ただし、時には自分でカスタムスタイルを追加したい場合もあります。例えば、サイトの一部の画像を余白なしで表示したい場合や、レンダリングに背景色を追加したい場合などです。

コンテンツエディタでレンダリング用のクラスアイテムを追加するには:

1.  サイトの **プレゼンテーション** フォルダに行ってください。
    
2.  右クリック **で「スタイル」**をクリックし、「挿入」をクリックし **、**次に **「スタイル** 」をクリックして新しいスタイルを追加してください。
    
3.  名前を入力して**OK**をクリックします。
    
    > !注新しいスタイルには、他のユーザーが何をするのか分かりやすくなる名前をつけてください。
    
4.  新しいスタイルをレンダリング用にするには、**スタイル** セクションで **編集**をクリックします。
    
    ![663F128991B442FAA9C465D33F9E010F.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/663F128991B442FAA9C465D33F9E010F.png)
    
5.  「 **アイテム選択** 」ダイアログで、該当するレンダリングをクリックし、右矢印 ![6F16BFE47A894D598F5616AD24221271.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/6F16BFE47A894D598F5616AD24221271.png) をクリックして選択アイテムのリストに移動し、「 **OK」**をクリックします。この例では、グレーの背景はコンテナとスプリッターのレンダリング用に利用可能です。
    
    ![44410E213D4A4DDAB89AFED7BD75B033.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/44410E213D4A4DDAB89AFED7BD75B033.png)
    
6.  新しいスタイルを見るには、エクスペリエンスエディターで「スタイル編集」をクリックしてください。
    
    ![F10EE8620F724194860347943BA5CC7B.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/F10EE8620F724194860347943BA5CC7B.png)
    
7.  スタイルセクションで新しいスタイルを選択できます。
    
    ![F95416F98A7C4CDF993D238F9FF31BE4.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/F95416F98A7C4CDF993D238F9FF31BE4.png)
    
8.  新しいスタイルをレンダリングに適用するには**OK**をクリックしてください。