---
title: "単一の要素とテキストをスタイル化する"
slug: "style-a-single-element-and-text"
abstract: "スタイル要素は、Stylesライブラリで定義されたスタイルルールを受け入れることで実現します。"
---
# 単一の要素とテキストをスタイル化する

コンポーネントビルダーでは、**Styles**ライブラリに1つ以上のスタイルが割り当てられます。コンポーネント内で要素を使うと、**Styles**ライブラリ内のその要素に割り当てられたデフォルトのスタイルでスタイル化されます。

## スタイルは要素です

コンポーネント内の特定の要素のスタイルは変更できますが、[ここで](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")説明しているように同じタイプのすべての要素のスタイルを変えるのとは違います。

要素をスタイリングするには:

1.  コンポーネントビルダーでスタイリングしたい要素を選択します。キャンバス内の要素をクリックするか、コンポーネントの左下にあるコンテキストツールバーを使えます。
    
2.  右側のペイン上部の **スタイル** セクションで、スタイルタイルをクリックします。
    
3.  要素の別のスタイルを選択するには、上部のタイルの :mdiChevronDown: をクリックしてください。
    
    ![Screenshot of the right-hand pane when styling a single element.](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/styles_RHP.jpg)
    
4.  ドロップダウンメニューで、以下のいずれかをクリックしてください:
    
    -   **現在のテーマ** - コンポーネントに現在適用されているテーマから許可されているスタイルにアクセスできます。
    -   **すべて利用可能** - このテーマに割り当てられていないエレメントのすべてのスタイルにアクセスできます。
5.  スタイルをクリックして選択した要素に適用してください。
    

エレメントは現在のテーマのスタイル、または**Styles**ライブラリで許可されている任意のスタイルでスタイリングされます。

テーマに含まれていないスタイルで「 **All available** 」リストから選択する場合は、その要素をテーマから切り離します。テーマが変更されたことを示すために、その名前がオレンジ色のタグに警告表示付きで表示されます。さらに、一度きりのカスタマイズでスタイルをさらにカスタマイズすることも可能です。

![Screenshot of a theme label when one of its element has been detached by using a style not allowed fir the current theme](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/themecompromised.png)

## スタイルテキスト

インライン編集を行うか、Stylesライブラリで定義されたスタイルルールを受け入れることでテキスト **のスタイルを付けることができます** 。

テキストのスタイル化:

1.  コンポーネントビルダーでスタイルをつけたいテキストをハイライトします。
2.  テキストスタイルを変更するには:
    -   右側の **スタイル** セクションで、タイルをクリックして **スタイル** ピッカーを開き、テキスト用の別のスタイルを選択します。
    -   ハイライトされたテキストの左側に :mdiPencilOutline: をクリックし、**テキスト要素**タグのいずれかを選択します。各タグに関連付けられたスタイルは、**スタイル**ライブラリで[テキストブロック](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/apply-rules-to-elements.html "Apply rules to elements")を定義する際に保存されます。
3.  テキストのアライメントを調整するには、右側のペインの **アラインメント** セクションで「 **テキスト設定**」をクリックしてください。

![Style text using the options in the right-hand pane or by picking a new Text element.](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/style_text.jpg)