料金プランを有効化して学習を始めましょう。

Rich text

リッチテキストの要素を使用して、長い形式のコンテンツを作成します。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

リッチテキストエレメント（RTE）を使って長文コンテンツを作成する。

Rich text element（RTE）は、ブログ記事、アバウトページ、経歴など、長文のコンテンツを作成するのに最適な要素です。個々の見出し、段落、リスト、画像要素を追加する代わりに、リッチテキスト要素をダブルクリックして、これらの異なるコンテンツ要素を直接作成することができます。

Rich text要素は、コンテンツ編集者がエディター内でリッチコンテンツを編集することを容易にします。

Rich text要素を追加する方法

Rich text要素を追加するには、 add panel（A）からデザイナーキャンバスにドラッグします。中のコンテンツを追加または編集するには、リッチテキスト要素をダブルクリックするか、要素を選択してキーボードの Enter キーまたは Return キーを押します。

リッチテキスト要素内に以下の要素を追加できます：

  • Paragraphs
  • Headings (H1-H6)
  • Images
  • Image captions
  • Image alt attributes
  • Custom code
  • Block quotes
  • Unordered lists (bulleted)
  • Ordered lists (numbered)
  • Videos (Youtube, Vimeo)
  • Rich media (Google maps, SoundCloud, Imgur, Giphy, Codepenなど)

テキスト要素に書式を追加することもできます：

  • Links (URL, page, email, etc.)
  • Bold text
  • Italic text
  • Superscript、 subscript text

テキスト・コンテンツの追加と書式設定

RTE内で入力を開始し、見出し、ブロック引用符、太字または斜体のテキスト、リンクを作成するためにテキストに書式を追加することができます。

paragraphsの追加方法

他のテキストエディタと同じように、キーボードのEnterを押すと新しい行に新しい段落が作成され、そこで入力を続けることができます。複数の段落を追加するには、段落の末尾でEnterキーを押します。

見出しと引用符の付け方

見出しを作成するには、段落内の任意のテキストを選択し、見出し（H1～H6）オプションを選択します。

ブロック引用の作成も同様です。

テキストのフォーマットとリンクの追加方法

テキスト要素（見出し、段落、キャプションなど）のどの部分でも、テキストの一部を選択して希望の書式オプションを適用することで、太字、斜体、上付き、下付き、リンクなどの書式を設定できます。

RTE内でリンクを作成する場合、URL、ページ、ページセクション、Eメール、電話番号のいずれかを選択できます。

キーボードショートカット

キーボードショートカットを使えば、コンテンツの作成が少し速くなります：

  • Shift + Space は、改行しないスペース ( ) を挿入
  • Shift + Enter で改行 (<br>)
  • Command + B（WindowsではControl + B）はテキストを太字にします。
  • Command + I (Windows では Control + I) はテキストを斜体にします。
  • Command + K (Windows では Control + K) でハイパーリンクを挿入できます。

メディアコンテンツ、カスタムコード、リストの追加方法

テキストが改行されると、「プラス」ボタンが表示されます。このボタンをクリックすると、挿入メニューが表示され、画像、ビデオ、その他のリッチメディア、カスタムコード、箇条書きリストまたは番号付きリストを追加するオプションが表示されます。

画像、ビデオ、リッチメディアの追加

RTEのすべてのメディア要素はレスポンシブで、コンテンツのアスペクト比を尊重します。YouTube、Vimeo、Dailymotionの動画サポートが強化され、開始時間をカスタマイズできるようになりました。サポートされているリッチメディア・タイプのリストはこちらです：

  • YouTube
  • Vimeo
  • Instagram post
  • Facebook post
  • DailyMotion
  • Kickstarter
  • TED
  • Wistia
  • Livestream
  • Twitch
  • Hulu
  • Imgur albums
  • Google maps
  • JSFiddle
  • Codepen
  • Scribd
  • SlideShare
  • Spotify playlists and charts
  • Giphy
  • SoundCloud
  • And more!

メディア設定

各メディア要素のサイズは、画像設定のプリセットを使用するか、ツールバーの「レンチ」アイコンをクリックして特定のピクセル値またはパーセンテージ値に合わせることができます。オプションで画像の下にキャプションを追加することもできます。

Alt text

画像にaltテキストを追加するには、altテキストを追加したい画像を選択し、ツールバーの「レンチ」アイコンをクリックし、altテキストを入力します。 説明的なaltテキストの書き方については、こちらをご覧ください。

カスタムコードの追加方法

挿入メニューには、カスタムコードを追加するボタンがあります。

カスタムコードを使用して、HTMLでテーブルや仕切りを作成したり、リッチテキストコンテンツの一部をターゲットCSSでスタイル設定したり、JavaScriptでサイトの機能を拡張したり（カスタマイズされたGoogleマップやGoogle AdSense広告など）、インタラクティブなサードパーティコンテンツ（Twitter、Soundcloud、Airtableなどの埋め込みなど）でオーディエンスを魅了することができます。

手順：

  1. カスタムコードを追加したい場所にカーソルを置く。
  2. “プラス”アイコンをクリックして挿入メニューを開き、カスタムコードボタンをクリックする。
  3. コードを追加する

リストの追加方法

挿入メニューには、順序なしリスト（箇条書き）と順序付きリスト（番号付き）を追加するオプションがあります。

挿入メニューから、またはダッシュ（-）の後にスペースを入力して、箇条書きリストを追加することができます。

番号付きリストを作成するには、挿入メニューを使用するか、整数の後にピリオドとスペースを入力します（例：1. 、3. 、10. ）これは、リスト項目の間にメディアを追加した後に番号付きリストを続けたい場合に特に便利です。

他のソースからのリッチテキストコンテンツ

他のサイトやGoogleドキュメントなどからリッチテキスト・コンテンツを貼り付けることができます。フォーマットやリンクはすべてリッチテキスト要素内に貼り付けられます。デザイナーでリッチテキスト要素に貼り付ける場合、またはコレクションマネージャの詳細ビュー（デザイナーとエディタの両方）でCMSアイテムのリッチテキストフィールドに貼り付ける場合、画像も貼り付け時にインポートされます。

重要：他のソースからリッチテキストのコンテンツを貼り付けると、背景色や隠し文字など、不要な書式も一緒に貼り付けられる可能性があります。

不要な書式が貼り付けられないようにするには、まずリッチテキストのコンテンツをプレーンテキストエディタに貼り付けてから、リッチテキスト要素にコピー＆ペーストするか、キーボードショートカットを使って書式なしのテキストを貼り付けます（MacではCommand + Option + Shift + V、WindowsではControl + Shift + V）。このキーボードショートカットは、太字、斜体、ハイパーリンクを含むすべての書式をテキストから取り除くことに注意してください。

Rich text要素でコンテンツをスタイルする方法

リッチテキスト要素内のテキスト要素やメディア要素は、コンテンツエディターがいつでも作成したり削除したりできるため、リッチテキスト要素内の要素のスタイリングは、他の独立した要素のスタイリングとは異なります。

基本的なスタイリング

RTE要素はそれぞれのHTMLタグからスタイルを継承します。RTE内の要素にスタイルを設定する最も簡単な方法は、入れ子になった要素を選択し、そのタグにスタイルを設定することです。

RTE内にコンテンツを入力または追加している場合、RTE内の各要素を選択することはできません。RTEを非アクティブにするには、Escapeを押します。すると、RTE内に入れ子になっている要素を選択してスタイルを設定できるようになります。

RTEにネストされた要素にスタイルを付ける：

  1. RTE内のエレメントを選択する
  2. スタイルパネルのセレクタフィールドをクリックするか、Command + Enterキー（WindowsではControl + Enterキー）を押します。
  3. メニューからタグ（例：すべての段落）を選択する。
  4. タグのスタイル

この方法では、サイト全体でその要素のデフォルト・スタイルを編集することになります。サイト上のすべての要素にスタイルを設定したくない場合は、以下の「高度なスタイル設定」を参照してください。

高度なスタイリング

リッチテキスト要素にクラスを追加すると、そのRTEインスタンスに固有のテキストスタイルを作成できます。これらのネストされたタグのスタイルは、同じクラスが適用されたRTE内の要素、または同じクラスが適用された要素の子要素に影響することに注意してください。以下の手順に従ってください：

  1. RTEを選択し、クラスを与える。
  2. RTE内の任意の要素を選択
  3. スタイルパネル（S）へ
  4. Selector fieldをクリック
  5. メニューからタグ（例：All rapagraph）を選択する。
  6. "class name "内のネストセレクタをクリックする。
  7. 要素のスタイル
注: 入れ子になったタグのスタイルは、同じクラスが適用されたRTEだけでなく、同じクラスが適用された要素内のすべての要素に影響します。特定のクラスを持つRTE内の入れ子タグにのみスタイルを作成したい場合は、RTE専用のクラスを作成するか、コンボ・クラスを使用することをお勧めします。

ダイナミック・リッチテキストのスタイル設定方法

リッチテキスト要素は、コレクション内のリッチテキストフィールドに接続できます。RTEが接続されると、RTE内のコンテンツのソースとなるCMSを除き、テキスト要素を選択または編集できなくなります。

接続されている RTE にスタイルを設定するには、リッチ テキスト フィールドから切断（バインド解除）し、ネストされた要素にスタイルを設定してから、再度接続（バインド）することをお勧めします。接続されているRTEにクラスを適用するだけであれば、接続を解除せずに行うことができます。

プロのヒント： スタイルガイドのページでリッチテキスト要素を作成すると、デザインを変更するたびにCMSに接続したり切断したりすることなく、RTE内の要素にスタイルを設定できます。これを行うには、スタイルガイドの RTE に、コレクションページで設定したのと同じクラスを設定します。これで、コレクションページのリッチテキスト要素内の要素のスタイルを更新する必要があるときはいつでも、スタイルガイドのページに移動して、対応するRTEでそれらの要素にスタイルを設定できます。