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

Studio CMSのリッチテキストプロパティ(本文)で、色・サイズ・余白・フォントなどを変更したい

CMS記事本文(リッチテキストプロパティ)の文字の色・サイズ・余白・フォントなどの設定は、CMSダッシュボードではなくデザインエディタで行います。画面の見分け方と設定方法を案内します。

CMSダッシュボードとデザインエディタはそれぞれ役割が異なり、編集できる項目が違います。どちらの画面で何を設定するかを確認した上で、設定手順を進めてください。

注意:デザインエディタで編集するための前提
CMSダッシュボードで作成したCMS記事アイテムをデザインエディタで編集するには、記事アイテムを表示するための動的ページ(CMS記事ページ)を作成しておく必要があります。

CMS記事ページが未作成の場合は、動的ページ:Studio CMSの記事アイテムを表示する、CMS記事ページを作成するを参照してください。

CMSダッシュボードとデザインエディタの役割

Studio CMSでは、データの作成・管理・記事の入稿作業はCMSダッシュボード内で、ページの作成・デザインはデザインエディタ内で行います。

Point:Studio CMSのコンテンツ管理の仕組みについては、Studio CMSとはを参照してください。

CMS記事本文(リッチテキストプロパティ)の編集は、それぞれ以下の場所で行います。

CMSアイテムの詳細編集画面(CMSダッシュボード内)

  • 文字の色・背景色の設定

  • フォントの設定

  • 文字サイズの設定

  • 余白(マージン・パディング)の設定


記事本文(リッチテキストプロパティ)のデザイン設定する手順

手順1. 編集中の画面を確認する

デザイン設定はデザインエディタで行います。編集中の画面を確認し、CMSの詳細編集画面を開いている場合には、デザインエディタに移動して設定を行います。

  1. 現在編集中の画面がどちらの画面であるかを確認します。それぞれ、以下のような設定項目が表示されています。

    • デザインエディタの場合:画面左にメニューアイコンが表示されている。

    • CMSアイテムの詳細編集画面の場合:

      • 画面の最上部に[ホーム][CMS][フォーム][アナリティクス][プラン&お支払い]などのダッシュボードメニューが表示されている。

      • 画面右にプロパティが表形式で表示されている。

  2. CMSアイテムの編集画面を開いている場合には、右上部の[デザインエディタ]ボタンをクリックして、デザインエディタに移動します。

  3. ページパネルを開き、編集したいCMS記事アイテムが紐付いた動的ページ(CMS記事ページ)を選びます。

    ページ名を変更している場合は、以下の画像とは表示が異なります。

  4. 対象のページが作成されていない場合には、動的ページ:Studio CMSの記事アイテムを表示する、CMS記事ページを作成する を参考にCMS記事ページを作成してください。

手順2. デザインエディタで設定する

文字の色・サイズ・余白・フォントの設定は、全て右パネルで行います。

  1. 記事本文(リッチテキストプロパティ)が紐付いたリッチテキストボックスを選択します。

  2. 右パネルで[コンテンツ]タブを開きます。ボックス要素を選択してもパネルが表示されない場合には、右パネルを開いてください。

  3. 変更したい項目に応じて、以下の記事を参照し設定をしてください。

  4. 公開中のサイトに変更を加えた場合には、公開パネルでサイトを更新するまで、公開中のサイトには反映されません。

Tips:色やフォントなどをまとめて登録する

よく使う色やフォントの組み合わせは、テキストスタイルカラースタイルとして登録できます。登録したスタイルを選択するだけで、同じ設定をほかの箇所でも再利用できます。

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