---
title: "テーマを持ったコンポーネントをスタイリングする"
slug: "style-a-component-with-a-theme"
abstract: "コンポーネントまたはそのバージョンをスタイリングするテーマを選び、コンポーネントビルダーのスタイルピッカーでこのテーマをカスタマイズできます。"
---
# テーマを持ったコンポーネントをスタイリングする

コンポーネントビルダーでは[、スタイル](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/compose-a-theme.html "Compose a theme")ビルダーでテーマを作成・管理します。**スタイル**ズライブラリに保存されたテーマを使えば、ワンクリックでコンポーネント全体のスタイル**化**が可能です。

コンポーネントのテーマを選ぶことに加え、テーマに含まれる要素のカテゴリ(例えば、すべてのカードやすべてのイメージブロック)のスタイルを変更することでテーマを [カスタマイズ](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/styling-components/style-a-component-with-a-theme.html#UUID-d70ed9ca-1316-3d5b-da01-20189b95b22b_section-idm4585461261646433556844348966 "Customize a theme") できます。

また、[スタイルを変更し](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/styling-components/style-a-single-element-and-text.html "Style a single element and text") たり、コンポーネント内の特定の要素を一つずつ [カスタマイズ](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/styling-components/customize-an-element.html "Customize an element") することも可能です。

## コンポーネントのテーマを選びましょう

テーマは、事前に作成された要素とスタイルルールの組み合わせで構成されています。主な目的は、複数のスタイルを同時に適用することで、例えばライトセクション、ダークカード、ライトテキストブロック、特定のピルスタイルをワンクリックで適用することで、コンポーネントのスタイリングプロセスを向上させることです。

テーマを使ったコンポーネントをスタイリングするには:

1.  コンポーネントビルダーで、スタイルをつけたいコンポーネントをクリックします。
    
2.  スタイルしたいバージョンの右上で「 **現在のテーマ** :mdiPaletteAdvanced:」をクリックしてください。
    
    ![Screenshot of the style picker](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/stylepicker.png)
    
3.  右側のペインの **「テーマ」** タブで、そのバージョンに割り当てたいテーマをクリックしてください。
    

コンポーネントは選んだテーマに沿ってスタイリングされています。

## テーマをカスタマイズする

要素カテゴリごとに代替スタイルを選択することでテーマをカスタマイズできます。これは、デフォルトスタイルに加えて他のスタイルで構築されている場合のみ可能です。代替スタイルは、テーマピッカーの :mdiChevronRight: をクリックすることで利用可能です。

特定のバージョンのコンポーネント向けにテーマをカスタマイズするには:

1.  コンポーネントビルダーでカスタマイズしたいバージョンをクリックします。
2.  バージョンの右上で「 **現在のテーマ** :mdiPaletteAdvanced:」をクリックしてください。
3.  右側のペインで「 **カスタマイズ** :mdiCloudRefreshOutline:」をクリックします。
4.  カスタマイズしたい要素タイプは :mdiChevronRight: をクリックしてください。
5.  **「許可されたスタイル**リスト」で、このコンポーネントのこの要素タイプに使いたいスタイルをクリックしてください。

**Elementのカスタマイズ**概要では、カスタマイズされたスタイルが薄緑色でハイライトされています。

![Theme dialog in the right-hand pane](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/customtheme.jpg)

カスタマイズは特定のコンポーネントに適用されたテーマにのみ適用されます。コンポーネントに別のテーマを適用すると、すべてのカスタマイズが削除されます。また、同じテーマを使う別のコンポーネントやバージョンにカスタマイズが移されることはありません。