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

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. [ Inline response for users(ユーザーのインライン応答 )]フィールドで、 expandIcon 展開アイコン をクリックし、訪問者がフォームを送信した後に表示される テキスト をカスタマイズします。

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

CTA

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

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

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

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

コンテンツライブラリー

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

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

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

フォーム

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

注：フォームモジュールは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. [画像の読み込み ]ドロップダウンメニューで、[ ブラウザーの既定]、[ 遅延]、または [eager]を選択します。
  10. [ リンク(任意) ]フィールドに、画像がクリックされた際の訪問者の移動先となる URL を入力します。

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

画像グリッド

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

• イメージ グリッド モジュールの既定のコンテンツを編集するには:
  
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. テンプレートに移動します。
  3. レイアウトエディターで、 Image Gridモジュールをクリックするか 、モジュールを追加します。
  4. 画像グリッドモジュールで既存の画像を編集するには、 インスペクターで editIc oneditアイコンをクリックします。既存の画像をアップロードまたは参照したり、リンクテキスト、リンクURL、またはホバーメッセージを編集したりできます。
  5. 画像グリッドモジュールで画像を削除するには、 インスペクターで deleteIcon deleteアイコンをクリックします。
  6. 画像グリッドモジュールに新しい画像を追加するには、 インスペクターで [+追加]をクリックします。
  7. [ 設定]をクリックして展開します。設定ペインでは、Hオーバー機能、Cリック機能、Cオルム、Aスペクト比を調整できます。 

• 画像グリッドモジュールの編集が終わったら、右上の[ 変更を公開 ]をクリックします。

イメージスライダー

イメージスライダーモジュールを使用して、同じモジュール内に複数の画像を自動的に表示することができます。 

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

• イメージ スライダー モジュールの編集が終わったら、右上の[ 変更を公開 ]をクリックします。

言語切り替え機能

言語切り替えモジュールを使用すると、訪問者がページまたはブログの翻訳済みバージョンを切り替えることができます。 

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

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

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

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

ロゴ

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

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

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

ロゴグリッド

ロゴ グリッド モジュールを使用して、異なるサイズの複数のロゴを一貫したグリッドに配置できます。

• ロゴグリッドモジュールの既定のコンテンツを編集するには、次の手順に従います。
  
  1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  2. テンプレートに移動します。
  3. レイアウトエディターで、 ロゴグリッドモジュールをクリックするか 、モジュールを追加します。
  4. 既存の画像を編集するには、 インスペクターで editIconeditアイコンをクリックします。既存の画像をアップロードまたは参照したり、代替テキストや画像の読み込みを編集したりできます。
  5. ロゴグリッドモジュールの画像を削除するには、 インスペクターで deleteIcon deleteアイコンをクリックします。
  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. レイアウト エディターで、[ Office Location Information] モジュールをクリックします。
  4. インスペクター の[ 既定のコンテンツ ]セクションで、 expandIcon展開アイコンをクリックし、Eメールに必要な トークンとともに表示される テキスト を編集します。

• オフィス所在地情報モジュールのスタイルオプションを編集するには、次の手順に従います。
  • HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  • テンプレートに移動します。
  • レイアウト エディターで、[ Office Location Information ] モジュールをクリックします。
  • インスペクター の[ スタイル設定オプション]セクションで、[ テキストの色]、[ 背景色]、[ 境界線の色]のテキストフィールドに 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. [投稿の並べ替え基準] ドロップダウンメニューで、[ 最近]、[ 最も人気のある投稿 - 全期間]、[ 過去1年間で最も人気のある]、[ 過去6か月間]、[ または[過去1か月間]を選択します。
  6. [ フィードに表示される内容を選択]フィールドで、[ 画像]、[ タイトル]、[ 作成者名]、および/または [公開日]の横にある チェックボックス をオンにします。
  7. [ リストするブログ記事の最大 数]フィールドに、表示するブログ記事の最大 数 を入力します。
  8. [ 投稿見出し ]フィールドに、モジュールの上部に表示される テキストを入力します。
  9. [ 見出しレベル ]ドロップダウンメニューで、モジュールのコンテンツの 見出しレベル(H1-H6) を選択します。

• 記事リストモジュールの編集が終わったら、右上の[ 変更を公開 ]をクリックします。

製品

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

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

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

リッチテキスト

リッチテキストモジュールは、テキスト、画像、CTAなどのさまざまなコンポーネントの編集オプションをサポートしています。

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

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

RSSリスティング

RSS リスト モジュールを使用して、HubSpotブログまたは外部RSS フィードのブログ記事サマリーを表示することができます。

注： RSSリストモジュールはEメールテンプレートではご利用いただけません。代わりにRSSメール。 

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

• 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が使用されます。
     

注：ソーシャル共有モジュールは、各ソーシャルネットワークのデフォルトアイコンを使用します。独自のカスタムソーシャルアイコンを使用したい場合は、モジュールのカスタマイズバージョンを作成することができます。

• ソーシャルの共有モジュールの編集が終わったら、右上の[ 変更を公開]をクリックします。

ソーシャルフォロー

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

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

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

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

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

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

配信設定

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

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

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

1. 8. 次のフィールドに、必要な テキストを入力します。
      • プリファレンス選択のヘルプテキスト
      • 全配信停止のヘルプテキスト
      • a. 現在配信登録されていないユーザーの全配信停止のヘルプテキスト
      • すべてのラベルの配信を解除
      • [設定を更新]ボタンのテキスト
      • 再登録ボタンのテキスト

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

配信登録の更新確認

配信登録の更新確認モジュールを使用することにより、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. レイアウトエディターで、[ Web ページとして表示 ] モジュールをクリックするか、モジュールを追加します。
  4. イン スペクター の[ 既定のコンテンツ ]セクションで、expandIco 展開アイコンをクリックして、[ ウェブページとして表示]テキスト フィールドに表示される テキスト を編集します。

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

• Eメール本文のメインモジュールの編集が完了したら、右上にある [変更を公開 ]をクリックします。

WhatsAppリンク 

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

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

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

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