詳細なテキストコンポーネントの概要

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

詳細テキスト コンポーネント (DTC) は、記事、ページの説明、プロフィールなどの広範なコンテンツを作成するのに最適な要素です。個別のタイトル、セクション、段落、またはビジュアルを挿入する代わりに、詳細テキスト コンポーネントをダブルタップして、テキスト、カスタマイズされたコード、およびメディア コンポーネントを生成してスタイルを設定できます。

このガイドでは、次のことを理解できます。

  1. プラットフォームに詳細なテキストコンポーネントを導入する方法
  2. テキストコンテンツを挿入してデザインする方法
  3. メディアコンテンツ、カスタマイズされたコード、リストを含める方法
  4. コンポーネントを再編成および消去する方法
  5. DTC コンテンツをカスタマイズする方法

プラットフォームに詳細なテキストコンポーネントを導入する方法

詳細テキストコンポーネントを組み込むには、 パネルを追加 (A)デザイナーへ キャンバスコンテンツを追加または調整するには、詳細テキストコンポーネントをダブルタップするか、コンポーネントを選択して 入力 または 戻る キーボードで。

詳細テキスト コンポーネント内に次のコンポーネントを添付できます。 

  • 段落
  • 見出し (H1-H6)
  • ビジュアル
  • 視覚的描写
  • 視覚的記述子
  • カスタマイズされたコード
  • ブロック引用
  • 乱雑なリスト(箇条書き)
  • 順序付きリスト(番号付き)
  • ビデオ (Youtube、Vimeo)
  • 詳細が豊富なメディア (Google マップ、SoundCloud、Imgur、Giphy、Codepen など)

テキスト コンポーネントに追加のスタイルを実装することもできます。

  • 接続 (URL、ページ、メールなど)
  • 強いテキスト
  • 強調されたテキスト
  • 上索引と下索引のテキスト
  • コード

テキストコンテンツを挿入してデザインする方法

DTC 内で入力を開始し、テキストをカスタマイズして見出し、ブロック引用、太字または強調テキスト、接続を作成できます。

インサイダーヒント: Markdown を使用すると、テキスト (太字、斜体、ハイパーリンクの添付など) やブロック コンポーネント (見出し、リストなど) をすばやく調整できます。

段落を挿入する方法

他のテキストエディタと同様に、 入力 キーボードの を押すと、新しい行に新しい段落が作成され、書き進めることができます。複数の段落を追加するには、 入力 段落の終わりに。

見出しと引用ブロックを挿入する方法

見出しを設定するには、段落内の任意のテキストを選択し、 見出し (H1-H6) の選択。ブロック引用の作成にも同じことが適用されます。

テキストのスタイル設定と接続の付け方

テキストの一部を選択し、選択したスタイルを適用することで、任意のテキスト要素の任意のセグメント (見出し、段落、描写など) に、強め、強調、上付きインデックス、下付きインデックス、接続などのスタイルを設定できます。インライン テキストのスタイル設定の詳細については、こちらをご覧ください。

DTC 内で接続を作成する場合、URL、ページ、ページ セグメント、電子メール、または電話番号を選択できます。

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

次のキーボード ショートカットを使用すると、コンテンツの作成を迅速化できます。

  • 挿入 改行なしスペース ( ): シフト + 空間 
  • 挿入 改行 (<br>): シフト + 入力 
  • 強力なテキスト: 指示 + B (コントロール + B Windowsの場合)
  • 強調テキスト: 指示 + (コントロール + Windowsの場合) 
  • ハイパーリンクを添付: 指示 + (コントロール + Windowsの場合)

実装することもできます マークダウン 入力時にテキストのスタイル (太字、斜体、ハイパーリンクの添付など) やブロック コンポーネント (見出し、リストなど) をすばやく設定するためのショートカット: 

  • テキストを強調する: *文章* または _文章_
  • 強力なテキスト: **文章** または __文章__
  • テキストを強調して強化する: ***文章*** または ___文章___
  • ハイパーリンクを添付: [ハイパーリンクテキスト](https://www.url.com)
  • 見出し1を添付: # + 空間
  • 見出し2を添付: ## + 空間
  • 見出し3を添付: ### + 空間
  • 見出し4を添付: #### + 空間
  • 見出し5を添付: ##### + 空間
  • 見出し6を添付: ###### + 空間
  • 引用文を添付: > + 空間
  • 順序なし(箇条書き)リストを添付します。 + 空間
  • 順序付き(番号付き)リストを添付します。 1. + 空間

メディアコンテンツ、カスタマイズされたコード、リストを挿入する方法

テキストカーソルが新しい行にあるときは、「プラス「」ボタンが表示されます。このボタンをタップすると、ビジュアル、ビデオ、さまざまなリッチ メディア、カスタマイズされたコード、箇条書きまたは番号付きのリストなどを追加するオプションを含む挿入メニューが表示されます。

ビジュアル、ビデオ、リッチメディアを追加する

DTC のすべてのメディア機能は適応型で、コンテンツのアスペクト比を維持します。YouTube、Vimeo、Dailymotion のビデオ サポートが改善され、開始時間をカスタマイズできるようになりました。サポートされているリッチ メディアのバリエーションの一部を次に示します。

  • YouTube
  • ヴィメオ
  • インスタグラムの投稿
  • Facebookの投稿
  • デイリーモーション
  • キックスターター
  • TED
  • ウィスティア
  • ライブストリーム
  • ツイッチ
  • フールー
  • Imgur アルバム
  • Googleマップ
  • JSFiddle
  • コードペン
  • スクリブド
  • スライドシェア
  • Spotify プレイリストとチャート
  • ギフィー
  • サウンドクラウド
  • もっと!

メディア構成

各メディア機能は、画像設定のプリセットを使用してサイズを変更したり、「レンチツールバーの「」アイコンをクリックします。オプションの キャプション 下記の描写を追加できます。

代替テキスト

描写に代替テキストを追加するには、追加したい描写を選択します 代替テキスト をタップして、「レンチツールバーの「 」アイコンをクリックし、代替テキストを挿入します。説明的な代替テキストの作成の詳細については、こちらをご覧ください。

カスタマイズされたコードを追加する方法

挿入メニューには、カスタマイズされたコードを追加するボタンがあります。カスタマイズされたコードを使用すると、HTML でテーブルや区切りを作成したり、ターゲット CSS で詳細なテキスト コンテンツのセグメントをスタイル設定したり、JavaScript でプラットフォームの機能を拡張したり (カスタマイズされた Google マップや Google AdSense 広告など)、インタラクティブなサードパーティ コンテンツ (Twitter、Soundcloud、Airtable などからの埋め込みなど) で視聴者を引き付けたりすることができます。

方法は次のとおりです。

  1. カスタマイズしたコードを含める場所にカーソルを置きます
  2. プラス”アイコンをタップして挿入メニューを表示し、カスタマイズされたコードボタンをタップします
  3. コードを追加する 

リストを追加する方法

挿入メニューには、並べ替えられていない (箇条書き) リストと整理された (番号付き) リストを含めるための選択肢が組み込まれています。また、リストをネストしたり、ネストを解除したりすることもできます。

挿入メニューから、またはスペースを伴ったダッシュ (-) を入力して、箇条書きリストを含めることができます。 

整理されたリストを作成するには、挿入メニューを使用するか、整数の後にピリオドとスペースを入力します(例: 1. , 3. , 10. )。これは、リスト項目の間にメディアを追加した後で整理されたリストを継続したい場合に特に便利です。シーケンス内の後続の番号を入力し、その後にピリオドとスペースを入力します。

リストをネストするには、ネストしたいリスト項目を選択し、 タブリストのネストを解除するには、抽出したい項目を選択してプッシュします。 シフト + タブ.

外部ソースから強化テキスト素材を挿入する手順

さまざまな Web サイトや Google Docs などのワード プロセッサから、強化テキスト マテリアルを挿入するオプションがあります。すべてのスタイルとハイパーリンクは、強化テキスト ブロック内に埋め込まれます。強化テキストをデザイナーまたは CMS のテキスト フィールドに貼り付けると、画像も取り込まれます。

重要な注意点: エディターのテキスト ブロックに貼り付けられた強化コンテンツからは画像は取り込まれません。

外部ソースから強化されたテキストを貼り付けると、背景色や非表示の文字などの望ましくないスタイルもインポートされる可能性があることを覚えておくことが重要です。したがって、外部ソースから強化されたテキストを貼り付ける場合は注意してください。

不要なスタイルがインポートされないようにするには、最初にエンリッチテキストコンテンツをプレーンテキストエディターに貼り付けてから、それをコピーしてテキストブロックに貼り付けるか、キーボードショートカットを使用してスタイルなしのテキストを貼り付けます(指示 + オプション + シフト + Macの場合、または コントロール + シフト + (Windows の場合)。このキーボード ショートカットを使用すると、太字、斜体、ハイパーリンクなどのすべてのスタイルが削除されることに注意してください。

要素の操作と削除

テキスト ブロック内の要素は、キャンバスまたはナビゲータにドラッグするか、キーボード ショートカットを使用することで並べ替えることができます。ただし、テキスト ブロック内またはテキスト ブロック外に要素をドラッグ アンド ドロップすることはできません。

テキストブロック内の他の要素に影響を与えずに、テキストブロックから子要素を削除できます。キャンバス上の要素を選択し、 バックスペース キーボードで操作するか、 指示 + バツ (コントロール + バツ (Windows の場合)。

RTE コンテンツ スタイルのカスタマイズ

注記: コンテンツ編集者またはチームメンバー 編集することができます このロールでは、テキストの書式設定 (太字、斜体など) や、RTE 内のテキスト要素とメディア要素の作成と削除はできますが、RTE 内の要素のスタイル設定はできません。

テキストブロック内の個々の要素のスタイル設定

スタイルパネルを選択し、クラスを割り当てて、必要に応じてスタイルを設定します。選択した要素にまだクラスがない場合、スタイルを追加するとクラスが生成されます。

注記: 条件付きの可視性は、テキスト ブロック内の個々の要素にも設定できます。

HTML タグを使用してテキスト ブロック内の要素をスタイル設定する

テキスト ブロック要素は、それぞれの HTML タグからスタイルを取得します。テキスト ブロック内の要素を HTML タグでスタイル設定して、要素のグループの既定のスタイルを設定できます。HTML タグに適用されたスタイルは、その HTML タグを持つサイト上のすべての要素に影響することに注意してください。

ただし、テキスト ブロック要素にクラスを組み込むと、ネストされたセレクターを持つ HTML タグを使用して、テキスト ブロックと同じクラスを共有するテキスト ブロック内の要素の既定のスタイルを定義できます。この方法は、既定のスタイルを同じクラスのテキスト ブロックに限定して、スタイルがサイト上の他の要素にカスケードされるのを防ぐのに役立ちます。

テキスト ブロック内で HTML タグを使用してスタイルを設定するには:

  1. キャンバス上のテキストブロックを選択する
  2. テキストブロックにクラスを割り当てる
  3. テキストブロック内の任意の要素を選択する
  4. に行く スタイルパネル (ス)
  5. アクセス セレクタ 分野
  6. メニューからHTMLタグ(例:すべての段落)を選択します
  7. クリック 「クラス名」内にセレクターをネストする
  8. 必要に応じて要素のスタイルを設定します
注記: ネストされたタグにスタイルを適用すると、指定されたクラスのテキスト ブロックだけでなく、同じ適用クラスを共有する要素内の要素に影響します。特定のクラスを持つテキスト ブロック内のネストされたタグ専用のスタイルを作成するには、テキスト ブロック専用のクラスを作成するか、コンボ クラスを使用することをお勧めします。

動的エンリッチテキストのカスタマイズ

強化テキスト要素は、コレクション内の強化テキスト フィールドにリンクできます。RTE がバインド (接続) されると、RTE コンテンツのソースとして機能する CMS 内を除き、テキスト要素の編集が制限されます。

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