CMS-General

テンプレートで既定のモジュールを使用

更新日時 November 26, 2018

対象製品

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basic

これは、ドラッグ&ドロップのレイアウトテンプレートで使用できる既定のモジュールの概要です。各モジュールタイプは、インスペクターのスタイルとコンテンツのオプションでカスタマイズできます。このガイドでは、テンプレートにモジュールを追加する方法と、これらの各標準モジュールをコンテンツでどのように使用できるかを確認します。

モジュールをテンプレートに追加

ドラッグ&ドロップテンプレートにモジュールを追加するには、エディターの右側にあるインスペクターで [+追加] をクリックします。すべての既定のモジュールと保存されたモジュールまたはグループがここに表示されます。特定のモジュールを検索するには検索バーを使用します。ドロップダウンを使用して、コンポーネントをタイプ、カテゴリ、タグ別に絞り込むこともできます。

モジュールのスタイル、設定、コンテンツは、エディターでモジュールを選択するときに、インスペクターで変更できます。[展開] をクリックして、コードエディターでさらにカスタムスタイルを追加します。

インスペクタ―の下部に、ブログ、E メール、またはページエディターでコンテンツを変更できないようにモジュールをロックするオプションがあります。この設定を有効にするには、[コンテンツエディターでの編集を禁止する] をオンに切り替えます。

既定のモジュールタイプ

詳細メニュー

詳細メニューモジュールを使用してコンテンツやテンプレートにナビゲーションを追加できます。メニューツリーは、コンテンツ設定で直接作成され、管理されます。 

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

  1. メニュー - コンテンツ設定から既存の詳細メニューを 1 つ選択します。
  2. 詳細メニュータイプ - メニュー項目がサイトでどのように表示されるかを選択します。
    • 静的 - 常にメニューの最上位ページが表示されます - サイトのナビゲーション内のすべてのページでメニューの一貫性を保ちます。
    • 動的 (セクション別) - 表示されているセクションに関連するメニューのページが表示されます - 表示されている最上位のメニュー項目に相対的なメニュー項目が表示されます。
    • 動的 (ページ別) - 表示されているページに関連するメニューページが表示されます - 表示されている特定のページに関連するメニュー項目が表示されます。
    • パンくず形式のパスメニュー (横フローを使用) - サイト上部の相対パスにメニュー項目が水平方向に表示されます。
  3. 最大レベル数 - 表示可能な子メニュー項目の最大数。
  4. 方向 - メニューツリー内の項目をサイトで垂直方向と水平方向のどちらで表示するのかを指定する HTML マークアップを更新します。
  5. フライアウトを有効にする - 訪問者が子メニュー項目を含むメニューの上にカーソルを置いたときに表示するかどうかを示します。
詳細メニューオプション


サブスクライブ解除バックアップ

E メール受信者がサブスクライブを解除しようとするときに、HubSpot がその E メールアドレスを確認できない場合は、E メール受信者に対してサブスクライブ解除バックアップテンプレートが表示されます。このモジュールでは、このページに表示されるヘルプテキストを [既定のコンテンツ] セクションでカスタマイズできます。

詳細は、システムテンプレートの作成を参照してください。

サブスクライブ解除バックアップ

ブログコメント

ブログコメントモジュールは、個々のブログ記事テンプレートにコメントセクションを追加します。フォームツール ([コンタクト)] > [フォーム]) からブログコメントフォームをカスタマイズできます。フォームは、ブログのタイトルに基づいて名前が付けられます。このモジュールは、ブログテンプレートレイアウトでのみ使用できます。

既定のブログコメントフォーム

ブログコンテンツ

ブログコンテンツモジュールは、ブログ記事とブログリストページの両方の HTML/HubL マークアップを格納します。[記事テンプレートを編集] をクリックして記事のマークアップを編集したり、[リスティングテンプレートを編集] をクリックしてリストのマークアップを編集したりすることができます。

詳細は、ブログコンテンツモジュールのマークアップを参照してください。新しいブログコンテンツモジュールにモジュールを交換すれば、いつでも元のコードにモジュールを戻すことができます。

blog-content-1.png

ブログの E メールサブスクリプション

ブログの E メールサブスクリプションモジュールを使用すると、訪問者がフォームに入力することによってブログのダイジェストメールをサブスクライブできるようになります。このモジュールには、ブログのサブスクライバーフォームのデータが入力されます。このフォームは、フォームツールでアクセスしてカスタマイズできます。

ドロップダウンメニューを使用して、訪問者がサブスクライブしているブログを指定します。インスペクターのテキストボックスを使用して、フォームの上のタイトルに表示されるテキストをカスタマイズできます。既存のインライン応答の上にカーソルを置いて展開アイコン展開をクリックして、訪問者がフォームを送信した後に表示されるテキストをカスタマイズします。

: このモジュールは E メールテンプレートではサポートされていません。 

ブログの E メールサブスクリプション

CTA

CTA ボタンをリッチテキストモジュールに挿入するか、CTA モジュールを使用することができます。CTA モジュールは、レイアウトに単独で CTA を配置する場合に便利です。

インスペクターで [CTA] ドロップダウンメニューを使用して、モジュールに特定の CTA を選択します。また、[+新規 CTA を作成] をクリックして CTA ダッシュボードを開き、新しい CTA を作成することもできます。 

HubSpot のヘルプ記事のスクリーンショット


フレキシブルカラム

HubSpot ページテンプレートにフレキシブルカラムが追加されると、コンテンツエディターのページレベルでモジュールを追加、削除、並べ替えができます。これにより、デザイナーが作成するテンプレートは少なくてすみ、マーケターはニーズに応じて各ページを柔軟にカスタマイズすることができます。

注: このモジュールは、ブログ、システムページ、または E メールテンプレートでは使用できません。

テンプレートにフレキシブルカラムモジュールを追加すると、その他のモジュールをドラッグ&ドロップして、フレキシブルカラムグループを作成できます。既存の静的グループを右クリックして、[フレキシブルカラムを作成] を選択することもできます。

注: コンテンツエディターで特定のページのフレキシブルカラムをカスタマイズすると、テンプレートのフレキシブルカラムに加えられた変更は、そのページでは反映されません。したがって、カスタマイズされたコンテンツが上書きされることはありません。

Follow Me

Follow Me モジュールを使用すると、訪問者がソーシャルメディアであなたの会社と連絡をとりやすくなります。ソーシャルシェアリングモジュールとは異なり、Follow Me モジュールは、あなたのサイトからあなたの各ソーシャルメディアのページにユーザーを転送します。

Follow Me モジュールを追加するときに、ソーシャルアイコンの上に表示されるモジュールヘッダーをカスタマイズできます。

ソーシャルメディア設定の [Follow Me] セクションで、このモジュールに表示されるソーシャルメディアネットワークを指定できます (HubSpotアカウントにて、[マーケティング] > [ソーシャル]の順に進みます。)。

注: [Follow Me] モジュールでは、各ソーシャルネットワークの既定のアイコンが使用されます。独自のカスタムソーシャルアイコンを使用する場合は、モジュールのカスタマイズバージョンを作成できます。 

Follow Me - E メール

Follow Me - E メールモジュールには、E メールテンプレートの追加のフォーマットや設定オプションがあります。ソーシャル設定を反映させる代わりに、このモジュールは任意のソーシャルページを使用してカスタマイズできます。モジュールでは、ソーシャルアイコンの形状、カラースキーマ、and位置合わせを調整することもできます。また、ブランドがリストされたネットワーク以外のソーシャルプラットフォームで有効な場合は、エディターでカスタムソーシャルアカウントを追加したり、独自のアイコンをアップロードしたりできます。

このモジュールに表示されるソーシャルネットワークを編集するには、インスペクターの [ソーシャルネットワーク] セクションで[+追加] アイコンをクリックします。その後、鉛筆アイコン編集またはゴミ箱アイコン削除をクリックして変更を行います。

follow-me-email-options

鉛筆アイコン編集をクリックすると、表示するソーシャルネットワークとリンク先を選択するオプションが表示されます。[カスタムアイコン] を選択すると、このネットワークのカスタム画像を指定するための追加オプションが表示されます。[置換] をクリックして、ファイルマネージャーから画像を選択するか、コンピュータから新しい画像をアップロードします。

custom-icon

選択したら、インスペクターの上部にあるパンくず形式のナビゲ―ションを使用して、残りのモジュールオプションに戻ります。

フォーム

フォームモジュールでは、ユーザーがフォームを選択してページに追加することができます。これは、ウェブサイトへの訪問者からコンタクト情報をキャプチャするために使用します。これは、ランディングページ、ウェブサイトページ、ブログページで作成したコンテンツやテンプレートに追加できるモジュールとして利用可能です。 

: フォームは E メールテンプレートに追加できません。 

フォームモジュールでは、次のことができます。

  1. ページでフォームにタイトルを付ける。
  2. ページに表示される HubSpot フォームを選択する、または新しいフォームを追加する。
  3. フォームを送信する人を別のページにリダイレクトするか、同じページにインラインサンキューメッセージを表示するかを選択する。
  4. 必要に応じて訪問者に表示されるインラインサンキューメッセージをカスタマイズする。
  5. 特定のアドレスにフォーム通知 E メールを送信する。
  6. フォームを送信した訪問者をワークフローに追加する。(Marketing Professional 版または Enterprise 版のサブスクリプションが必要です。)
  7. フォームを送信した訪問者にフォローアップ E メールを送信する。

form-module-2

ヘッダーモジュールを使用すると、見出し HTML タグのテキストの行を表示できます.ヘッダーコンテンツのテキストをカスタマイズし、ドロップダウンを使用して、表示される見出しタグ (H1 - H4) を選択できます。

水平方向スペーサー

水平方向 スペーサーモジュールをテンプレートに追加すると、コンテンツモジュールのレイアウトをカスタマイズするための空白スペースを追加できます。このモジュールでは、ページ内の要素間に間隔を追加するために使用できる空の div タグが作成されます。

HubSpot のヘルプ記事のスクリーンショット

画像

画像モジュールでは、ページや E メールの特定の場所に任意の画像を追加することができます。既定のコンテンツを追加するときやコンテンツエディターで作業しているときに、ファイルマネージャーにアップロード済みの画像を選択するか、新しい画像をアップロードできます。これは、テンプレートに対して画像の書式とスタイルを特定の方法で設定しているときに、書式を変更せずに画像を交換する場合に役に立ちます。

また、以下の項目を変更することもできます。

  • ユーザーが画像をクリックしたときにリダイレクトされる URL
  • 画像の alt テキスト
  • 画像の高さと幅

image-module

イメージギャラリーモジュールは、動的なビジュアル要素を HubSpot ページにすばやく追加できます。インスペクターでは、以下のオプションをカスタマイズできます。

  1. [スライド] セクションで [+追加] をクリックして、追加のスライドを挿入します。スライドはドラッグ&ドロップで再配置できます。特定のスライドの上にカーソルを置き、編集アイコン編集をクリックしてキャプションと画像を追加します。
  2. [表示モード] ドロップダウンを使用して、標準のスライドショー、サムネイルナビゲーション、または画像の Lightbox ギャラリーを選択します。
  3. すべてのスライドが表示された後で最初から繰り返す場合は、[ループスライド] をオンに切り替えます。
  4. 自動でスライドを変更する場合は、[自動表示] をオンに切り替えます。
  5. このオプションを選択した場合は、矢印ボタンを使用してスライド間の秒数を指定します。
  6. 訪問者が自分で画像をクリックするかどうかを示す場合は、[ナビゲーションボタンを表示] をオンに切り替えます。
  7. すべての画像をスクロールしているときのギャラリーのサイズを同じにする場合は、[高さを変更可能] ドロップダウンを使用して [高さ固定] を選択します。画像のサイズに基づいてギャラリーのサイズを変更する場合は、[高さを変更可能] を選択します。
  8. ドロップダウンを使用して [スライド] または [フェード] を選択し、スライド間のトランジションをカスタマイズします。
  9. 画像にキャプションがある場合は、[画像の下に常にキャプションを表示] または [画像の上部にキャプションを重ね合わせる] を選択できます。
HubSpot のヘルプ記事のスクリーンショット


言語切り替え機能

言語切り替えモジュールを使用して、ランディングページやウェブサイトページの訪問者は、ページの翻訳版に切り替えることができます。翻訳された言語の名前がこのモジュールにどのように表示されるかをカスタマイズできます。

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

このモジュールページテンプレートに含まれていて、そのページに公開されている翻訳が複数ある場合、公開中のページにのみ表示されます。詳細は、HubSpot での複数言語コンテンツの使用を参照してください。


ロゴモジュール

ロゴモジュールには、コンテンツ設定から自動的に会社のロゴが表示されます。このロゴを変更する場合は、[このページの既定のロゴを上書き] をオンに切り替えて、このページの新しい画像のみをアップロードできます。また、[コンテンツ設定で編集] をクリックすると、すべてのコンテンツの会社のロゴを更新できます。

ロゴモジュールは自動的に会社ドメインにリンクされますが、一意のリンク URL を入力して、この既定を上書きできます。

ロゴモジュール


E メール本文

E メール本文モジュールは、すべての E メールテンプレートで既定で含まれる標準リッチテキストモジュールです。マーケターが E メールを下書きするときに使用する主要なリッチテキスト領域を指定します。特定のテンプレートの E メール本文の既定のコンテンツをカスタマイズできます。

標準のスタイルオプションに加えて、このモジュールは既定の色、境界線、間隔をカスタマイズできます。色見本を使用してカラーピッカーから色を選択するか、16 進数の値をテキストフィールドに入力します。また、テキストフィールドを使用して、モジュールの境界線、内側の間隔、外側の間隔を指定することもできます。

E メール本文


モジュール

コードエディターで作成されたモジュールを使用すると、HTML、CSS、Javascript、HubL を使用してテンプレートに高度な機能を追加できます。また、マーケターがコードに触れることなくそのコンテンツを編集することもできます。これらのコンポーネントは、ファインダーとインスペクターでモジュールアイコンcustomModulesでラベル付けされます。カスタムコーディングされたモジュールの使用についての詳細は、デザイナーのフォーラムをご覧ください。

オフィス所在地情報

このモジュールには、合法的に商用 E メールを送信するために、すべての テンプレートに含めなければならない必須のトークンが含まれています。このセクションの書式は編集できますが、オフィス所在地情報モジュールを使用しないで、または必須の HubL タグを含めない状態で E メールテンプレートを保存することはできません。

標準のスタイルオプションに加えて、このモジュールは既定の色、境界線、間隔をカスタマイズできます。色見本をクリックしてカラーピッカーから色を選択するか、16 進数の値をテキストフィールドに入力します。また、テキストフィールドを使用して、モジュールの境界線、内側の間隔、外側の間隔を指定することもできます。

HubSpot のヘルプ記事のスクリーンショット


1 行テキスト

1 行テキストモジュールでは、コンテンツ作成者がページや E メールの 1 行テキストを編集することができます。このモジュールは、エンドユーザーが書式を決める必要がない場合に、シンプルなテキストフィールドを作成するのに便利です。

ページフッターモジュールは、著作権情報を現在の年と会社名と一緒に表示します。会社名は、E メール設定 [フッター] セクションから自動的に表示されるので、デザインマネージャーに、このモジュールの編集可能なコンテンツフィールドはありません。

パスワードプロンプト

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

 

投稿フィルター

投稿フィルターモジュールは、特定のトピック、月、または執筆者のブログ記事のリストを表示するために使用されます。このモジュールは、E メールテンプレートでは使用できません。

モジュールの既定では、次の設定をカスタマイズできます。

  • フィルター値を表示するブログ
  • フィルターリンクの値のリスト (トピック、月、または著者)
  • 値の並び順 (記事数または名前)
  • 表示するタイトルをリストする
  • リストするブログ記事の最大数
  • 記事数が表示可能な数を超える場合に表示するテキストリンク


記事一覧

記事一覧モジュールは、HubSpot ブログから最新の記事または最も人気のある記事のリストを表示するために使用します。このモジュールは、E メールテンプレートでは使用できません。 

インスペクターは、以下のコンテンツの既定をカスタマイズできます。

  • 記事のタイトルを表示するブログ
  • 指定した期間の最新または最も人気のあるブログ記事のリスト
  • 表示するタイトルのリスト
  • リストするブログ記事の最大数
記事一覧


リッチテキスト

リッチテキストモジュールは、HubSpot コンテンツツール全体で最もよく使用されるコンテンツモジュールです。テキストの書式設定、画像、リンク、CTA など、コンテンツのほとんどの編集オプションが使用できます。Marketing Hub Professional版と Enterprise 版のアカウントでは、リッチテキストモジュールを使用して、スマートコンテンツをページに追加できます。

このモジュールを使用して、マーケター用に編集可能なコンテンツ領域を作成できます。このモジュールの既定のコンテンツを追加する場合は、[展開] をクリックするか、プレビューコンテンツをクリックしてリッチテキストエディターを開きます。

HubSpot のヘルプ記事のスクリーンショット


RSS リスティング

RSS リスティングモジュールを使用すると、HubSpot ブログや外部の RSS フィードの投稿の要約を表示できます。このモジュールは、E メールテンプレートでは使用できません (代わりに RSS E メールを使用します)。

RSS リスティングモジュールは、特定のブログや特定のタグを絞り込むためにカスタマイズできます。サムネイル画像、執筆者名、サマリー、公開日が各投稿に表示されるかどうかを示すために、対応する切り替えをクリックします。

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

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


セクションヘッダー

セクションヘッダーモジュールを使用すると、段落のサブタイトルと一緒に h1 見出しタグを表示できます。このモジュールは、ページの主要セクションにタイトルを付ける際に最適です。

セクションヘッダー


シンプルメニュー

シンプルメニューモジュールでは、コンテンツエディターでページ固有のメニューを作成できます。このモジュールでは、特定のテンプレートのシンプルメニューを柔軟に作成できます。インスペクターで、[メニューを編集] をクリックし、メニュー項目とリンクを追加し、水平または垂直ナビゲーションでメニューのスタイルを設定します。

シンプルメニュー


ソーシャルシェアリング

ソーシャルシェアリングモジュールを使用すると、訪問者がソーシャルメディアチャネルや E メールでコンテンツを簡単に共有できます。対応するソーシャルネットワークの切り替えをクリックしてテンプレートに含めます。コンテンツを共有するために必要な HubL タグが、共有リンクに自動的に入力されます。

注: ソーシャルシェアリングモジュールでは、各ソーシャルネットワークの既定のアイコンが使用されます。独自のカスタムソーシャルアイコンを使用する場合は、モジュールのカスタマイズバージョンを作成できます。

サブスクリプション設定

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

これらのモジュールでは、E メール受信者がサブスクリプション設定を管理したり、E メール通信をサブスクライブ解除したりするときに表示されるページをカスタマイズできます。

サブスクリプション設定


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

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

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


ウェブページとして表示

ウェブページとして表示モジュールでは、E メール受信者が E メールのウェブページ版を開くためのオプションを使用できます。E メールクライアントによっては HTML メールの表示が大きく異なることもあるため、E メールテンプレートにこのオプションを含めておくと、ユーザーがブラウザーで E メールを開いて、常に意図されたとおりの見た目で E メールを表示できます。

HubSpot のヘルプ記事のスクリーンショット