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