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

CMSプロパティ:リッチテキスト(本文)

Studio CMSの「記事タイプ」モデルのCMSアイテムで利用できるリッチテキストプロパティ(本文)の編集方法を説明します。書式設定、画像・動画・PDFの追加と各メディアの詳細設定、マークダウンやコメントなどの機能について解説します。

リッチテキストプロパティは、CMS記事アイテムの本文の役割を持つプロパティです。テキストのほか、画像・動画・PDF・テーブルなどを配置できます。

CMS記事アイテムにデフォルトで設置されているリッチテキストプロパティは、プロパティ名があらかじめ「本文(Body/Contents)」に設定されています。

Point: リッチテキストプロパティは、記事タイプモデルのCMSアイテムでのみ利用できます。


リッチテキストプロパティの詳細編集画面を開く

リッチテキストプロパティは、CMSアイテムの詳細編集画面から編集します。

  1. CMSダッシュボードから、対象の記事タイプモデルを開きます。

  2. CMSアイテム一覧でアイテムのタイトルにカーソルを載せます。

  3. 表示された矢印ボタンをクリックして、その記事アイテム本文の詳細画面を開きます。


リッチテキストプロパティにコンテンツを挿入する

リッチテキストプロパティ内には、テキストの記入だけでなく、画像、動画、PDFといったメディア要素や、リスト、テーブル、目次などのブロック要素を追加できます。記事の内容に合わせて追加することで、読みやすく整理された記事コンテンツを作成できます。

  1. リッチテキストプロパティ内左側の[+]ボタンをクリックします。

  2. 挿入したい要素を選択します。

画像

リッチテキスト内に画像を挿入します。詳細な設定や注意点は、後述の画像の詳細設定を参照してください。

動画

リッチテキスト内に動画を挿入します。詳細な設定や注意点は、後述の動画の詳細設定を参照してください。

PDF

リッチテキスト内にPDFをリンクとして挿入します。詳細な設定や注意点は、後述のPDFの詳細設定を参照してください。

埋め込みコード

リッチテキスト内に外部サービスの埋め込みコード(SNSの投稿など)を挿入します。

テーブル

リッチテキスト内に表を挿入します。

箇条書きリスト

本文内に箇条書きのリストを挿入します。

番号付きリスト

リッチテキスト内に番号付きのリストを挿入します。

番号は自動で付与されます。

見出し

リッチテキスト内に中見出しを挿入します。適切な見出し構造は、アクセシビリティやSEO対策、目次の生成に役立ちます。

引用

リッチテキスト内に引用用のブロックを挿入します。

区切り線

リッチテキスト内にセクションを分ける罫線を挿入します。

目次

見出しと連動して自動生成された目次を、リッチテキストプロパティごとに挿入します。一つの記事内に複数のリッチテキストプロパティが存在する場合は、目次も複数生成されます。


テキストの書式・マークダウン・インラインスタイル

入力済みのテキストの書式を変更するには、リッチテキスト左に表示されるアイコンをクリックします。テキスト内で見出しや引用を適切に使い分けることで、長い記事でも構造が分かりやすくなります。

テキストの一部を選択すると、「太字、斜体、打ち消し線、コード、リンク、コメント」を適用できます。

スクリーンショット:特殊スタイル・リンク設定・コメント機能を使う様子。

Tips:マークダウン記法の利用

書式メニューの右側には[## space]などのマークダウンガイドがあります。これを編集エリア上でのようにテキスト入力をすれば、その都度メニューから選択せずに書式を変更できて効率的です(例:「## text」)。詳しくはマークダウン記法の記事をご覧ください。


画像の詳細設定

リッチテキスト内に挿入した画像をクリックすると、右上に画像専用の設定メニューが表示されます。リンクや配置、Altテキストを設定して、記事としての品質やアクセシビリティを高めます。

リンク設定

画像クリック時の遷移先URLを設定します。

コメント

自分用のメモや、共同編集者宛のメッセージを追加します。

ALT(代替テキスト)

画像の内容を検索エンジンや読み上げ機能に伝えるテキストです。SEOやアクセシビリティの観点から、入力を推奨します。
ALTの詳細は、画像ボックス:altを設定するを参照してください。

左揃え/中央揃え/右揃え

CMSアイテムの編集画面で設定した配置設定は、デザインエディタ上での配置設定より優先されます。

置き換え

別の画像に差し替えます。

注意:外部サービスから画像を移管した場合

  • Googleドキュメントなどの他サービスから画像をペーストした場合 アイテムが保存されないエラーが発生する場合があります。画像はコピー&ペーストせず、Studioにアップロードして追加することを推奨しています。

  • Wordpressなどの他サービスからインポートした場合 [外部サーバーを参照しています]と表示されることがあります。 外部サーバーへの参照ができなくなったり、参照元の画像が削除された場合、Studio上で画像が表示されなくなります。これを防ぐには、Studioに画像をアップロードして差し替えてください。


動画の詳細設定

リッチテキスト内に挿入した動画をクリックすると、右上に詳細設定メニューが開きます。再生方法やポスター画像を設定して、記事に適した再生体験に整えます。

コメント

自分用のメモや、共同編集者宛のメッセージを追加します。

左揃え/中央揃え/右揃え

CMSアイテムの編集画面で設定した配置設定は、デザインエディタ上での配置設定より優先されます。

再生設定

プレイヤーの表示有無、自動再生、ミュート、ループ再生、インライン再生、PiPの無効化を設定します。
詳細:動画ボックス > 動画の設定項目

ポスター画像

動画読み込み前に表示する画像を設定します。設定しない場合は、1コマ目のフレーム画像が表示されます。

置き換え

動画のアップロードや置き換えをします。


PDFの詳細設定

リッチテキスト内に挿入したPDFは、リンクとして扱われます。資料ダウンロードや詳細ドキュメントへの導線として利用したい場合に便利です。

リンク

PDFのURLのコピーや、遷移時に新規タブで開く設定、検索エンジンにPDFリンクを無視させる設定ができます。

アイコン

PDFリンクの先頭に表示されるアイコンの表示/非表示切り替えや、アイコン画像のアップロードをします。

コメント

自分用のメモや、共同編集者宛のメッセージを追加します。

置き換え

PDFのアップロードや置き換えをします。


新しいリッチテキストプロパティを追加する

リッチテキストプロパティの追加は、本文を複数箇所に分けて配置したい場合に行います。

通常の記事は、デフォルトのリッチテキストプロパティ(本文)1つのみで十分に構成できます。追加するとそれぞれボックス要素への紐付けが必要になり運用が複雑になるため、レイアウト上の必要性がある場合にのみ追加します。

Point:複数の見出しや画像を含む記事でも、作成した記事コンテンツを1つのボックス内にまとめて表示する場合では、リッチテキストプロパティの追加は不要です。

リッチテキストプロパティ追加のユースケース

リッチテキストプロパティを追加すると、記事コンテンツをエディタ上の複数のボックスに分けて表示できます。以下の例のように、記事本文の途中に別の要素を挟みたい場合や、本文を分割してレイアウトしたい場合に利用します。

  • 記事本文の途中に、同モデル内で全記事共通の画像やボタンを設置したい場合

  • 記事本文を、横並びのレイアウトで表現したい場合

リッチテキストプロパティを追加する手順

  1. 対象のCMSアイテムの詳細編集画面を開きます。

  2. 詳細編集画面の下部にある[リッチテキストを追加]をクリックします。

注意:リッチテキストプロパティの追加は、同じモデル内のすべてのCMSアイテムに反映されます。

注意:目次の分割生成

目次はリッチテキストプロパティごとに生成されます。記事本文を複数のリッチテキストプロパティに分けて作成すると、目次も分割されるため、記事全体の見出しをまとめた一つの目次は作成できません。

リッチテキストプロパティの名前を編集する

リッチテキストプロパティのラベル(プロパティ名)は、CMSアイテムの詳細編集画面から変更できます。

  1. プロパティ名横の3点メニュー[…]をクリックします。

  2. ペンのアイコンをクリックして、プロパティ名を編集します。

リッチテキストプロパティを削除する

リッチテキストプロパティのうち、後から追加したものに限り、プロパティの削除が可能です。

注意:リッチテキストプロパティ削除の影響範囲

リッチテキストプロパティを削除すると、同モデル内のすべてのCMSアイテムからそのプロパティと、入力内容が削除されます。情報の復元はできません。

  1. プロパティ名横の3点メニュー[…]をクリックします。

  2. [削除]を選択します。

    ※ 初期状態から用意されているリッチテキストプロパティ(デフォルト名:本文)は削除できません。

  3. 表示されたポップアップの注意事項をよく確認し、[削除]ボタンをクリックします。


記事全体の表示デザインについて

本文の内容や構成はCMSダッシュボードのCMSアイテムの詳細編集画面で編集し、文字色・背景色・余白などのデザインはデザインエディタで調整します。

  1. このCMSアイテムを包括するCMSモデルを確認します。

  2. デザインエディタ上で動的ページを作成し、該当のCMSモデルを紐付けます。

  3. 動的ページ上にボックスを設置し、各CMSアイテムに設定されたCMSプロパティと、それを表示するボックスを紐付けます。

詳しくは、以下の記事を参照してください。

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