メインコンテンツにスキップ
HubSpot ナレッジベース
お客さまへの大切なお知らせ：膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

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

更新日時 2025年11月4日

以下の 製品でご利用いただけます（別途記載されている場合を除きます）。

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

注：ナレッジベース記事エディターでは、一部のリッチテキスト編集機能はご利用いただけません。

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

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

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

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

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

コンテンツエディターでは、リッチ テキスト モジュール ツールバーが表示されます。［その他］ドロップダウンメニューの周囲にボックスが配置されて、追加の書式設定オプションが表示されます。追加の書式設定オプションでは、［フォント］ドロップダウンメニューの周囲にボックスが配置されます。

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

コンテンツエディターでは、リッチ テキスト モジュール ツールバーが表示されます。［その他］ドロップダウンメニューの周囲にボックスが配置されて、追加の書式設定オプションが表示されます。追加の書式設定オプションでは、［フォントサイズ］ドロップダウンメニューの周囲にボックスが配置されます。

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

コンテンツエディターでは、リッチ テキスト モジュール ツールバーが表示されます。［フォント色］ドロップダウンメニューの周囲にボックスが配置されて、フォント色のオプションが表示されます。色オプションでは、矢印が［シンプル］タブの色を指します。

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

コンテンツエディターでは、リッチ テキスト モジュール ツールバーが表示されます。［位置合わせ］ドロップダウンメニューの周囲にボックスが配置され、フォントの位置合わせオプションが表示されます。矢印が位置合わせオプションを指します。

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

コンテンツエディターでは、リッチ テキスト モジュール ツールバーが表示されます。［その他］ドロップダウンメニューの周囲にボックスが配置され、追加の書式設定オプションが表示されます。追加の書式設定オプションでは、箇条書きアイコンと箇条書きリストのドロップダウンメニューを囲むボックスが配置されます。

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

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

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

    1. ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
    2. ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
    3. ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
    4. ナレッジベース：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. ノーブレークスペースを挿入するには、［挿入］ドロップダウンメニューをクリックし、［ノーブレークスペース］を選択します。

コンテンツエディターでは、リッチ テキスト モジュール ツールバーが表示されます。［挿入］ドロップダウンメニューの周囲にボックスが配置されて、オプションが表示されます。矢印が、CTA、埋め込み、動画、テーブルなどを含む挿入オプションを指します。

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

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

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

    • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
    • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
    • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
    • ナレッジベース：HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. コンテンツの名前をクリックします。
  3. コンテンツエディターで、リッチ テキスト モジュールをクリックして、エディター上部のリッチ テキスト ツールバーをアクティブにします。リッチ テキスト モジュールをクリックし、サイドバーエディターで［展開したビューで編集］をクリックすることもできます。
  4. モジュールのソースコードにアクセスするには、［詳細］ドロップダウンメニューをクリックし、［ソースコード］を選択します。ダイアログボックスでソースコードを編集して、［変更を保存］をクリックします。
  5. コンテンツをコンテンツのブロックに分けて表示するには、［詳細］ドロップダウンメニューをクリックし、［ブロックを表示］を選択します。ブロックなしでコンテンツを再度表示するには、［詳細］ドロップダウンメニューをクリックし、［ブロックを非表示］を選択します。どちらのオプションも、訪問者へのコンテンツの表示には影響しません。
  6. 完了したら、［更新］または［公開］をクリックして、変更を公開します。
この記事はお役に立ちましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。
目次 メニュー

関連記事

New to HubSpot? Use these guides to get started.