メインコンテンツにスキップ

リッチテキストボックス

リッチテキストボックスを使用すると、テキストの一部にだけスタイルを適用したり、マークダウン記法で入力できます。この記事では、長文コンテンツやStudio CMSの本文表示での活用方法と注意点を説明します。

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

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

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

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

  1. デザインエディタ左のナビゲーションメニューで[追加]アイコンを選択します。

  2. [基本]から[RichText]を選択します。

    クリックすると、スクリーン上にリッチテキストボックスが配置されます。


マークダウン記法

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

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


リッチテキストボックス内のコンテンツにデザイン設定をする

リッチテキスト内のテキストや画像に、余白や外観(色・フォント・角丸など)の編集を加えることができます。

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

ボックス内テキストのデザインを編集する

  1. リッチテキストボックスを選択します。

  2. 右パネルで[コンテンツ]タブをクリックします。

    パネルが閉じている場合には、右パネルを開いてください。

リッチテキストに色を設定する

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

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

注意:リッチテキストにグラデーションを設定する場合

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

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

併用できない設定やブラウザの互換性など、テキストグラデーションに共通する注意点は、テキストの配置やデザインを編集するを参照してください。

リッチテキストにフォントを設定する

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

リッチテキストの一部に特殊スタイルを設定する

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

リッチテキスト内の画像にデザインを設定する

リッチテキストボックス内の画像には、余白や角丸などを設定できます。

  1. リッチテキストボックス内の画像をダブルクリックして選択します。

    スクリーン上で、対象の画像に<figure>と表示されていることを確認します。

  2. 右パネルで[ボックス]を開きます。パネルが閉じている場合は、右パネルを開いてください。

  3. [レイアウト]で余白を、[外観]で角丸や枠線などを設定します。

注意:角丸が反映されない場合

角丸を設定しても反映されない場合は、[ボックス]の[ポジション]で、画像の[はみ出し]を[非表示]に設定してください。

こちらの回答で解決しましたか?