microCMS

リッチエディタで文字サイズを設定できるようになりました

りゅーそう

本日の更新情報をお知らせします。

リッチエディタで文字サイズを設定できるようになりました!
今回のアップデートにより、リッチエディタ内のテキストのstyleにfont-sizeを適用できるようになります。

APIスキーマの設定方法

リッチエディタで文字サイズの設定を利用するには、以下の手順で設定を行ってください。
まず、APIスキーマの設定画面にて、リッチエディタフィールドの[詳細設定]を開きます。
APIスキーマ設定画面のスクリーンショット。リッチエディタフィールドの「詳細設定」が強調されている
「フォントサイズのプリセット」の項目の[追加する]ボタンをクリックします。
リッチエディタ詳細設定のサイドモーダルが開いている。フォントサイズのプリセットの項目「追加する」ボタンが強調されている
プリセットを登録します。
表示名:リッチエディタのツールバーで実際に表示される名称なので、管理しやすい表示名にしてください。
サイズ:実際に適用される font-size の値です。%単位での登録になります。
フォントサイズのプリセット「表示名・サイズ」を登録している。上から「テキスト(大)・120」「テキスト(中)・80」「テキスト(小)・60」と追加している画像
入力が完了したら、APIスキーマの変更を保存してください。
以上で設定は完了です。

リッチエディタでの利用方法

リッチエディタのツールバーにある「文字サイズ」アイコンをクリックすると、先ほど設定したフォントサイズのプリセット一覧が表示されます。
リッチエディタの文字サイズアイコンをクリックしている
適用したいテキストを選択し、プリセットをクリックすると、その文字サイズが反映されます。適用されたテキストは、リッチエディタ内でも文字サイズが反映されて表示されます。
エディタ上の文字に文字サイズが適用され大きく表示されている
コンテンツを保存すると、レスポンスに font-size が含まれるようになります。

<p><span style=\"font-size: 120%\">文字サイズ</span></p>


さらに、文字サイズの他に文字色カスタムclassなど、 span タグが生成される他のスタイルと組み合わせると、以下のようなレスポンスになります。

<p><span style=\"color: #ea0303; font-size: 120%\" class=\"class1\">文字サイズ</span></p>

エディタ上のテキストに文字サイズ・文字色・カスタムクラスのスタイルが適用されている

おわりに

今回のアップデートにより、リッチエディタでテキストの文字サイズを設定できるようになりました。文字サイズの変更はリッチエディタ内にも反映されるため、変更内容が一目で確認でき、より直感的に編集していただけるかと思います。
ぜひご活用ください!

まずは、無料で試してみましょう。

APIベースの日本製ヘッドレスCMS「microCMS」を使えば、 ものの数分でAPIの作成ができます。

microCMSを無料で始める

microCMSについてお問い合わせ

初期費用無料・14日間の無料トライアル付き。ご不明な点はお気軽にお問い合わせください。

お問い合わせ

microCMS公式アカウント

microCMSは各公式アカウントで最新情報をお届けしています。
フォローよろしくお願いします。

  • X
  • Discord
  • github

ABOUT ME

りゅーそう
1994年生まれ。 前職は高校地理歴史科教員。2021/9〜microCMS入社。React/TypeScriptが好きです。