--- title: "コンポーネントの設定" slug: "configure-a-component" abstract: "選択されたコンポーネントで利用可能な設定を記述します。" --- # コンポーネントの設定 > !注このトピックでは、以前にContent Editorで構築されたコンポーネントの設定方法を説明します。代わりにコンポーネントでプロトタイプされたコンポーネントについて知りたい場合は、[コンポーネント](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-components-to-a-page/prototyping-components.html "Prototyping components") ドキュメントをご覧ください。 ページビルダーエディターモードの **コンポーネント** タブでは、コンポーネントにアクセスしてページのレイアウトの構成要素として使用できます。これらのコンポーネントには複数のオリジンがあり、このセクションでは、ページビルダーエディターの右側ペインにある設定を使って、コンテンツエディターで構築されたコンポーネントをどのように設定するかを説明します。 > !注コンポーネントでプロトタイプされ、ページビルダーで利用可能になるよう[登録](https://doc.sitecore.com/xmc/en/developers/xm-cloud/en/walkthrough--registering-an-external-react-component.html)されたコンポーネントについては、コンポーネントビルダーのドキュメントで[設定や](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components.html "Prototyping components")[スタイル](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/styling-components/style-a-component-with-a-theme.html "Style a component with a theme")の付け方を学びましょう。 > > Formsで組み込まれたコンポーネントについては、[Formsのドキュメント](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms.html "Forms")で設定方法を学びましょう。 > > もし組織が[Marketplaceアプリ](https://doc.sitecore.com/mp/en/developers/marketplace/find-marketplace-apps-installed-in-your-organization.html)を通じてカスタムフィールドを実装している場合、これらのフィールドのドキュメントはアプリの開発者によって提供されており、通常は[Marketplace](https://doc.sitecore.com/mp/en/developers/marketplace/introduction-to-sitecore-marketplace.html)インターフェースから直接アクセスできます。 ほとんどのコードコンポーネントは再利用性を重視して設計されており、データソース項目や関連コンテンツからデータを取得します。表示されるコンテンツは表示されるページに縛られず、データソース項目に保存されます。コンポーネントをページに追加すると、既存のデータソースを選択するか、新しいデータソース項目を作成できます。これにより、コンテンツアーキテクチャ、命名規則、再利用のレベルを完全にコントロールできます。 > !注コンポーネントへのコンテンツ割り当てについて詳しく知りたい方は、「 [ページへのコンテンツ追加](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page.html "Adding content to a page")」をご覧ください。 コンポーネントにデータソースを割り当てるだけでなく、**デザイン** タブを使ってレイアウトやスタイリングを設定したり、異なるバリアントやレンダリングを選択して見た目を変えることができます。 ![The variant drop down in the Design tab of the right-hand configuration panel](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/designtab.png) > !注コンポーネントおよびそのバリエーションについて詳しく知りたい方は [、「コードコンポーネントの扱い](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-components-to-a-page/working-with-code-components.html "Working with code components")方」をご覧ください。 コンポーネントの設計を設定するには: 1. ページビルダーで該当ページを開き、編集したいコンポーネントをクリックします。 2. 右側のペインで **「デザイン**」をクリックします。パネルの上部で、コンポーネントに使いたい [バリアント](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-components-to-a-page/working-with-code-components.html "Working with code components") を選択できます。バリアントはコンポーネントの見た目を変えたり、異なるコンテンツを表示したりします。 3. **レイアウト**、**スタイリング**、**詳細スタイリング**のセクションを展開すると、設定オプションにアクセスできます。