---
title: "ページにリッチテキストを追加"
slug: "add-rich-text-to-a-page"
abstract: "リッチテキストコンポーネントは、ウェブページに直接リッチテキスト、表、メディアファイルを追加できます。"
---
# ページにリッチテキストを追加

> !注このトピックでは、以前にContent Editorで構築されたコンポーネントの設定方法を説明します。代わりにコンポーネントでプロトタイプされたコンポーネントについて知りたい場合は、[コンポーネント](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components.html) ドキュメントをご覧ください。

リッチテキストコンポーネントを使うことで、ウェブページ上にテキストの追加、インライン編集、フォーマットが簡単にできます。リッチテキストコンポーネントは最初にコンテンツエディターで作成され、ページビルダーの左側ペインの **コンポーネント** タブで利用可能です。リッチテキストコンポーネントは、ライブウェブサイトに表示されるテキストや表を表示します。

> !警告リッチテキストエディタのフィールドにJavaScriptのスニペットを追加しないでください。そうすると「 *Sorry, You're been blocked」* エラーが発生し、悪意あるスクリプトの実行を妨げる可能性があります。代わりに、フロントエンドアプリケーションにJavaScript要素を追加してください。
> 
> これはGoogleタグマネージャーのスクリプトには当てはまりません。これらはリッチテキストフィールドに安全に追加すれば正しく機能します。

ページにリッチテキストコンポーネントを追加するには:

1.  ページビルダーエディターモードで、左側のペインの **サイトツリー** タブで、コンポーネントを追加したいページをクリックします。
2.  **コンポーネント**タブで下にスクロールしてリ**ッチテキスト**コンポーネントのアイコンを探してください。
3.  アイコンをクリックして、ページのキャンバス上のプレースホルダーにドラッグします。
4.  ページに追加したいテキストを入力したり、 [コンポーネントに表](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-a-table-to-a-page.html) や [メディアファイル](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-a-media-file-to-a-page.html) を追加したりします。

![The toolbar of the CKEditor](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/component_rich_text.png)

CKEditorツールバーを使えば、リッチテキストコンポーネントの内容に以下のオプションを適用できます:

アイコン

レーベル

概要

:mdiFormatBold:

太字

選択したテキストを太字にしてください。

:mdiFormatItalic:

斜体

選択したテキストは斜体で表記してください。

:mdiFormat下線:

下線

選択したテキストに下線を引いてください。

:mdiFormatStrikethroughVariant:

消線

選択したテキストを消してください。

:mdiFormatQuoteOpen:

ブロック引用

ブロック引用やプルクォートを含めましょう。

:mdiFormatSuperscript:

上標

選択したテキストを(x)に変換します。

:mdiFormatSubscript:

添字

選択したテキストを(x)に変換します。

![Font color](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/color.png)

フォントの色

フォントの色を変える。カラーピッカーも含まれている。

![Font background color](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/bgcolor.png)

フォントの背景色

フォントの背景色を変えます。カラーピッカーも含まれています。

![Styles](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/format-heading.png)

見出し

あらかじめ定義された段落スタイルを選択して、コンテンツにカスタムスタイリングとセマンティックな値を適用します。

:mdiFormatAlignLeft:

テキストの整合性

左に揃え、右に揃え、中央に揃え、または両端合わせ。

:mdiFormatListBulleted:

箇条書きリスト

箇条書きリストを追加してください。

:mdiFormatList番号付き:

番号付きリスト

番号付きリストを追加してください。  
  
\> \[!注\]  
\>どの値からでも番号付きリストを作成できます。これを行うには、リッチテキストエディタのツールバーで番号付きリストタイプを展開し、 **リストプロパティ**を選択し、選択した開始値を入力します。

![Horizontal line](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/line.jpg)

水平線

横線を追加してください。

:mdiFormatIndentDecrease: :mdiFormatIndentIncrease:

インデントの減少または増加

段落のインデントを増減してください。

:mdiLinkVariant:

リンク

ハイパーリンクを作成または編集できます。また、メールアドレスやページ上の [アンカー](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-rich-text-to-a-page.html#link-to-an-anchor-on-the-page) へのリンクも利用できます。  
  
\> \[!注\]  
\> CKEditorはメールリンクを自動的に認識するため、クリック時にデバイスのメールクライアントにリンクタイプを指定する必要はありません。

:mdi画像:

選択メディア

[メディアファイルを挿入](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-a-media-file-to-a-page.html)します。

:mdiTable:

表

[テーブルを追加](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-a-table-to-a-page.html)しましょう。

![Remove format](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/removeformat.jpg)

フォーマットを削除

選択したテキストからフォーマットを削除してください。

![Edit format code](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/html.jpg)

編集フォーマットコード

ソースコードエディタを開きます。また、iFrameタグをHTMLエディタに貼り付けてフィールドに埋め込むこともできます。

:mdiTrashCan概要:

フィールド値リセット

フィールド内のすべてのテキストを消してください。

:mdiLinkPlus:

内部リンクを挿入

サイトツリーから選んだ内部ページへのハイパーリンクを作成します。

:mdiPhone:

電話番号を追加してください

電話番号へのハイパーリンクを作成し、クリックすると端末の電話クライアントを表示します。

> !注リッチテキストエディタは [キーボードショートカット](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/working-with-the-page-builder/editing-in-the-page-builder.html#keyboard-shortcuts-for-text-editing)をサポートしています。
> 
> ツールバーで利用可能な機能は、サイトに割り当てられた[CKEditorプロファイル](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/customize-the-rich-text-editor-toolbar.html) によって異なります。

## ページ上のアンカーへのリンク

リンク機能を使って、同じページの特定の要素にナビゲートするアンカーリンクを作成できます。これは2つのステップで行えます。まず、サイト訪問者がクリックできるアンカーリンクを作成し、次に訪問者をナビゲートしたいターゲット要素にアンカーIDを設定します。

アンカーリンクを作成するには:

1.  アンカーリンクにしたいテキストを選択してください。
2.  CKEditorのツールバーでリンクアイコンをクリックします。
3.  **リンクURL**フィールドにハッシュシンボルを入力し#、その直後にターゲット要素のIDを入力します。例:#my-section
4.  リンクを確認してください。

アンカーIDを設定するには:

1.  ページのターゲット要素、例えば別のリッチテキストフィールドやテキストフィールドをクリックしてください。
2.  CKEditorツールバーで「 **ソースコード編集** 」ボタンをクリックしてください。
3.  ソースコードモーダルでは、ターゲット要素に id 属性を追加し、その値をターゲット要素のIDに設定します。ハッシュシンボルは含めないでください。例: <h2 id="my-section">
4.  「 **保存**」をクリックし、その後「 **プレビュー** 」をクリックしてアンカーリンクをテストしてください。