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

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進数の値を入力します。カラーパレットをクリックすることもできます。