---
title: "リッチテキストエディターにカスタムスタイルを追加してください"
slug: "add-a-custom-style-to-the-rich-text-editor"
abstract: "Editor profiles APIを使ってstyleプロパティを使ってリッチテキストエディタにスタイルを追加できます"
---
# リッチテキストエディターにカスタムスタイルを追加してください

Editor Profiles APIを使って [、リッチテキストエディタ](https://doc.sitecore.com/sai/en/users/sitecoreai/add-rich-text-to-a-page.html) (RTE)ツールバーにカスタムスタイルを追加できます。これらのスタイルは、カスタム見出しやハイライトテキストなど、すぐに使えるフォーマットオプションを著者に提供します。

カスタムスタイルは[エディターのプロファイル](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/customize-the-rich-text-editor-toolbar.html "Customize the rich text editor toolbar")JSONのstyleプロパティを使って設定します。各スタイルの定義には以下が含まれます:

-   name - エディターに表示される表示名。
-   element - レンダリングする HTML 要素。
-   classes - 1つ以上のCSSクラスを適用すること。

設定すると、これらのスタイルはリッチテキストエディターの **「スタイル」** ドロップダウンメニューに表示され、著者は選択したコンテンツに適用できます。

> !重要エディターのツールバーでスタイルドロップダウンを有効にするには、ツールバーのアイテム配列にスタイルオプションを追加してください。スタイルが存在しない場合、スタイルプロパティで定義されたカスタムスタイルはアクセスできません。
> 
> 定義したCSSクラス(例えばカテゴリやインフォボックス)が、公開されたサイト上でスタイルが見えるように、あなたのサイトのスタイルシートに存在していることを確認してください。

以下の例は、**記事カテゴリ** 見出しと **情報ボックス** 段落のカスタムスタイルを含むツールバープロファイルを示しています。

{
 "toolbar": "bold", "italic", "style",
 "style": {
 "definitions": 
 {
 "name": "Article category",
 "element": "h3",
 "classes": "category"
 },
 {
 "name": "Info box",
 "element": "p",
 "classes": "info-box"
 }
 
 }
}

このプロファイルがサイトに割り当てられている場合、コンテンツ作成者はこれらのスタイルを使って以下を行えます:

-   **記事カテゴリ**のテキストを<h3 class="category secondary heading">としてレンダリングしてください。
-   **情報ボックス**のテキストを<p class="info-box">のようにレンダリングしてください。