リッチテキストボックス

リッチテキストボックスでは、テキストに部分的なスタイルを適用したり、マークダウン記法を利用できます。

長文コンテンツやFAQなどで、文章中の一部だけを強調したい場合に適しています。

Studio CMSで作成したコンテンツの本文をエディタ上に表示する際にも、リッチテキストボックスを使用します。

リッチテキストボックスを追加する

リッチテキストボックスではマークダウン記法を利用できます。

使用可能なマークダウンの入力方法について詳しくは、次のヘルプ記事をご覧ください。

リッチテキスト内のテキストに対して、色やフォントなどのデザイン編集ができます。

設定は、右パネル上の[コンテンツ]タブで行います。

色の設定にはカラーパレットを使用します。

設定方法の詳細は、カラーパレットで色を設定するをご覧ください。

テキストにはグラデーションのスタイルも設定できます。

グラデーションを適用したテキストは、ブロック単位で色の変化を表現できます。

テキストグラデーションと併用できない設定

グラデーションを設定しているテキストボックスでは、次の設定は利用できません。

また、箇条書き(<ul>, <ol>)部分に適用すると、項目記号（・や数字）が非表示になります。

アニメーションとブラウザ互換性

グラデーションにトランジション（時間、遅延、イージング）を設定すると、なめらかな色の変化を表現できます。

この表現にはCSSの「@property」ルールを利用しており、一部ブラウザではサポートされていません。

対応状況の詳細は「"@property" | Can I use... Support tables」で確認できます。

条件付きスタイル適用時の注意

条件付きスタイルで「単色 → グラデーション」への変化を設定した場合、文字が一瞬消えるように見えることがあります。

この挙動は仕様によるもので、現時点では回避が難しいため、状態変化の内容や演出を検討した上で利用してください。

その他の注意点

グラデーションの設定は、テキストブロック全体に一括で適用されます。

箇条書きに設定した場合の項目記号の非表示など、表示崩れがないかをライブプレビューや公開サイトで必ず確認してください。

テキストボックスと同様に、フォントを設定できます。フォントの設定方法は、以下のヘルプ記事を参照してください。

「太字・斜体・打ち消し線・下線・リンク」の特殊スタイルをテキストの一部に適用できます。特殊スタイルを設定した部分は、個別選択が可能になり、[コンテンツ]タブからデザイン編集が可能です。