---
title: "コンポーネントの追加、編集、削除"
slug: "add-edit-and-delete-a-component"
abstract: "ページデザインを助けるためのあらかじめ定義されたコンポーネントのセットがあります。"
---
# コンポーネントの追加、編集、削除

エクスペリエンスエディターでは、あらかじめ定義されたコンポーネントが付属しているツールボックスを使ってページのデザインを助けることができます。ツールボックスからコンポーネントをドラッグしてページに移動させることでページを作成できます。

## コンポーネントの追加

エクスペリエンスエディターでは、ツールボックスからコンポーネントをドラッグしてページに追加できます。

ページにコンポーネントを追加するには:

1.  ツールボックスを開き、コンポーネントを追加したいプレースホルダーにドラッグします。ドラッグしている間、プレースホルダーが青色に変わります。
    
    ![Drag the component to the page](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/SXA-headless-add-rendering-in-ee.png)
    
    または、**HOME**タブの**コンポーネント**ボタンをクリックして「**レンダリングを選択する**」ダイアログボックスを開くこともできます。
    
    > !注コンポーネントをページにドラッグできない場合は、[プレースホルダー制限](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/set-placeholder-restrictions.html)が原因かもしれません。
    
2.  そのコンポーネントをページに置きます。コンポーネントの種類によっては、「**関連コンテンツ選択**」ダイアログボックスで[コンテンツアイテムを選択する](https://doc.sitecore.com/xp/ja/users/sxa/103/sitecore-experience-accelerator/select,-modify,-and-create-a-data-source.md "Select, modify, and create a data source")必要がある場合があります。
    
3.  コンポーネントがページに表示されたら、ツールボックスに戻らずに別のプレースホルダーに移動できます。
    
4.  コンポーネントを別のプレースホルダーに移動するには、浮動ツールバーの **「Move** ![9A39A7031726467584F9937A171F4E64.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/9A39A7031726467584F9937A171F4E64.png) 」をクリックし、次に移動したいプレースホルダーの **「Move to here** 」をクリックしてください。
    

## コンポーネントを編集する

編集可能なコンポーネントもあれば、編集できないものもあります。コンポーネントを編集できると、浮かぶツールバーが表示されます。

コンポーネントを編集するには:

1.  編集したいコンポーネントをクリックしてください。もしそのコンポーネントがテキストであれば、ページ上で直接編集できます。
    
2.  コンポーネントプロパティを編集するには、フローティングツールバーで以下のいずれかを行います:
    
    -   **「もっと」**をクリックして「**コンポーネントプロパティを編集**![C2B8306D7F6C45C4AD7F67CBAE4160DE.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/C2B8306D7F6C45C4AD7F67CBAE4160DE.png)」>。
    -   コンポーネント![099C96872F994CD49E2EBBA03B8127AF.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/099C96872F994CD49E2EBBA03B8127AF.png)**のスタイルと動作を編集**をクリックします。
3.  **コントロールプロパティ**のダイアログで、必要なコンポーネントの挙動やスタイルを指定します。利用可能なオプションはコンポーネントの種類によって異なります。すべてのコンポーネントでスタイル設定を変更できます。例えば、タイトルの段落スタイルを変更したり、プレビューアイコンの寸法を変更したりできます。
    
    > !注プレースホルダーおよびデータソースプロパティを変更しないでください。これらのプロパティを変更すると、コンポーネントが消えるか、他の予期せぬ挙動を引き起こす可能性があります。
    
4.  スタイルを変更するには、**コントロールプロパティ** のダイアログでス **タイリング** セクションに行き、希望するスタイルを選択してください。
    
5.  コンポーネントに割り当てられたデータソースを公開するには **「公開」** をクリックしてください。サイトは公開されません。
    

## コンポーネントを削除する

時には、ページからコンポーネントを削除したい場合もあります。例えば、プロモーションオファーが無効になった場合などです。

ページからコンポーネントを削除するには:

-   削除したいコンポーネントをクリックし、フローティングツールバーで ![5B2701EDEF084E7FB4C11CD3B9D5E3AA.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/5B2701EDEF084E7FB4C11CD3B9D5E3AA.png)**Remove(削除)をクリックします。**
    
    > !注列や行分割器が多数ある複雑なページレイアウトを作成し、ネストされたコンポーネントを削除しようとすると、どのレンダリングを削除したいかというメッセージが表示されることがあります。削除をクリックすると削除されるセクションがハイライト表示されます。OKをクリックすると、リストに載っているすべてのコンポーネントが削除されます。