リッチテキスト要素の概要 - Webflow ヘルプ

リッチテキスト要素 (RTE) を使用して長文コンテンツを作成します。

リッチテキスト要素 (RTE) は、ブログ記事、紹介ページ、伝記などの長文コンテンツを作成するのに最適な要素です。個別に見出し、段落、リスト、画像要素を追加する代わりに、リッチテキスト要素をダブルクリックしてテキスト、カスタムコード、メディア要素を作成およびフォーマットできます。

サイトにリッチテキスト要素を追加する方法

リッチテキスト要素は、追加パネル (A) からデザイナーのキャンバスにドラッグして追加できます。内容を追加または編集するには、リッチテキスト要素をダブルクリックするか、要素を選択してキーボードのEnterまたはReturnを押します。

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

• 段落
• 見出し (H1-H6)
• 画像
• 画像キャプション
• 画像の代替テキスト属性
• カスタムコード
• 引用ブロック
• 順序なしリスト (箇条書き)
• 順序付きリスト (番号付き)
• 動画 (YouTube, Vimeo)
• リッチメディア (Googleマップ, SoundCloud, Imgur, Giphy, Codepenなど)

テキスト要素に追加のフォーマットを適用することもできます：

• リンク (URL, ページ, メールなど)
• 太字
• 斜体
• 上付き文字と下付き文字
• コード

スラッシュコマンド

RTE内でコンテンツを編集しているときに、スラッシュコマンドを使用してWebflow AIアシスタントを使ってコピーを素早く生成したり、新しいコンテンツ要素を追加したりできます。スラッシュコマンドを使用するには、キーボードで/ (スラッシュ) を押し、AIアシスタントを使用して文脈に関連するテキストを追加するためにコピーを生成をクリックするか、追加メニューから目的の要素を選択するか、要素のリストを絞り込むために入力を開始します：

• 見出し (H1–H6)
• 番号付きリスト
• 箇条書きリスト
• 段落
• 引用ブロック
• 画像
• 動画
• リッチコンテンツ
• HTML埋め込み
• コードブロック

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

RTE内で入力を開始し、見出し、引用、太字や斜体、上付き文字や下付き文字、リンクを作成するためにテキストに書式を追加できます。

Webflow AIアシスタントを使用してテキストコンテンツを生成する

AIアシスタントを使用してRTEにコンテキストに関連するコピーを素早く追加するには：

1. RTEを右クリック
2. コンテキストメニューからコピーを修正を選択
3. （オプション）生成したいコピーを説明するプロンプトを入力
4. "プロンプトを送信"アイコンをクリック
5. 生成されたコピーを受け入れるには完了をクリック

Webflow AIアシスタントを使用してコンテンツを生成および編集する方法について詳しくはこちら。

段落の追加方法

他のテキストエディタと同様に、キーボードのEnterを押すと、新しい行に新しい段落が作成され、入力を続けることができます。複数の段落を追加するには、段落の終わりでEnterを押します。Webflow AIアシスタントを使用して、テキストを追加および洗練することもできます。

見出しと引用の追加方法

見出しを作成するには、段落内の任意のテキストを選択し、見出し（H1-H6）オプションを選びます。引用を作成する場合も同様です。

テキストの書式設定とリンクの追加方法

テキスト要素の任意の部分（例：見出し、段落、キャプションなど）は、テキストの一部を選択し、希望の書式オプションを適用することで、太字、斜体、上付き文字、下付き文字、リンクで書式設定できます。インラインテキストの書式設定について詳しくはこちら。

RTE内でリンクを作成する際、URL、ページ、ページセクション、メール、または電話番号を選択することができます。

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

これらのキーボードショートカットは、リッチテキストコンテンツを素早くフォーマットするのに役立ちます：

• 改行なしスペースを挿入: Shift + Space
• 改行を挿入: Shift + Enter
• 太字: Command + B （WindowsではControl + B）
• 斜体: Command + I （WindowsではControl + I）
• ハイパーリンクを挿入: Command + K （WindowsではControl + K）

RTEで編集中に、スラッシュコマンドショートカット（“/**”）を使用してコンテンツ要素を素早く追加できます。また、Markdownショートカットも使用できます：

• 斜体: *text* または _text_
• 太字: **text** または __text__
• 太字＆斜体: ***text*** または ___text___
• ハイパーリンクを挿入: [hyperlink text](https://www.url.com)
• 見出し1: # + Space
• 見出し2: ## + Space
• 見出し3: ### + Space
• 見出し4: #### + Space
• 見出し5: ##### + Space
• 見出し6: ###### + Space
• 引用: > + Space
• 箇条書きリスト: - + Space
• 番号付きリスト: 1. + Space

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

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

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

RTE内のすべてのメディア要素はレスポンシブであり、コンテンツのアスペクト比を尊重します。YouTube、Vimeo、Dailymotionの動画サポートは、カスタム開始時間を許可するように強化されています。以下はサポートされているリッチメディアタイプの一部です：

• YouTube
• Vimeo
• Instagram投稿
• Facebook投稿
• DailyMotion
• Kickstarter
• TED
• Wistia
• Livestream
• Twitch
• Hulu
• Imgurアルバム
• Googleマップ
• JSFiddle
• Codepen
• Scribd
• SlideShare
• Spotifyプレイリストとチャート
• Giphy
• SoundCloud
• その他多数！

メディア設定

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

代替テキスト

画像に代替テキストを追加するには、画像を選択し、「レンチ」アイコンをクリックして、代替テキストを入力します。説明的な代替テキストを書く方法についてもっと学ぶ。

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

挿入メニューにはカスタムコードを追加するボタンがあります。カスタムコードを使用して、HTMLでテーブルや区切り線を作成したり、CSSでコンテンツの一部をスタイル設定したり、JavaScriptでサイトの機能を拡張したり、サードパーティのコンテンツを埋め込んだりできます。

手順:

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

リストの追加方法

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

• 箇条書きリスト: 挿入メニューを使用するか、ダッシュ - とスペースを入力。
• 番号付きリスト: 挿入メニューを使用するか、整数とピリオド、スペースを入力。
• リストをネスト: 項目を選択してTabを押す。ネスト解除: 選択してShift + Tabを押す。

他のソースからリッチテキストコンテンツを追加する方法

他のサイトやワードプロセッサ（Google Docsなど）からリッチテキストを貼り付けることができます。デザイナーまたはCMSのリッチテキストフィールドに貼り付けると、書式設定、リンク、画像が保持されます。

要素の並べ替えと削除方法

リッチテキスト要素内の要素は、キャンバスやナビゲーター上でドラッグ＆ドロップするか、キーボードショートカットを使用して並べ替えることができます。要素を削除するには、選択してBackspaceまたはCommand + X（WindowsではControl + X）を押します。

RTEコンテンツのスタイル設定方法

リッチテキスト要素内の個別要素のスタイル設定

リッチテキスト要素内の要素をWebflowの他の要素と同様にスタイル設定します。キャンバス上で選択し、スタイルパネルに移動し、クラスを適用または作成してスタイルを設定します。

HTMLタグを使用したリッチテキスト要素内の要素のスタイル設定

RTE要素はHTMLタグからスタイルを継承します。ネストされたセレクターを使用してスタイルを設定し、同じクラスを持つRTEにデフォルトスタイルを限定します。

手順:

1. キャンバス上でRTEを選択
2. RTEにクラスを付与
3. RTE内の要素を選択
4. スタイルパネル (S) に移動
5. セレクターフィールドをクリック
6. HTMLタグを選択
7. 「クラス名」内にセレクターをネストをクリック
8. 希望のスタイルを設定

動的リッチテキストのスタイル設定方法

リッチテキスト要素はコレクション内のリッチテキストフィールドにバインドできます。スタイル設定は、接続を解除してスタイル設定し、再バインドするか、クラスを適用してスタイル設定し、接続を維持するのが最適です。動的リッチテキストについて詳しく学ぶ。

Webflowヘルプに戻る