更新日時 2023年 1月 19日
この記事では、デザインツールでドラッグ＆ドロップのテンプレートに使用可能なすべての既定のモジュールの概要を説明します。各モジュールタイプは、インスペクターのスタイルとコンテンツのオプションを使用してカスタマイズできます。HubLスニペットを使用して、既定のモジュールをHTMLテンプレートに追加することもできます。
モジュールをテンプレートに追加する
ドラッグ＆ドロップテンプレートにモジュールを追加するには、エディターの右上にあるインスペクターで［+追加］をクリックします。すべての既定のモジュールと保存されたカスタムモジュールまたはグループがここに表示されます。特定のモジュールを見つけるには、検索バーに名前を入力します。［カテゴリーまたはタグによる絞り込み］ドロップダウンメニューをクリックし、1つ以上のフィルターを選択することもできます。
モジュールのスタイル、設定、コンテンツは、エディターでモジュールを選択するときに、インスペクターで変更できます。［ラッピングHTML］をセクションで［展開］クリックして、コードエディターでさらにカスタムスタイルを追加します。
インスペクターの下部に、ブログ、Eメール、またはページを編集するときに既定のコンテンツを変更できないようにモジュールをロックするオプションがあります。この設定を有効にするには、［コンテンツエディターでの編集を禁止する］をクリックしてオンに切り替えます。
既定のモジュールをカスタマイズする
Marketing Hub ProfessionalおよびEnterprise、ならびにCMS Hub ProfessionalおよびEnterpriseのすべてのアカウントでは、デザインツールに「@hubspot」というフォルダーが既定で用意されています。このフォルダーには、ドラッグ＆ドロップEメールモジュールなど、テーマと既定のモジュールがすべて含まれています。これらのテーマとモジュールは読み取り専用ですが、編集する必要がある場合は、複製して編集できます。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ファインダーで、@hubspotフォルダーをクリックします。
- 複製する既定のモジュールを右クリックし、［モジュールを複製］を選択します。
- 複製したモジュールで、中央の編集パネルでモジュールのソースコードを編集します。
- 変更内容を保存するには、右上の［変更を公開］をクリックします。これでテンプレート作成時に変更後のモジュールを使用できるようになります。
既定のモジュールタイプ
サブスクライブ解除バックアップ
Eメール受信者がサブスクライブ解除リンクをクリックしたときに、HubSpotがそのEメールアドレスを確認できない場合は、Eメール受信者に対してサブスクライブ解除バックアップテンプレートが表示されます。このモジュールの［既定のコンテンツ］セクションで、サブスクライブ解除バックアップページに表示されるテキストをカスタマイズできます。
ブログコメント
注：ブログ コメント モジュールは、Eメールテンプレートでは使用できません。
ブログ コメント モジュールは、ブログ記事テンプレートにコメントセクションを追加します。フォームツールでブログのコメントフォームをカスタマイズすることができます。フォームには、ブログのタイトルに基づいて名前が付けられます。
ブログコンテンツ
注：ブログ コンテンツ モジュールは、ページまたはEメールテンプレートでは使用できません。
ブログ コンテンツ モジュールは、ブログ記事とブログ リスト ページのHTML／HubLマークアップを格納します。［記事テンプレートを編集］をクリックして記事のマークアップを編集したり、［リスティングテンプレートを編集］をクリックしてリストページのマークアップを編集したりすることができます。ブログ コンテンツ モジュールのマークアップについて詳細をご確認ください。
ブログのEメールサブスクリプション
注：ブログのEメール サブスクリプション モジュールは、Eメールテンプレートでは使用できません。
ブログのEメールサブスクリプションのモジュールを使用すると、訪問者がフォームに入力することによってブログのダイジェストメールをサブスクライブできるようになります。このモジュールには、ブログのサブスクライバーフォームのデータが入力されます。このフォームは、フォームツールでカスタマイズできます。
［表示するブログを選択］ドロップダウンメニューをクリックして、訪問者がサブスクライブしているブログを選択します。［上記のフォームを表示するタイトル］テキストボックスを使用して、フォームの上のタイトルに表示されるテキストをカスタマイズできます。既存のインライン応答の上にカーソルを重ねて展開アイコンをクリックし、訪問者がフォームを送信した後に表示されるテキストをカスタマイズします。
CTA
CTAモジュールは、レイアウト内の独自のモジュールにCTAを配置します。リッチ テキスト モジュールにCTAを挿入することもできます。
インスペクターで、［CTA］
フレキシブルカラム
フレキシブルカラムをページテンプレートに追加して、コンテンツエディター内でモジュールを追加、削除、並べ替えを行うことができます。これにより、ページ作成者1つのテンプレートを使用して柔軟に複数のページレイアウトを作成できます。
- フレキシブルカラムは、ブログ、システムページ、Eメールテンプレートでは使用できません。
- コンテンツエディターで特定のページのフレキシブルカラムをカスタマイズすると、テンプレートのフレキシブルカラムに加えられた変更は、そのページでは反映されません。したがって、カスタマイズされたコンテンツが上書きされることはありません。
テンプレートにフレキシブル カラム モジュールを追加すると、その他のモジュールをドラッグ＆ドロップして、フレキシブル カラム グループを作成できます。既存の静的グループを右クリックして、［フレキシブルカラムを作成］を選択することもできます。
Follow Me
注：Follow Meジュールは、Eメールテンプレートでは使用できません。
Follow Me
Follow Meモジュールを追加するときに、ソーシャルアイコンの上に表示されるモジュールヘッダーをカスタマイズできます。
ソーシャル設定の［Follow Me］セクションで、このモジュールに表示されるソーシャル メディア ネットワークを指定できます。
注：［Follow Me］モジュールでは、各ソーシャルネットワークの既定のアイコンが使用されます。独自のカスタム ソーシャル アイコンを使用する場合は、モジュールをカスタマイズしたバージョンを作成できます。
Follow Me - Eメール
注：このモジュールは、ドラッグ＆ドロップエディターで作成されたEメールにのみ利用できます。このモジュールはエディター内のソーシャル名の下にあります。
Follow Me - Eメールモジュールには、ドラッグ＆ドロップEメールテンプレートの追加のフォーマットや設定オプションがあります。このモジュールでは、ソーシャルアイコンの形状、色
このモジュールに表示されるソーシャルネットワークを編集するには、インスペクターの［ソーシャルネットワーク］セクションで［+追加］アイコンをクリックします。次に、ソーシャルネットワークの名前の上にカーソルを重ねて
編集アイコンをクリックして、表示するソーシャルネットワークと、そのリンク先のURLを選択します。［カスタムアイコン］を選択すると、このネットワークのカスタム画像を指定するための追加オプションが表示されます。［置換］をクリックして、ファイルツールから画像を選択するか、コンピューターから新しい画像をアップロードします。
フォーム
注：フォームモジュールはEメールテンプレートでは使用できません。
フォームモジュールでは、ウェブサイト訪問者からコンタクト情報を取得するためのフォームを、ページまたはブログに追加できます。
このモジュールでは、次のようなカスタマイズが可能です。
- フォームタイトル：ページまたはブログに表示されるフォームのタイトルを入力します。
- フォーム：ページに表示される既存のHubSpotフォームを選択するか、新しいフォームを追加します。
- フォーム送信後に訪問者に何を表示しますか？：フォームを送信する人を別のページにリダイレクトするか、同じページにインライン サンキュー メッセージを表示するかを選択します。
- サンキューメッセージ：インライン サンキュー メッセージをカスタマイズします。
- フォームの既定設定ではなく、指定されたEメールアドレスにフォーム通知を送信：フォーム通知Eメールを特定のアドレスに送信します。この設定により、フォームツールで設定された通知受信者が上書きされます。
- ワークフローに追加：フォームを送信した訪問者をワークフローに追加します（Marketing Hub ProfessionalまたはEnterpriseのみ）。
- フォローアップEメールを送信：フォームを送信した訪問者に最大3件のフォローアップEメールを送信します。
ヘッダー
ヘッダーモジュールにより、見出しHTMLタグにテキストの行が表示されます。既定のヘッダーテキストを［ヘッダーコンテンツ］ボックスに入力します。［ヘッダーのタイプ］ドロップダウンメニューをクリックして、見出しタグ（H1-H4）を選択します。
水平方向スペーサー
水平方向スペーサーモジュールでは、ページ内の要素間に間隔を追加するために使用できる空のdivタグが作成されます。
画像
画像モジュールは、コンテンツに単一の画像を追加します。画像モジュールの編集オプションについて詳細をご確認ください。
画像ギャラリー
画像ギャラリーモジュールは、一連の回転画像を1つのモジュールに追加します。画像ギャラリーモジュールのカスタマイズ可能な設定について詳細をご確認ください。
言語切り替え機能
注：言語切り替えモジュールはEメールテンプレートでは使用できません。
言語切り替えモジュールを使用して、訪問者がページまたはブログの翻訳版を切り替えられるようにすることができます。［表示モード］ドロップダウンメニューをクリックして、翻訳された言語の名前の表示をカスタマイズします。
ページ言語： 各言語名が現在のページの言語で表示されます。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、EnglishとFrenchが言語名として表示されます。- ローカライズ：各言語の名前がその言語で表示されます。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、EnglishとFrançaisが言語名として表示されます。
- ハイブリッド：2つの組み合わせです。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、EnglishとFrench（Français）が言語名として表示されます。
このモジュールは、複数の公開済み翻訳がある公開中のページにのみ表示されます。HubSpotでの複数言語コンテンツの使用について詳細をご確認ください。
ロゴモジュール
ロゴモジュールには、ウェブサイト設定から自動的に会社のロゴが表示されます。別のロゴを変更する場合は、［このページの既定のロゴを上書き］スイッチをクリックしてオンに切り替えて、このページ専用の新しい画像をアップロードできます。ウェブサイト設定ですべてのコンテンツの既定ロゴを変更するには、［このドメインの既定のロゴを編集］をクリックします。
ロゴモジュールは自動的に会社ドメインにリンクされます。この既定を上書きして別のページにリンクするには、一意のリンクURLを入力して、この既定を上書きできます。
Eメール本文
Eメール本文モジュールは、すべてのEメールテンプレートで既定で含まれる標準リッチ テキスト モジュールです。特定のテンプレートのEメール本文の既定のコンテンツをカスタマイズできます。
標準のスタイルオプションに加えて、このモジュールは既定の色、境界線、間隔をカスタマイズできます。既定の色を設定するには、色見本をクリックしてカラーピッカーから色を選択するか、16進数の値をテキストフィールドに入力します。既定の間隔を設定するには、［境界線の幅］と［内側の間隔］テキストフィールドにピクセル値を入力してください。
メニュー
メニューモジュールは、コンテンツやテンプレートにナビゲーションを追加します。メニューは、ウェブサイト設定で直接作成および管理されます。
デザインツール内で、メニューモジュールの次の機能をカスタマイズできます。
- メニュー：設定から既存のメニューを1つ選択します。
- 詳細メニュータイプ：メニュー項目がサイトでどのように表示されるかを選択します。
- 静的 - 常にメニューの最上位ページが表示
されます： すべてのページでメニューの一貫性を維持します。 - 動的（セクション別） - 表示されている
ページに 関連するメニューのページが表示されます ：表示されているトップレベルメニュー項目に対するメニュー項目が表示されます。 - 動的（ページ別） - 表示されている
ページに 関連するメニューのページが表示されます ：表示されている特定のページに関連するメニュー項目が表示されます。 - パンくず形式のパスメニュー（横フローを使用）：サイト上部の相対パスにメニュー項目が水平方向に表示されます。
- 静的 - 常にメニューの最上位ページが表示
- 最大レベル数：表示可能な子メニュー項目の最大数を選択します。
- 方向：メニュー項目を水平方向と垂直方向のいずれで表示するかを選択します。
- フライアウトを有効にする：親の上にカーソルを置くと子メニュー項目を表示するには、このチェックボックスをオンにします。このチェックボックスをオフにすると、常に子メニュー項目が表示されます。
モジュール
コードエディターで作成されたモジュールを使用すると、HTML、CSS、Javascript、HubLを使用してテンプレートに高度な機能を追加できます。また、ユーザーがコードを変更することなくそのモジュールコンテンツをコンテンツエディターで編集することもできます。ファインダーとインスペクターでは、これらのコンポーネントがモジュールアイコンでラベル付けされます。カスタムコーディングされたモジュールの使用についての詳細は、開発者ドキュメントをご覧ください。
オフィス所在地情報
オフィス所在地情報モジュールには、合法的にマーケティングEメールを送信するために、Eメールテンプレートに含めなければならない必須のトークンが含まれています。このモジュールのスタイルは編集できますが、オフィス所在地情報モジュールが使用されていない状態、または必須の
標準のスタイルオプションに加えて、このモジュールは既定の色、境界線、間隔をカスタマイズできます。既定の色を設定するには、色見本をクリックしてカラーピッカーから色を選択するか、16進数の値をテキストフィールドに入力します。既定の間隔を設定するには、［境界線の幅］と［内側の間隔］テキストフィールドにピクセル値を入力してください。
1行テキスト
1行テキストモジュールにより、ユーザーがコンテンツエディターで1行テキストを編集することができます。
ページフッター
ページ フッター モジュールは、著作権情報を現在の年と会社名と併せて表示します。会社名は、Eメール設定の［フッター］セクションから自動的に表示されます。
パスワードプロンプト
パスワード プロンプト モジュールは、パスワードプロンプトのシステムテンプレートで使用できます。ページがパスワードで保護されている場合、ユーザーがページにアクセスする前にパスワード プロンプト ページが表示されます。送信ボタンのテキストと、誤ったパスワードが入力された場合に表示するテキストは、カスタマイズできます。
投稿フィルター
注：ブログのEメール サブスクリプション モジュールは、Eメールテンプレートでは使用できません。
投稿フィルターモジュールは、特定のトピック、月、または執筆者のブログ記事のリストを表示します。
［既定のコンテンツ］セクションで、このモジュールの次の設定をカスタマイズできます。
- 表示するブログを選択：使用するブログ記事を選択します。
- フィルターリンクの値リスト：モジュールがタグ、月、または執筆者のいずれでフィルタリングされるかを選択します。
- フィルターリンクの値の順位付け：値をアルファベット順または記事数のいずれで並べ替えるかを選択します。
- 表示するタイトルをリストする：記事の上に表示するタイトルを入力します。
- 表示するフィルター値の最大数：特定のフィルターの記事の最大数を入力します。すべての記事を表示するには、このフィールドを空白のままにします。
- 記事数が表示可能な数を超える場合に表示するテキストリンク：カテゴリーに多くの記事がある場合に表示するテキストを入力します。既定のテキストは「すべて表示」です。
記事一覧
注：ブログのEメール サブスクリプション モジュールは、Eメールテンプレートでは使用できません。
記事一覧モジュールは、HubSpotブログの記事のリストを表示するために使用します。過去1か月間、過去6か月間、過去1年、すべての期間における最新記事または最も人気のある記事を表示するように、このモジュールを設定できます。
インスペクターは、以下のコンテンツの既定をカスタマイズできます。
- 表示するブログを選択：記事のタイトルを表示するブログを選択します。
- ブログ記事を次の基準でリストする：記事の編成方法を選択します。
- 表示するタイトルをリストする：記事の上に表示するタイトルを入力します。
- リストするブログ記事の最大数：このモジュールで表示する記事の最大数を入力します。
リッチテキスト
リッチ テキスト モジュールは、HubSpotコンテンツツール全体で最もよく使用されるコンテンツモジュールです。テキスト、画像、CTAなど、さまざまなコンポーネントの編集オプションをサポートしています。
このモジュールの既定のコンテンツを追加する場合は、［展開］をクリックするか、プレビューコンテンツをクリックしてリッチテキストエディターを開きます。
RSSリスティング
注：RSSリスティングモジュールは、Eメールテンプレートでは使用できません。代わりにRSS Eメールを使用します。
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メールのウェブページ版を開くためのオプションを使用できます。
