リッチ テキスト モジュールでコンテンツを編集する

リッチ テキスト モジュールでは、テキスト、画像、リンクなど、さまざまな種類の コンテンツを追加できます。開発者は、 リッチ テキスト モジュール をカスタムコーディングされたテンプレートに追加し、 その編集オプションをカスタマイズできます。

始める前に

リッチ テキスト モジュールでコンテンツを編集する前に、要件と考慮事項を確認してください。

制限事項と考慮事項について

• リッチテキスト編集機能の中には、 ナレッジベース記事エディターで使用できないものがあります。

リッチ テキスト モジュールでテキストを書式設定する

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
   • ナレッジベース：HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. コンテンツの名前をクリックします。
3. コンテンツエディターで、リッチ テキスト モジュールをクリックして、エディター上部のリッチ テキスト ツールバーをアクティブにします。リッチ テキスト モジュールをクリックし、サイドバーエディターで［展開したビューで編集］をクリックすることもできます。

注：デバイスの画面サイズによっては、［その他］ドロップダウンメニューに書式設定オプションがある場合があります。

4. リッチ テキスト モジュールでテキストを強調表示します。
5. コンテンツ内でのテキストのサイズと重要性を比較するには、［スタイル］ドロップダウンメニューをクリックし、オプションを選択します（［段落］、［見出し1］など）。
6. テキストのフォントを設定するには、［フォント］ドロップダウンメニューをクリックしてフォントを選択します。HubSpotでのフォントの使い方について詳細をご確認ください。

7. テキストサイズを設定するには、［フォントサイズ］ドロップダウンメニューをクリックし、フォントサイズをピクセル単位で選択します。 

8. テキストを太字、斜体、または下線付きにするには、スタイルアイコン（boldIcon太字、italicIconイタリック、underlineIcon下線付きなど）をクリックします。
9. テキストの色を変更するには、textColorIcon文字色アイコンをクリックして、色を選択します。16進数コードまたはRGBカラーコードを使用する場合や、カスタム色を選択する場合には、［詳細］タブをクリックします。

10. テキストの背景色を設定するには、highlight背景色アイコンをクリックして、色を選択します。16進数コードまたはRGBカラーコードを使用する場合や、カスタム色を選択する場合には、［詳細］タブをクリックします。
11. テキストの位置合わせを変更するには、alignLeft ［位置合わせ］ドロップダウンメニューをクリックして、alignCenter 位置合わせアイコンを選択します。

12. テキストを箇条書きリストに追加するには、［その他］ドロップダウンメニューをクリックします。次に、bulletList 箇条書きリストアイコンをクリックします。箇条書きリストの形式を変更するには、［箇条書きリスト］ドロップダウンメニューをクリックして、bulletDiamond 形式を選択します。

13. 番号リストにテキストを追加するには、［その他］ドロップダウンメニューをクリックします。次に、numberList番号付きリストアイコンをクリックします。リストの形式を変更するには、［番号付きリスト］ドロップダウンメニューをクリックして、bulletLowerAlpha 形式を選択します。
14. テキストの行の高さを設定するには、lineHeight ［行の高さ］ドロップダウンメニューをクリックして、高さを選択します。
15. テキストのインデントを増減するには、indent 字下げを増やすアイコン、またはoutdentIcon 字下げを減らすアイコンをクリックします。
16. テキストに適用されているスタイルを削除するには、removeTextStyle スタイルをクリアアイコンをクリックします。
17. 書式設定を追加するには、［その他］ドロップダウンメニューをクリックし、strike 打ち消し線、superscript 上付き文字、またはsubscript 下付き文字アイコンをクリックします。
18. テキストをコードとして書式設定するには、［その他］ドロップダウンメニューをクリックし、code コード書式設定アイコンを選択します。
19. 完了したら、［更新］または［公開］をクリックして、変更を公開します。

リッチ テキスト モジュールに要素を追加する

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
   • ナレッジベース：HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. コンテンツの名前をクリックします。
3. コンテンツエディターで、リッチ テキスト モジュールをクリックして、エディター上部のリッチ テキスト ツールバーをアクティブにします。リッチ テキスト モジュールをクリックし、サイドバーエディターで［展開したビューで編集］をクリックすることもできます。
4. リンクを挿入するには、テキストを選択してから、link リンクを挿入アイコンをクリックします。HubSpotでのリンクの操作について、詳細をご確認ください。
5. 画像を挿入するには、insertImage 画像を挿入アイコンをクリックします。HubSpotでの画像の操作について、詳細をご確認ください。
6. 絵文字を挿入するには、emoji 絵文字を挿入アイコンをクリックします。
7. CTAを挿入するには、［挿入］ドロップダウンメニューをクリックしてから、ctaCTAを選択します。HubSpotでのCTAの操作について、詳細をご確認ください。
8. 埋め込みコードを挿入するには、［挿入］ドロップダウンメニューをクリックし、［埋め込み］を選択します。HubSpotへのコンテンツの埋め込みについて詳細をご確認ください。
9. 動画を挿入するには、［挿入］ドロップダウンメニューをクリックし、［動画］の上にマウスポインターを置いて、［HubSpot動画］または［外部動画］を選択します。HubSpotでの動画の操作について詳細をご確認ください。
10. テーブルを挿入するには、［挿入］ドロップダウンメニューをクリックし、［テーブル］の上にマウスポインターを置いて、テーブルのディメンションを選択します。HubSpotでのテーブルの使い方について詳細をご確認ください。
11. 特殊文字を挿入するには、［挿入］ドロップダウンメニューをクリックし、［特殊文字］を選択します。ポップアップボックスで、いずれかの特殊文字をクリックします。
12. アイコンを挿入するには、［挿入］ドロップダウンメニューをクリックし、［アイコン］を選択します。ポップアップボックスで、いずれかのアイコンをクリックします。HubSpotでのアイコンの操作について詳細をご確認ください。
13. アンカーリンクを挿入するには、［挿入］ドロップダウンメニューをクリックして、［アンカー］を選択します。HubSpotでのアンカーリンクの使用について、詳細をご確認ください。
14. 水平線を挿入するには、［挿入］ドロップダウンメニューをクリックし、［水平線］を選択します。
15. ノーブレークスペースを挿入するには、［挿入］ドロップダウンメニューをクリックし、［ノーブレークスペース］を選択します。

16. パーソナライズトークンを挿入するには、［パーソナライズ］をクリックします。
    • ポップアップボックスで、［タイプ］ドロップダウンメニューをクリックし、いずれかのトークンタイプを選択します。
    • ［トークン］ドロップダウンメニューをクリックし、いずれかのトークンを選択します。HubSpotでのパーソナライズトークンの使い方について詳細をご確認ください。
17. 完了したら、［更新］または［公開］をクリックして、変更を公開します。

リッチ テキスト モジュールで高度な編集機能を使用する

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
   • ナレッジベース：HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. コンテンツの名前をクリックします。
3. コンテンツエディターで リッチテキストモジュールをクリックして、エディター上部のリッチ テキスト ツールバーをアクティブにします。リッチ テキスト モジュールをクリックし、サイドバーエディターで［展開したビューで編集］をクリックすることもできます。

4. モジュールのソースコードにアクセスするには、［詳細］ドロップダウンメニューをクリックし、［ソースコード］を選択します。ダイアログボックスでソースコードを編集して、［変更を保存］をクリックします。

   注:リッチテキストモジュールのソースコードに追加されたHubLコードはエディターではなく、ページ自体がレンダリングされるときにレンダリングされます。ウェブページなどのアセットの場合は、ページをプレビューすることでHubLの出力を確認できます。 

5. コンテンツをコンテンツのブロックに分けて表示するには、［詳細］ドロップダウンメニューをクリックし、［ブロックを表示］を選択します。ブロックなしでコンテンツを再度表示するには、［詳細］ドロップダウンメニューをクリックし、［ブロックを非表示］を選択します。どちらのオプションも、訪問者へのコンテンツの表示には影響しません。
6. 完了したら、［更新］または［公開］をクリックして、変更を公開します。