HubSpotのデフォルトのモジュール

コンテンツエディターとデザインマネージャーでは、ほとんどのタイプのコンテンツで特定のデフォルトモジュールを使用できます。

HubLスニペットを使用することで、これらのデフォルトのモジュールをHTMLテンプレートに追加することもできます。カスタムテンプレートでのデフォルトのモジュールの使用について詳しくは、 開発者ドキュメントをご確認ください。 

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

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

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

• ［デフォルトのコンテンツ］セクションで、コンテンツエディターにモジュールを追加したときに表示されるコンテンツをカスタマイズします。 

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

デフォルトモジュールをカスタマイズする

Marketing Hub ProfessionalおよびEnterpriseとContent Hub ProfessionalおよびEnterpriseの全てアカウントでは、デザインマネージャーに「@hubspot」フォルダーが用意されています。

このフォルダーには、テーマと、ドラッグ＆ドロップEメールモジュールを含むデフォルトモジュールが全て含まれています。これらのテーマやモジュールは読み取り専用ですが、編集する場合は複製できます。

• HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
• ファインダーで、［@hubspot］フォルダーをクリックします。
• デフォルトモジュールを右クリックし、［モジュールを複製］を選択します。
  
  
• 複製したモジュールで、モジュールのソースコードを編集します。
• 右上の［変更を公開］をクリックします。

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

HubSpotは定期的に既存のデフォルトモジュールの新しいバージョンをリリースすることがあります。これにより、HubSpotは既存のコンテンツに影響を与えることなく大幅な更新を行うことができます。例えば、新しいバージョンのモジュールでは、フィールドの構成やスタイル設定のオプションが改善されたり、機能が追加されたりします。モジュールのバージョン管理のバックグラウンドについて詳しくは、 HubSpotの開発者向けドキュメントをご覧ください。

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

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

新しいバージョンのモジュールにオプトインするには、次の手順に従います。

• HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
• 左のサイドバーメニューで、［コンテンツ］＞［テーマとモジュール］に移動します。
• ［アラート］タブに、［更新があります］というタグで示された、デフォルトのモジュールの最新の更新が表示されます。更新の詳細を表示するには、モジュールの横にある［更新を表示］をクリックします。
  
  
• 右のサイドバーで、変更内容を確認します。サイドバーに、更新の概要と併せて、変更点ごとの詳細、および影響を受けるアセットが示されます。
  
  
• モジュールを更新するには、［更新をインストール］をクリックします。表示されるダイアログボックスで、［更新を確認］をクリックします。ページとテンプレートに更新後のモジュールが反映されるまでに最大10分かかる場合があります。

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

更新したモジュールを元に戻す

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

• HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
• 左のサイドバーメニューで、［コンテンツ］＞［テーマとモジュール］に移動します。
• ［モジュール］タブをクリックし、元に戻すモジュールを特定してから、［最近の更新をロールバック］をクリックします。
  
  
• 右のサイドバーで、モジュールのバージョン履歴を確認してから、［この更新をロールバック］をクリックします。
  
  
• 右のサイドバーで情報を確認し、更新をロールバックすることを決定したら、［ロールバック］をクリックします。 
• ダイアログボックスで、［確認］をクリックします。 

更新を元に戻した後、テンプレートおよびページに元に戻されたモジュールが反映されるまでに時間がかかる場合があります。随時、上記の更新手順に従ってモジュールを再度更新できます。

デフォルトのモジュールタイプ

配信停止バックアップ

backup unsubscribe templateは、HubSpotがEメールアドレスを特定できない場合に、配信停止リンクをクリックしたEメール受信者に表示されます。このモジュールの［デフォルトのコンテンツ］セクションで、配信停止バックアップページに表示されるヘルプテキストをカスタマイズできます。 

ブログコメント

注：ブログ コメント モジュールはページまたはEメールテンプレートでは使用できません。 

ブログ コメント モジュールにより、ブログ記事テンプレートにコメントセクションが追加されます。フォームツールでブログコメントフォームをカスタマイズすることができます。フォームには、ブログのタイトルに基づいて名前が付けられます。 

ブログコンテンツ

注：ブログ コンテンツ モジュールはページやEメールテンプレートでは利用できません。 

ブログ コンテンツ モジュールは、ブログ記事とブログ リスト ページのHTML／HubLマークアップを格納します。記事のマークアップを編集するには［記事テンプレートを編集］をクリックし、リストページのマークアップを編集するには［リストテンプレートを編集］をクリックします。ブログコンテンツモジュールのマークアップについて詳細をご確認ください。

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

注：ブログのEメール配信登録モジュールはEメールテンプレートではご利用いただけません。 

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

「表示するブログを選択」ドロップダウンメニューをクリックし、訪問者が配信登録しているblogを選択します。［上記のフォームを表示するタイトル］テキストボックスを使用して、フォームの上のタイトルに表示されるテキストをカスタマイズできます。既存のインライン応答の上にマウスポインターを置き、expand展開アイコンをクリックして訪問者がフォームを送信した後に表示されるテキストをカスタマイズします。

CTA

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

インスペクターで、［CTA］  ドロップダウン  メニューを開き、テンプレートでこのモジュールのデフォルトのCTAを選択します。または、同じメニューの［＋新規CTAを作成］をクリックしてデフォルトのCTAとして新しいCTAを作成します。 

コンテンツライブラリー

コンテンツ ライブラリー モジュールを使用して、訪問者がアクセスできるリソースのライブラリーを設定できます。ライブラリーでは、リソースのレイアウト、アイコン、フォント、色を設定できます。リソースごとに、名前、説明、リンクまたはファイル、および表示画像を設定できます。

また、コンテンツを特集として設定することで、コンテンツライブラリーの一番上で、行全体に表示されるようにすることもできます。 

フォーム

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

フォームモジュールでは、ウェブサイト訪問者からコンタクト情報を取得するためのフォームを、ページまたはブログに追加できます。

このモジュールでは、次のようなカスタマイズが可能です。 

1. フォームタイトル：ページまたはブログに表示されるフォームのタイトルを入力します。
2. フォーム：ページに表示される既存のHubSpotフォームを選択するか、新しいフォームを追加します。
3. フォーム送信後に訪問者に何を表示しますか？：フォームを送信する人を別のページにリダイレクトするか、同じページにインライン サンキュー メッセージを表示するかを選択します。
4. サンキューメッセージ：インライン サンキュー メッセージをカスタマイズします。
5. フォームのデフォルト設定ではなく、指定されたEメールアドレスにフォーム通知を送信：フォーム通知Eメールを特定のアドレスに送信します。この設定により、フォームツールで設定された通知受信者が上書きされます。 
6. ワークフローに追加：フォームを送信した訪問者をワークフローに追加します（Marketing Hub ProfessionalまたはEnterpriseのみ）。
7. フォローアップEメールの送信:フォームを送信した訪問者に最大3通のフォローアップEメールを送信します。

見出し

ヘッダーモジュールでは、heading HTMLタグにテキストの行が表示されます。［ヘッダーコンテンツ］ボックスに、デフォルトのヘッダーテキストを入力します。［ヘッダーのタイプ］ドロップダウンメニューをクリックして、見出しタグ（H1-H4）を選択します。

画像

画像モジュールにより、コンテンツに1枚の画像が追加されます。画像モジュールの編集オプションについて詳細をご確認ください。 

画像ギャラリー

画像ギャラリーモジュールは、一連の回転画像を1つのモジュールに追加します。画像ギャラリーモジュールのカスタマイズ可能な設定の詳細 . 

言語切り替え機能

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

言語切り替えモジュールを使用して、訪問者がページまたはブログの翻訳版を切り替えられるようにすることができます。［表示モード］ドロップダウンメニューをクリックして、翻訳された言語の名前の表示をカスタマイズします。

• ページ言語： 各言語名が現在のページの言語で表示されます。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、EnglishとFrenchが言語名として表示されます。 
• ローカライズ：各言語の名前がその言語で表示されます。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、言語名として［English（英語）］と［Français（フランス語）］が表示されます。
• ハイブリッド：2つの組み合わせ。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、言語名として［English（英語）］と［French（Français）（フランス語）］が表示されます。

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

ロゴ

ロゴモジュールは、ウェブサイト設定から会社のロゴを自動的に取り込みます。別のロゴを変更する場合は、［このページのデフォルトのロゴを上書き］スイッチをクリックしてオンに切り替えて、このページ専用の新しい画像をアップロードできます。ウェブサイト設定で全てのコンテンツのデフォルトのロゴを変更するには、［このドメインのデフォルトのロゴを編集］をクリックします。

ロゴモジュールは、ブランドキットで指定されたURLに自動的にリンクされます。このデフォルトを上書きして別のページにリンクするには、固有のリンクURLを入力してください。

ロゴグリッド

ロゴ グリッド モジュールを使用すると、さまざまな寸法の複数のロゴを一貫性のあるグリッドに配置できます。背景色、アスペクト比、グリッドのサイズ、スペースの広さ、ロゴの最大の高さをカスタマイズできます。 

Eメール本文

Eメール本文モジュールは、デフォルトで全てのEメールテンプレートに含まれている標準のリッチ テキスト モジュールです。、特定のテンプレートでEメール本文のデフォルトのコンテンツをカスタマイズすることができます。

標準のスタイルオプションに加えて、このモジュールはデフォルトの色、境界線、間隔をカスタマイズできます。カラーバブルをクリックし、カラーパレットからカラーを選択するか、16進値をテキストフィールドに入力してデフォルトカラーを設定します。デフォルトの間隔を設定するには、［境界線の幅］と［内側の間隔］テキストフィールドにピクセル値を入力してください。 

メニュー

メニューモジュールにより、コンテンツとテンプレートにナビゲーションが追加されます。メニューはウェブサイト設定で直接作成・管理できます。 

デザインマネージャー内で、メニューモジュールの次の機能をカスタマイズできます。

1. メニュー:私の設定から既存のメニューのいずれかを選択します。
2. 詳細メニュータイプ：メニュー項目がサイトでどのように表示されるかを選択します。
   • 静的 - 常にメニューの最上位ページが表示  されます： 全てのページでメニューの一貫性を維持します。
   • セクションごとに動的 - のページを表示する。  ページに関連する  ページが  メニューに表示されます  ：表示されているトップレベルメニュー項目に対するメニュー項目が表示されます。 
   • Dynamic by page - 以下のページを表示。  ページに関連する  ページが  メニューに  表示されます：表示中のページに関連するメニュー項目が表示されます。
   • パンくず形式のパスメニュー（横フローを使用）：サイト上部の相対パスにメニュー項目が水平方向に表示されます。
3. 最大レベル：子メニュー表示できる最大数を選択します。
4. 方向：メニュー項目を水平方向と垂直方向のいずれで表示するかを選択します。
5. フライアウトを有効にする：親メニューの上にマウスポインターを置いたときに子メニューを表示するには、このチェックボックスをオンにします。このチェックボックスをオフにすると、常に子メニュー項目が表示されます。

モジュール

コードエディターで作成されたモジュールは、HTML、CSS、Javascript、および HubL を使用してテンプレートに高度な機能を追加することができ、同時にユーザーをコードを変更せずにコンテンツエディターでモジュールのコンテンツを編集することができます。これらのコンポーネントでは、ファインダーとインスペクターにcustomModulesモジュールのアイコンがラベル付けされます。カスタム コード モジュールの使い方について詳しくは、 開発者ドキュメントをご確認ください。

オフィス所在地情報

オフィス所在地モジュールには、必須トークンが含まれています。これは、合法的にマーケティングEメールを送信するために、Eメールテンプレートに含める必要があります。このモジュールのスタイルは編集できますがEメール、オフィス所在地情報モジュールまたは必須の  HubL  タグがないと、Eメールテンプレートを保存することはできません。 

標準のスタイルオプションに加えて、このモジュールはデフォルトの色、境界線、間隔をカスタマイズできます。カラーバブルをクリックし、カラーパレットからカラーを選択するか、16進値をテキストフィールドに入力してデフォルトカラーを設定します。デフォルトの間隔を設定するには、［境界線の幅］と［内側の間隔］テキストフィールドにピクセル値を入力してください。 

1行テキスト

1行テキストモジュールを使用すると、ユーザーはコンテンツエディターで1行のテキストを編集できます。 

ページフッター

ページ フッター モジュールには、現在の年や会社名と一緒に著作権情報が表示されます。会社名はEメール設定のフッターセクションから自動的に取り込まれます。

パスワードプロンプト

パスワードプロンプトモジュールは、パスワードプロンプトシステムテンプレートで利用できる。ページがパスワードで保護されている場合、ユーザーがページにアクセスする前にパスワード プロンプト ページが表示されます。送信ボタンのテキストと、誤ったパスワードが入力された場合に表示するテキストは、カスタマイズできます。

記事フィルター

注：ブログのEメール配信登録モジュールはEメールテンプレートではご利用いただけません。 

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

［デフォルトのコンテンツ］セクションで、このモジュールの次の設定をカスタマイズできます。 

• 表示するブログを選択：使用するブログ記事を選択します。
• フィルターリンクの値リスト：モジュールがタグ、月、または執筆者のいずれで絞り込みされるかを選択します。
• フィルターリンクの値の順位付け：値をアルファベット順または記事数のいずれで並べ替えるかを選択します。
• 表示するタイトルをリストする：記事の上に表示するタイトルを入力します。
• 表示するフィルター値の最大数：特定のフィルターの記事の最大数を入力します。全ての記事を表示するには、このフィールドを空白のままにします。 
• 記事数が表示可能な数を超える場合に表示するテキストリンク：カテゴリーに多くの記事がある場合に表示するテキストを入力します。デフォルトのテキストは「全て表示」です。

記事一覧

注：ブログのEメール配信登録モジュールはEメールテンプレートではご利用いただけません。 

記事一覧モジュールは、HubSpotブログ記事のリストを表示するために使用します。過去1か月間、過去6か月間、過去1年、全ての期間における最新記事または最も人気のある記事を表示するように、このモジュールを設定できます。 

インスペクターは、以下のコンテンツのデフォルトをカスタマイズできます。

• 表示するブログを選択：記事のタイトルを表示するブログを選択します。
• ブログ記事を次の基準でリストする：記事の編成方法を選択します。
• 表示するタイトルをリストする：記事の上に表示するタイトルを入力します。
• リストするブログ記事の最大数：このモジュールで表示する記事の最大数を入力します。 

製品

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

リッチテキスト

リッチ テキスト モジュールは、HubSpotコンテンツツールの中で最もよく使用されているコンテンツモジュールです。テキスト、画像、CTAなどのさまざまなコンポーネントの編集オプションがサポートされます。

このモジュールのデフォルトコンテンツを追加するには、Expandをクリックするか、preview contentをクリックしてリッチテキストエディターを開きます。

RSSリスティング

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

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

RSSリストモジュールでは、特定のブログまたはタグを表示できます。対応するスイッチをクリックしてオンに切り替え、キービジュアル、執筆者名、概要、公開日を各投稿で表示するかどうかを指定します。

これらの設定を有効にした後に、次の詳細をカスタマイズできます。 

• 投稿者名を表示：各作成者名の上に表示する投稿者属性テキストを入力します。デフォルトでは、このモジュールには属性テキストとして「作成者：」が含まれます。
• サマリーを表示：各ブログサマリーのサマリーの長さ（文字数）を入力します。サマリー クリックスルー テキストをカスタマイズすることもできます。これは、ブログの訪問者が完全な記事を読むためにクリックするリンクです。デフォルトでは、このテキストには「続きを読む」というラベルが付けられます。
• 公開日を表示 - ［公開日の形式］を選択して、各記事の日付と時刻の形式をカスタマイズします。公開日インジケーターテキストをカスタマイズすることもできます。デフォルトでは、このテキストは「投稿日時」となります。

セクションの見出し

セクション ヘッダー モジュールでは、段落のサブタイトルが含まれるh1見出しタグを表示できます。このモジュールは、ページのプライマリーセクションのタイトル設定に最適です。

シンプルメニュー

シンプル メニュー モジュールでは、コンテンツエディターでページ固有のメニューを作成できます。このモジュールでは、特定のテンプレートのシンプルメニューを柔軟に作成できます。インスペクターで、「「メニューを編集」（メニューの編集）」をクリックして、メニュー項目、リンクを追加し、メニューの向きを選択します。メニューの方向設定を編集すると、「hs-menu-flow-horizontal」または「hs-menu-flow-vertical」クラスがメニュー ラッパー コンテナーに追加されます。CSSでのスタイル設定において、それを使用することができます。モジュール設定によって追加されたクラスの詳細については、 開発者ドキュメントをご確認ください。

ソーシャルシェアリング

ソーシャル シェアリング モジュールを使用すると、訪問者がソーシャル メディア チャネルやEメールでコンテンツを簡単に共有できるようになります。特定のソーシャルネットワークをページまたはEメールに組み込むには、そのソーシャルネットワークの横にある［有効になっていますか？］スイッチをクリックしてオンに切り替えます。

コンテンツを共有するために必要なHubLタグが、共有リンクに自動的に入力されます。Eメールでは、モジュールは共有リンクにそのEメールの「ウェブ」バージョンのURLを使用します。

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

ソーシャルフォロー

ソーシャル フォロー モジュールを使用すると、ソーシャルメディアで自社をフォローするように訪問者を誘導することができます。ソーシャルネットワークごとに、カスタムリンクまたはEメールアドレスを設定できます。デザインマネージャーでは、各ソーシャルネットワークのカスタムアイコンを設定することもできます。 

配信設定

サブスクリプション設定モジュールは、サブスクリプション設定システムテンプレートでのみ利用可能です。 

これらのモジュールでは、Eメール受信者が配信設定を管理したり、Eメール通信を配信登録解除したりするときに表示されるページをカスタマイズできます。

サブスクリプションの更新確認

購読更新確認モジュールは、購読更新確認システムテンプレートで利用可能なリッチテキストモジュールです。このモジュールを使用すると、Eメール受信者が配信設定を更新したときに表示される内容をカスタマイズできます。

ウェブページとして表示

ウェブページとして表示モジュールにより、Eメールの受信者にEメールのウェブページバージョンを開くオプションが提供されます。 

WhatsAppリンク 

注：このモジュールはMarketing HubおよびService Hub ProfessionalおよびEnterpriseアカウントでのみご利用いただけます。

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

色や間隔などのボタンスタイルは、ページエディターの［タイル］タブ内でカスタマイズすることができ、以下の要素を設定することができます：

• WhatsApp番号：接続したWhatsApp番号を選択します。
• オプト イン テキスト：オプトインおよびオプトアウトのテキストを選択します。 
• 表示：ボタンにテキストを表示するか、アイコンを表示するか、またはその両方を表示するかを選択します。
• アイコンの位置：アイコンがテキストの左側と右側のどちらに表示されるかを選択します。
• ボタンテキスト：ボタンに表示されるテキストを入力します。
• WhatsApp アイコンのタイトル:アクセシビリティーのため、スクリーンリーダー用にアイコンの説明を入力してください。