レイアウトエディターでの既定のモジュールの使用

HubSpotには、デザインマネージャー内のレイアウトエディターでドラッグ＆ドロップテンプレートを作成するための既定のモジュールが用意されています。既定のモジュールを追加することや、ドラッグ＆ドロップテンプレートで使用する既定のモジュールを複製することができます。さらに、一部の既定モジュールでは既定のコンテンツを編集できます。 

始める前に

この機能を使い始める前に、事前に必要な手順と、この機能を使用する場合の制限事項と潜在的な結果について十分に理解しておいてください。 

必要な条件を理解する

• モジュールにアクセスして編集するには、スーパー管理者であるか、デザインマネージャー権限が有効になっている必要があります。 

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

• この記事では、デザインマネージャー内のレイアウトエディターのインスペクターを使用して、既定のモジュールを追加および複製する方法について説明します。一部の既定のモジュールでは、既定のコンテンツを編集することもできます。
• HubLを使用して既定のモジュールをHTMLテンプレートやカスタムテンプレートに追加する方法については、開発者ドキュメントをご確認ください。
• コンテンツエディターでモジュールを追加および編集するには、コンテンツエディターでモジュールを追加および編集する方法をご覧ください。
• Marketing HubおよびContent Hub のProfessionalおよびEnterpriseアカウントでは、デザインマネージャーに「@hubspot」フォルダーが既定で用意されています。
• 一部の既定のモジュールは、特定のテンプレートタイプにしか追加できません。例えば、フォームモジュールはEメールテンプレートでは使用できません。
• モジュールのソースコードをカスタマイズする前に、既定のモジュールを複製する必要があります。

ドラッグ＆ドロップテンプレートにモジュールを追加する

デザインマネージャーのレイアウトエディターを使用して、既定のモジュールをドラッグ＆ドロップテンプレートに追加できます。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. 左側の列で、テンプレートの名前をクリックします。 
3. 右側の列で、［+追加］をクリックします。 
4. 検索バーに既定のモジュールまたはカスタムモジュールの名前を入力します。 
5. モジュール名をクリックして、テンプレートにドラッグします。 
6. インスペクターの［スタイルオプション］セクションで、モジュールのカスタムスタイルを設定します。 

7. インスペクターの［既定のコンテンツ］セクションで、モジュールがコンテンツエディターに追加されたときに表示されるコンテンツを編集します。モジュールの既定のコンテンツの編集方法をご確認ください。

8. 他のユーザーがモジュールの既定のコンテンツを編集できないようにするには、［エディターのオプション］セクションで、［コンテンツエディターでの編集を禁止する］スイッチをクリックしてオンに切り替えます。

既定のモジュールを複製する

モジュールのソースコードを編集するために、デザインマネージャーの「@hubspot」フォルダーにある既定のモジュールを複製できます。このフォルダーには、全てのテーマと既定のモジュール（ドラッグ＆ドロップEメールモジュールを含む）が含まれています。 

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、@hubspotフォルダーをクリックします。

3. 既定のモジュールを右クリックし、［モジュールを複製］を選択します。 
4. 複製したモジュールで、モジュールのソースコードを編集します。モジュールの設定方法をご確認ください。
5. 右上の［変更を公開］をクリックします。

モジュールのバージョンを管理する

HubSpotでは定期的に、既存の既定モジュールの新規バージョンをリリースしています。これにより、HubSpotは既存のコンテンツを中断することなく、大幅な更新を実装できます。例えば、モジュールの新しいバージョンでは、フィールドの構成が改善され、スタイルオプションが追加されたり、機能が向上しています。HubSpotの開発者ドキュメントでモジュールのバージョン管理の詳細をご確認ください。

モジュールのバージョンを管理するには、アカウントの［テーマとモジュール］設定ページを使用します。このページで、バージョンの更新、以前のバージョンへの復元を行ったり、全ての既定モジュールの現在のバージョンを確認したりできます。

モジュールのバージョンを更新する

• モジュールの新しいバージョンに更新するには、次の手順に従います。

1. 1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
   2. 左のサイドバーメニューで、［コンテンツ］>［テーマとモジュール］に移動します。
   3. ［アラート］タブには、既定モジュールの最新の更新が［更新があります］タグ付きで表示されます。更新の詳細を表示するには、モジュールの横にある［更新を表示］をクリックします。

1. 4. 右側のサイドバーで、変更内容を確認します。サイドバーには、更新の概要と、変更の詳細な内訳および影響を受けるアセットが表示されます。

1. 5. モジュールを更新するには、［更新をインストール］をクリックします。ダイアログボックスで、［更新を確認］をクリックします。

注：ページやテンプレートで更新されたモジュールが表示されるまでには、最大で10分かかる場合があります。

• モジュールを更新すると、［テーマとモジュール］の［モジュール］タブが表示されます。このページでは、最近更新されたモジュール、利用可能な更新があるモジュール、およびアカウントの全ての既定モジュールのバージョン情報を確認できます。

更新済みのモジュールを元に戻す

設定ページの［モジュール］タブで、過去30日以内に更新されたモジュールを以前のバージョンに戻すことができます。 

• 最近更新されたモジュールを元に戻すには、次の手順に従います。
  1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  2. 左のサイドバーメニューで、［コンテンツ］>［テーマとモジュール］に移動します。
  3. ［モジュール］タブをクリックし、元に戻すモジュールを見つけて、［最近の更新をロールバック］をクリックします。

• 4. 右側のサイドバーで、モジュールのバージョン履歴を確認し、［この更新をロールバック］をクリックします。

• 5. 右のサイドバーで情報を確認し、更新をロールバックすることを決定したら、［ロールバック］をクリックします。 
  6. ダイアログボックスで、［確認］をクリックします。 
• モジュールを元に戻した後、テンプレートやページに元に戻されたモジュールが表示されるまでには時間がかかる場合があります。モジュールのバージョンを更新することにより、モジュールをもう一度更新できます。

さまざまなタイプのモジュールの既定のコンテンツを編集する

「デザインマネージャー」のレイアウトエディター内のドラッグ＆ドロップテンプレートで、一部の既定モジュールの既定のコンテンツを編集できます。既定のモジュールの完全なリストについては、既定のEメールモジュールと既定のウェブモジュールに関する詳細を参照してください。

配信停止バックアップ

Eメール受信者が配信解除リンクをクリックしたときに、HubSpotでその受信者のEメールアドレスを確認できない場合は、配信解除バックアップモジュールが表示されます。このモジュールは、Eメールバックアップ配信解除システムテンプレートからのみ編集できます。 

• バックアップ配信解除モジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［配信解除バックアップ］モジュールをクリックします。
  4. インスペクターの［既定のコンテンツ］セクションで、［見出し］、［小見出し］、［エラーメッセージ］に表示されるテキストを入力します。

• モジュールの編集が終了したら、［変更を公開］をクリックします。

ブログのEメール配信登録

ブログEメール配信登録モジュールでは、訪問者がフォームに記入することで、ブログのダイジェストEメールを配信登録することができます。このモジュールには、ブログの登録読者フォームのデータが入力されます。このフォームは、フォームツールでカスタマイズできます。

注：ブログのEメール配信登録モジュールは、Eメールテンプレートでは使用できません。 

• ブログのEメール配信登録モジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［ブログのEメール配信登録］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［表示するブログを選択］ドロップダウンメニューをクリックし、訪問者が配信登録しているブログを選択します。
  5. ［見出しのレベル］ドロップダウンメニューをクリックして、見出しのレベルを選択します。
  6. ［フォームの上に表示するタイトル］フィールドに、フォームの上のタイトルに表示されるテキストを入力します。
  7. ［ユーザーへのインライン応答］フィールドで、expandIcon展開アイコンをクリックし、訪問者がフォームを送信した後に表示されるテキストをカスタマイズします。

• ブログのEメール配信登録モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

CTA

CTAモジュールは、レイアウト内の独自のモジュールにCTAを配置します。リッチ テキスト モジュールにCTAを挿入することもできます。

• CTAモジュールの既定のコンテンツを編集するには、次の手順に従います。

• 1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［CTA］モジュールをクリックするか、モジュールを追加します。
  4. インスペクター［既定のコンテンツ］セクションで、［選択］をクリックします。

• 5. 右側のペインで、CTAを選択するか、［新規作成］をクリックします。
  6. ［挿入］をクリックします。

コンテンツライブラリー

コンテンツ ライブラリー モジュールを使用して、訪問者がアクセスできるリソースのライブラリーを設定できます。

• コンテンツ ライブラリー モジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［コンテンツライブラリー］モジュールをクリックするか、モジュールを追加します。
  4. コンテンツライブラリーの既存のリソースを編集するには、インスペクターでeditIc on編集アイコンをクリックします。名前、説明、リンクテキスト、画像をカスタマイズできます。
  5. コンテンツ ライブラリー モジュールからリソースを削除するには、インスペクターでdeleteIcon 削除アイコンをクリックします。
  6. カスタムリソースをコンテンツ ライブラリー モジュールに追加するには、インスペクターで［+追加］をクリックします。
  7. リソースを特集として設定するには、インスペクターでfavoriteIcon 特集に設定アイコンをクリックします。

• コンテンツ ライブラリー モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

フォーム

フォームモジュールを使用すると、訪問者の情報を取得するためのフォームをコンテンツに追加できます。

注：フォームモジュールはEメールテンプレートでは使用できません。 

• フォームモジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［フォーム］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［フォームタイトル］フィールドのテキストを入力します。
  5. ［フォーム］ドロップダウンメニューで、フォームを選択します。
  6. ［フォーム送信後に訪問者に何を表示しますか？］フィールドで、［別のページにリダイレクト］または［メッセージをインラインで表示］を選択します。 
     • 別のページにリダイレクトするには、［リダイレクトリンク］ドロップダウンメニューで、ページ、投稿を選択するか、［+外部リンクを追加］をクリックします。 
     • インラインのサンキューメッセージを表示するには、［サンキューメッセージ］フィールドで、expand展開アイコンをクリックします。
  7. ［フォームのデフォルト設定ではなく、指定されたEメールアドレスにフォーム通知を送信］チェックボックスをオンにすると、フォームツールで設定された通知受信者を上書きできます。
• フォームモジュールの編集が終了したら、右上の［変更を公開］をクリックします。

ヘッダー

ヘッダーモジュールを使用すると、見出しHTMLタグ内に1行のテキストを表示できます。

• ヘッダーモジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［見出し］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［見出しコンテンツ］フィールドにテキストを入力します。 
  5. ［見出しのレベル］ドロップダウンメニューをクリックし、見出しレベル（H1-H4）を選択します。

• ヘッダーモジュールの編集が終了したら、右上の［変更を公開］をクリックします。

画像

画像モジュールを使用して、コンテンツ内に1つの画像を表示できます。

• 画像モジュールの既定のコンテンツを編集するには、次の手順に従います。
  
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［画像］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［画像］フィールドの［置換］をクリックします。
  5. 右側のペインで、表示する画像を選択します。 
  6. ［代替テキスト］フィールドに、画像のテキストによる説明を入力します。
  7. ［サイズ］ドロップダウンメニューで、［自動的に調整］または［幅と高さを固定］を選択します。
  8. ［最大サイズ］ドロップダウンメニューで、［画像の本来のサイズ］または［カスタム］を選択します。
  9. ［画像の読み込み］ドロップダウンメニューで、［ブラウザーのデフォルト］、［遅延］、または［遅延しない］を選択します。
  10. ［リンク（任意）］フィールドに、画像がクリックされたときに訪問者をリダイレクトする任意のURLを入力します。

• 画像モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

画像グリッド

画像グリッドモジュールを使用すると、画像の均一なグリッドをコンテンツに追加できます。 

• 画像グリッドモジュールの既定のコンテンツを編集するには、次の手順に従います。
  
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［画像のグリッド］モジュールをクリックするか、モジュールを追加します。
  4. 画像グリッドモジュールで既存の画像を編集するには、インスペクターでeditIc on編集アイコンをクリックします。既存の画像をアップロードまたは参照することや、リンクテキスト、リンクURL、またはホバーメッセージを編集することができます。
  5. 画像グリッドモジュールで画像を削除するには、インスペクターでdeleteIcon 削除アイコンをクリックします。
  6. 画像グリッドモジュールに新しい画像を追加するには、インスペクターで［+追加］をクリックします。
  7. ［設定］をクリックして展開します。設定ペインで、「ホバー機能」、「クリック機能」、「列」、および「アスペクト比」を調整できます。 

• 画像モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

画像スライダー

画像スライダーモジュールを使用して、同じモジュール内で自動的に繰り返される複数の画像を表示できます。 

• 画像スライダーモジュールの既定のコンテンツを編集するには、次の手順に従います。
  
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［画像スライダー］モジュールをクリックするか、モジュールを追加します。
  4. 画像スライダーモジュールで既存の画像を編集するには、インスペクターでeditIc on編集アイコンをクリックします。既存の画像をアップロードまたは参照することや、キャプションやリンクURLを編集することができます。
  5. 画像スライダーモジュールから画像を削除するには、インスペクターでdeleteIcon 削除アイコンをクリックします。
  6. 画像スライダーモジュールに新しい画像を追加するには、インスペクターで［+追加］をクリックします。
  7. ［設定］をクリックして展開します。設定ペインで、「スライド」、「動き」、「ナビゲーション」を調整できます。 

• 画像スライダーモジュールの編集が終了したら、右上の［変更を公開］をクリックします。

言語切り替え機能

言語切り替えモジュールを使用すると、訪問者がページやブログの翻訳バージョンを切り替える方法を提供できます。 

注：言語切り替えモジュールは、Eメールテンプレートでは使用できません。 

• 言語切り替えモジュールの既定のコンテンツを編集するには、次の手順に従います。
  
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［言語切り替え］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［下向きシェブロンを追加］チェックボックスをオンにして、言語切り替え用のシェブロンを表示します。
  5. ［表示モード］ドロップダウンメニューをクリックして、次のいずれかを選択します。
     
     • ページ言語：各言語名が現在のページの言語で表示されます。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、EnglishとFrenchが言語名として表示されます。 
     • ローカライズ：各言語の名前がその言語で表示されます。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、EnglishとFrançaisが言語名として表示されます。
     • ハイブリッド：2つの組み合わせです。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、EnglishとFrench（Français）が言語名として表示されます。
  6. ［アイコンオプション］ドロップダウンメニューをクリックし、［なし］、［アイコン］、または［カスタムアイコン］を選択します。

• 言語切り替えモジュールの編集が終了したら、右上の［変更を公開］をクリックします。

注：このモジュールは、複数の公開済み翻訳がある公開中のページにのみ表示されます。HubSpotでの多言語コンテンツの使用についてもっと詳しく。

ロゴ

ロゴモジュールを使用して、ブランドキットの会社ロゴをコンテンツに表示できます。 

• ロゴモジュールの既定のコンテンツを編集するには、次の手順に従います。
  
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［ロゴ］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［デフォルトのロゴよりも優先使用］スイッチをクリックしてオンに切り替え、テンプレートを使用してコンテンツの新規画像をアップロードします。
  5. 既定のロゴを編集するには、［このドメインのデフォルトのロゴを編集］をクリックします。
  6. ［画像の読み込み］ドロップダウンメニューで、［ブラウザーのデフォルト］、［遅延］、または［遅延しない］を選択します。 
  7. ［リンクURL］フィールドに、ロゴ画像がクリックされたときに訪問者をリダイレクトするURLテキストを入力します。これは、ブランドキットで指定されたデフォルトよりも優先されます。

• ロゴモジュールの編集が終了したら、右上の［変更を公開］をクリックします。

ロゴグリッド

ロゴ グリッド モジュールを使用して、寸法が異なる複数のロゴを均一のグリッドに配置できます。

• ロゴ グリッド モジュールの既定のコンテンツを編集するには、次の手順に従います。
  
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［ロゴグリッド］モジュールをクリックするか、モジュールを追加します。
  4. 既存の画像を編集するには、インスペクターでeditIcon編集アイコンをクリックします。既存の画像をアップロードまたは参照することや、代替テキストや画像読み込みを編集することができます。
  5. ロゴ グリッド モジュールの画像を削除するには、インスペクターでdeleteIcon 削除アイコンをクリックします。
  6. ロゴ グリッド モジュールに新しい画像を追加するには、インスペクターで［+追加］をクリックします。

• ロゴ グリッド モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

Eメール本文

Eメール本文モジュールは、既定で全てのEメールテンプレートに含まれている標準のリッチ テキスト モジュールです。 

• Eメール本文モジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［Eメール本文］モジュールをクリックします。
  4. インスペクターの［既定のコンテンツ］セクションで、expandIcon展開アイコンをクリックし、Eメール本文に表示するテキストを編集します。

• Eメール本文モジュールのスタイルオプションを編集するには、次の手順に従います。 
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［Eメール本文］モジュールをクリックします。
  4. インスペクターの［スタイルオプション］セクションで、［文字色］、［背景色］、［境界線の色］テキストフィールドに16進数の値を入力します。カラーパレットをクリックすることもできます。

• Eメール本文モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

メニュー

メニューモジュールを使用して、コンテンツにナビゲーションを追加できます。メニューの作成と管理は、ナビゲーションメニュー設定で直接行います。 

• メニューモジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［メニュー］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［メニュー］ドロップダウンメニューをクリックし、既存のメニューを選択するか、［新規作成］をクリックします。
  5. ［詳細メニュータイプ］ドロップダウンメニューで、次のいずれかを選択します。
     • 静的 - 常に最上位ページがメニューに表示されます：全てのページでメニューの一貫性が保たれます。
     • 動的（セクション別） - 表示中のセクションに関連するページがメニューに表示されます：表示されている最上位メニュー項目に関連するメニュー項目が表示されます。
     • 動的（ページ別） - 表示中のページに関連するページがメニューに表示されます：表示されている特定のページに関連するメニュー項目が表示されます。
     • パンくず形式のパスメニュー（横フローを使用）：サイト上部の相対パスにメニュー項目が水平方向に表示されます。
  6. ［最大レベル数］フィールドに、表示できる子メニュー項目の最大数を入力します。
  7. ［方向］ドロップダウンメニューで、［横］または［縦］を選択します。
  8. 親ナビゲーションにカーソルを合わせたときに子メニュー項目を表示するには、［フライアウトを有効にしますか？］チェックボックスをオンにします。

• メニューモジュールの編集が終了したら、右上の［変更を公開］をクリックします。

オフィス所在地情報

オフィス所在地モジュールには、マーケティングEメールを送信するためにEメールテンプレートに含める必要がある必須トークンが含まれています。 

• オフィス所在地情報モジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. Eメールテンプレートに移動します。
  3. レイアウトエディターで、［オフィス所在地情報］モジュールをクリックします。
  4. インスペクターの［既定のコンテンツ］セクションで、expandIcon展開アイコンをクリックし、必須トークンとともにEメールに表示されるテキストを編集します。

• オフィス所在地情報モジュールのスタイルオプションを編集するには、次の手順に従います。
  • HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  • 対象となるテンプレートに移動します。
  • レイアウトエディターで、［オフィス所在地情報］モジュールをクリックします。
  • インスペクターの［スタイルオプション］セクションで、［文字色］、［背景色］、［境界線の色］テキストフィールドに16進数の値を入力します。カラーパレットをクリックすることもできます。

• オフィス所在地情報モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

1行テキスト

1行テキストモジュールを使用すると、コンテンツに1行のテキストを追加できます。 

パスワードプロンプト

パスワード プロンプト モジュールは、パスワードプロンプトのシステムテンプレートで使用できます。ページがパスワードで保護されている場合、ユーザーがページにアクセスする前にパスワード プロンプト ページが表示されます。 

• パスワード プロンプト モジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. パスワードプロンプトのテンプレートに移動します。
  3. レイアウトエディターで、［パスワードプロンプト］モジュールをクリックします。
  4. インスペクターの［既定のコンテンツ］セクションで、expandIcon展開アイコンをクリックして、不適切なパスワードに関するメッセージのテキストを編集します。

• パスワード プロンプト モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

投稿フィルター

投稿フィルターモジュールを使用すると、特定のトピック、月、または執筆者のブログ記事のリストを表示できます。 

• 投稿フィルターモジュールの既定のコンテンツを編集するには、次の手順に従います。

1. 1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
   2. 対象となるテンプレートに移動します。
   3. レイアウトエディターで、［投稿フィルター］モジュールをクリックします。
   4. インスペクターの［既定のコンテンツ］セクションで、［表示するブログを選択］ドロップダウンメニューから、表示するブログを選択します。
   5. ［フィルターリンクの値のリスト］ドロップダウンメニューで、［タグ］、［月］、または［作成者］を選択します。
   6. ［フィルターリンクの値の順位付け］ドロップダウンメニューで、［投稿数］または［名前］を選択します。
   7. ［表示するタイトルを一覧にする］フィールドに、一覧のタイトルとして表示するテキストを入力します。
   8. 全てのフィルターを表示するには、［全てのフィルターを表示］チェックボックスをオンにします。
   9. ［表示するフィルター値の最大数］フィールドに、フィルターの投稿数を入力します。
   10. ［記事数が表示の最大数を超える場合に表示するテキスト。リンクを省略する場合は空白のままにします］フィールドに、カテゴリーにさらに多くの投稿がある場合に表示されるテキストを入力します。

• 投稿フィルターモジュールの編集が終了したら、右上の［変更を公開］をクリックします。

記事一覧

記事一覧モジュールを使用すると、自分のブログのブログ記事の一覧を表示できます。 

• 記事一覧モジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［記事一覧］モジュールをクリックします。
  4. インスペクターの［既定のコンテンツ］セクションで、［表示するブログを選択］ドロップダウンメニューから、表示するブログを選択します。
  5. ［記事の並べ替え基準］ドロップダウンメニューで、［最新］、［人気 - 全期間］、［人気 - 過去１年間］、［人気 - 過去6か月間］、または［人気 - 過去1か月間］を選択します。
  6. ［フィードに表示される内容を選択］フィールドで、［画像］、［タイトル］、［執筆者名］、および／または［公開日］の横にあるチェックボックスをオンにします。
  7. ［表示する最大ブログ記事数］フィールドに、表示するブログ記事の最大数を入力します。
  8. ［記事の見出し］フィールドに、モジュールの上部に表示されるテキストを入力します。
  9. ［見出しのレベル］ドロップダウンメニューで、モジュールのコンテンツの見出しのレベル（H1-H6）を選択します。

• 記事一覧モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

Product（製品）

製品モジュールを使用して、ページや投稿に製品ライブラリーの製品を表示できます。製品のデフォルト情報が表示されますが、必要に応じてページごとに上書きできます。 

• 製品モジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［製品］モジュールをクリックするか、モジュールを追加します。
  4. インスペクター［既定のコンテンツ］セクションで、［製品を選択］をクリックします。
  5. 右側のペインで、製品の横にあるチェックボックスをオンにし、［選択］をクリックします。新しい製品を作成する場合は、［製品を作成］をクリックします。 
  6. 製品を選択したら、表示される［名前］、［説明］、［画像］、［ボタン］を上書きして編集できます。

• 製品モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

リッチテキスト

リッチ テキスト モジュールでは、テキスト、画像、CTAといったさまざまなコンポーネントを編集できます。

• リッチ テキスト モジュールの既定のコンテンツを編集するには、次の手順に従います。
  
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［リッチテキスト］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、expandIcon展開アイコンをクリックし、［リッチテキストのコンテンツ］を編集します。リッチ テキスト モジュールのコンテンツの編集について詳細をご確認ください。

• リッチ テキスト モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

RSSリスティング

RSSリスティングモジュールを使用すると、HubSpotブログや外部のRSSフィードのブログ記事の要約を表示できます。

注：RSSリスティングモジュールは、Eメールテンプレートでは使用できません。代わりに、RSS Eメールを使用してください。 

• RSSリスティングモジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［RSSリスティング］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［RSSタイトル］フィールドのテキストを入力します。
  5. ［RSSフィードを追加］フィールドで、［外部のRSSフィードを使用］または［HubSpotでホスティングされたブログを使用］を選択します。
  6. ［ブログ］ドロップダウンメニューで、ブログを選択します。
  7. ［タグによる絞り込み］ドロップダウンメニューで、タグを選択します。
  8. ［記事の最大表示数］フィールドに、記事数を入力します。
  1. キービジュアルを含めるには、［キービジュアルを含める］のチェックボックスをオンにします。
  2. 執筆者の名前を表示するには、［執筆者名を表示］のチェックボックスをオンにします。
  3. ［執筆者属性テキスト］フィールドに、表示するテキストを入力します。既定では、属性テキストとして［基準］が含められます。
• 
  
  4. ブログのサマリーを表示するには、［サマリーを表示］のチェックボックスをオンにします。
  5. ［サマリーの長さを制限（文字数）］フィールドに、サマリーの文字数の上限を入力します。
  6. ［サマリー クリックスルー テキスト］フィールドに、表示するテキストを入力します。既定では、［続きを読む］というテキストが含まれます。
  7. 公開日を表示するには、［公開日を表示］のチェックボックスをオンにします。
  8. ［公開日の形式］ドロップダウンメニューで、公開日の形式を選択します。
  9. ［公開日インジケーターテキスト］フィールドに、表示するインジケーターテキストを入力します。既定では、［投稿日時］というテキストが含められます。

• RSSリスティングモジュールの編集が終了したら、右上の［変更を公開］をクリックします。

セクションの見出し

セクションの見出しモジュールを使用すると、見出しタグ内に段落のサブタイトルとともにテキストを表示できます。 

• セクションの見出しモジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［セクションの見出し］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［セクションの見出しの内容］フィールドのテキストを入力します。 
  5. ［見出しのレベル］ドロップダウンメニューで、テキストコンテンツの見出しのレベル（H1-H6）を選択します。

• セクションの見出しモジュールの編集が終了したら、右上の［変更を公開］をクリックします。

シンプルメニュー

シンプル メニュー モジュールを使用して、特定のテンプレート用のメニューを作成できます。

• シンプル メニュー モジュールの既定のコンテンツを編集するには、次の手順に従います。

1. 1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
   2. 対象となるテンプレートに移動します。
   3. レイアウトエディターで、［シンプルメニュー］モジュールをクリックするか、モジュールを追加します。
   4. インスペクターの［既定のコンテンツ］セクションで、［シンプルメニュー］フィールドの［編集］メニューをクリックします。 

1. 5. シンプルメニューを編集するには、［メニュー項目を追加］をクリックします。次に、［メニュー項目ラベル］フィールドのテキストを入力します。既定のメニュー項目タイプは、［ページリンク］に設定されています。
      • メニュー項目タイプを外部URLリンクに変更するには、［アクション］ドロップダウンメニューをクリックし、［URLリンク］をクリックします。
      • メニュー項目タイプをURLリンクなしのタイプに変更するには、［アクション］ドロップダウンメニューをクリックし、［リンクなし］をクリックします。
      • メニュー項目タイプをURLパラメーター付きのHubSpotでホスティングされるページに変更するには、［アクション］ドロップダウンメニューをクリックし、［URLパラメーターを含むページリンク］をクリックします。

1. 6. ［メニューの表示方向］フィールドで、［横］または［縦］を選択します。メニューの表示方向設定を変更すると、hs-menu-flow-horizontalまたはhs-menu-flow-verticalのクラスがメニュー ラッパー コンテナーに追加されます。このクラスを使用して、CSSでメニューのスタイルを設定できます。モジュール設定によって追加されるクラスの詳細については、開発者ドキュメントをご確認ください。

• シンプル メニュー モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

ソーシャルシェアリング

ソーシャル シェア モジュールを使用すると、ソーシャル メディア チャネルやEメールでコンテンツを共有するためのオプションを訪問者に提供できます。

• ソーシャル シェア モジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［ソーシャルシェア］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［リンクURL］フィールドにオプションのカスタムページURLを入力します。
  5. 各ソーシャル ネットワーク セクションで、セクションをクリックして展開し、［有効？］チェックボックスをオンにして、コンテンツに含めます。
  6. ソーシャルネットワークを有効にすると、［リンク］フィールドに、コンテンツを共有するために必要なHubLタグが自動的に設定されます。マーケティングEメールでは、このモジュールによって共有リンクでそのEメールの「ウェブ」バージョンのURLが使用されます。
     

注：ソーシャル シェア モジュールでは、各ソーシャルネットワークの既定のアイコンが使用されます。独自のカスタム ソーシャル アイコンを使用する場合は、カスタマイズされたバージョンのモジュールを作成できます。

• ソーシャル シェア モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

SNSフォロー

ソーシャル フォロー モジュールを使用すると、ソーシャルメディアで自社をフォローするためのオプションを訪問者に提供できます。

• ソーシャル フォロー モジュールの既定のコンテンツを編集するには、次の手順に従います。

1. 1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
   2. 対象となるテンプレートに移動します。
   3. レイアウトエディターで、［ソーシャルフォロー］モジュールをクリックするか、モジュールを追加します。

• 4. ソーシャル フォロー モジュールから既存のソーシャルリンクを編集するには、インスペクターでeditIcon編集アイコンをクリックします。URLをカスタマイズして、［リンクを新しいウィンドウで開く］、［このリンクはポッドキャストです］、［代替テキストをカスタマイズ］、および／または［アイコンをカスタマイズ］チェックボックスをオンにします。

1. 5. ソーシャル フォロー モジュールからソーシャルリンクを削除するには、インスペクターでdeleteIcon 削除アイコンをクリックします。
   6. ソーシャル フォロー モジュールにソーシャルリンクを追加するには、インスペクターで［+追加］をクリックします。［リンク先］ドロップダウンメニューで、［外部］または［Eメールアドレス］を選択します。

• ソーシャル フォロー モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

配信設定

配信設定モジュールを使用して、Eメール受信者が配信設定を管理するときに表示されるコンテンツをカスタマイズできます。このモジュールは、配信設定システムテンプレートでのみ使用できます。

• 配信設定モジュールの既定のコンテンツを編集するには、次の手順に従います。

1. 1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
   2. 対象となるテンプレートに移動します。
   3. レイアウトエディターで、［配信設定］モジュールをクリックします。
   4. インスペクターの［既定のコンテンツ］セクションで、［ヘッダー］フィールドにテキストを入力します。
   5. ［ヘッダーの見出しレベル］ドロップダウンメニューで、見出しレベル（H1-H6）を選択します。
   6. ［Eメールの見出しレベル］ドロップダウンメニューで、見出しレベル（H1-H6）を選択します。
   7. ［サブヘッダー］フィールドで、expandIcon展開アイコンをクリックしてテキストを編集します。

1. 8. 次のフィールドに、必要なテキストを入力します。
      • 設定選択時のヘルプテキスト
      • 全ての配信を停止のヘルプテキスト
      • 現在配信登録していないユーザーに対する全配信停止のヘルプテキスト
      • 全ての配信を停止のラベル
      • 設定更新のボタンテキスト
      • 配信再登録のボタンテキスト

• 配信設定モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

配信の更新確認

配信の更新確認モジュールを使用して、Eメール受信者が配信設定を更新したときに表示されるコンテンツをカスタマイズできます。このモジュールは、Eメール配信登録確認システムテンプレートでのみ使用できます。

• 配信の更新確認モジュールの既定のコンテンツを編集するには、次の手順に従います。

1. 1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
   2. システムテンプレートに移動します。
   3. レイアウトエディターで、［配信の更新確認］モジュールをクリックします。
   4. インスペクターの［既定のコンテンツ］セクションで、［ヘッダー］フィールドのテキストを入力します。
   5. ［ヘッダーの見出しレベル］ドロップダウンメニューで、見出しレベル（H1-H6）を選択します。
   6. ［Eメールの見出しレベル］ドロップダウンメニューで、見出しレベル（H1-H6）を選択します。
   7. ［サブヘッダー］フィールドで、expandIcon展開アイコンをクリックしてテキストを編集します。

1. 8. ［配信停止時のメッセージ］フィールドに、訪問者が配信を停止したときに表示されるテキストを入力します。
   9. ［配信登録更新時のメッセージ］フィールドに、訪問者が配信設定を更新したときに表示されるテキストを入力します。

• 配信の更新確認モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

ウェブページとして表示

ウェブページとして表示モジュールを使用すると、マーケティングEメールをウェブページとして表示するためのオプションをEメール受信者に提供できます。Eメールのウェブ ページ バージョンの使用方法について詳細をご確認ください。

• ウェブページとして表示モジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. Eメールテンプレートに移動します。
  3. レイアウトエディターで、［ウェブページとして表示］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、expandIco 展開アイコンをクリックし、［ウェブ ページ テキストとして表示］フィールドに表示されるテキストを編集します。

• Eメール本文モジュールのスタイルオプションを編集するには、次の手順に従います。 
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. Eメールテンプレートに移動します。
  3. レイアウトエディターで、［ウェブページとして表示］モジュールをクリックするか、モジュールを追加します。
  4. インスペクターの［スタイルオプション］セクションで、［文字色］、［背景色］、［境界線の色］テキストフィールドに16進数の値を入力します。カラーパレットをクリックすることもできます。

• Eメール本文モジュールの編集が終了したら、右上の［変更を公開］をクリックします。

WhatsAppリンク 

WhatsAppリンクモジュールを使用して、会社に直接連絡するためのオプションをウェブサイトの訪問者に提供できます。このモジュールは、ページ、ブログ記事、ブログ リスト ページに追加できます。このモジュールを使用するには、WhatsAppチャネルをコミュニケーションの受信トレイに接続する必要があります。

注：このモジュールは、Marketing HubおよびService Hub のProfessionalおよびEnterpriseアカウントでのみ使用できます。

• WhatsAppリンクモジュールの既定のコンテンツを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. 対象となるテンプレートに移動します。
  3. レイアウトエディターで、［WhatsAppリンク］モジュールをクリックするか、
     モジュールを追加します。
  4. インスペクターの［既定のコンテンツ］セクションで、［設定へ］をクリックして、WhatsAppチャネルをコミュニケーションの受信トレイに接続します。 
  5. ［オプト イン テキスト］ドロップダウンメニューで、オプト イン オプションを選択します。
  6. ［表示］ドロップダウンメニューで、［テキストとアイコン］、［テキストのみ］、または［アイコンのみ］を選択します。 
  7. ［アイコンの位置］ドロップダウンメニューで、［左］または［右］を選択します。
  8. ［ボタンテキスト］フィールドで、ボタンに表示されるテキストを入力します。既定のテキストでは、［WhatsAppでチャット］と表示されます。
  9. ［WhatsAppアイコンのタイトル］フィールドに、アクセシビリティー用のタイトルテキストを入力します。既定のテキストは［WhatsAppアイコン］です。

• WhatsAppリンクモジュールの編集が終了したら、右上の［変更を公開］をクリックします。