メインコンテンツにスキップ
リッチテキストボックス

部分的なスタイル変更ができるテキストボックス

Saika avatar
対応者:Saika
2か月以上前に更新

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

デザインエディター左側の追加パネルから、ドラッグ&ドロップでリッチテキストボックスが配置します。

マークダウン記法

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

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

スタイルの設定

リッチテキスト内のブロックに対して、色やフォントなどのスタイルが設定できます。

加えて、テキストの一部を選択して「太字・斜体・打ち消し線・下線・リンク」の特殊スタイルが設定いただけます。

特殊スタイルを設定した部分は、下記のように選択できるようになります。選択した状態でスタイルバーからスタイルの変更が可能です。テキストへグラデーションの設定も可能です。テキストグラデーションを適用する際には、以下の点にご注意ください。

テキストグラデーション設定時の注意点

  • テキストグラデーションと併用できない設定
    グラデーションを設定しているテキストボックスでは、以下の設定はできません。

    • テキストボックスの背景色

    • 下線

  • アニメーションの設定について

    • ブラウザの互換性
      グラデーションにトランジション(時間、遅延、イージング)を設定するとなめらかな色の変化が表現できます。なおこの表現にはCCSの「@property」ルールを利用しており、一部ブラウザではサポートされていません。詳細は、以下のサイトをご覧ください。 "@property" | Can I use... Support tables

    • 条件付きスタイルで「単色 → グラデーション」変化を設定した際、文字が一瞬消えてしまいます。

  • その他

    • 箇条書き(<ul>, <ol>)箇所に設定すると、項目(・や数字)が消えます。

    • グラデーションの設定は、ブロック全体に適用されます。

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