お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Design Manager

テンプレートでデフォルトのモジュールを使用する

更新日時 2020年 10月 19日

対象製品

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic(旧製品)

これは、デザインマネージャーツールのレイアウトテンプレートで使用できる既定のモジュールの概要です。各モジュールタイプは、インスペクターのスタイルとコンテンツのオプションでカスタマイズできます。テンプレートにモジュールを追加した後、これらの各標準モジュールをコンテンツでどのように使用できるかを確認します。

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

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

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

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

既定のモジュールをカスタマイズする

Marketing Hub ProfessionalおよびEnterprise、およびCMS Hub ProfessionalおよびEnterpriseのすべてのアカウントでは、既定でデザインマネージャーの中に@hubspotフォルダーがあります。このフォルダーには、ドラッグ&ドロップのEメールモジュールなど、テーマと既定のモジュールがすべて含まれています。これらのテーマとモジュールは読み取り専用ですが、編集するのであれば、複製することができます。

design-manager-hubspot-folder

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダーで、@hubspotフォルダーをクリックします。
  • 複製する既定のモジュールを右クリックし、[モジュールを複製]を選択します。

    design-manager-clone-module
  • 右側の編集ペインにモジュールのソースコードが表示され、必要に応じてそこで編集することができます。 
  • 変更内容を保存するには、右上の[変更を公開]をクリックします。これでテンプレート作成時にそのモジュールを使用できるようになります。

既定のモジュールタイプ

詳細メニュー

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

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

  1. メニュー:コンテンツ設定から既存の詳細メニューを1つ選択します。
  2. 詳細メニュータイプ:メニュー項目がサイトでどのように表示されるかを選択します。
    • 静的 - 常にメニューの最上位ページが表示されますサイトのナビゲーション内のすべてのページでメニューの一貫性を保ちます。
    • 動的(セクション別)- 表示されているセクションに関連するページがメニューに表示されます表示されているトップレベルメニュー項目に関連するメニュー項目が表示されます。 
    • 動的(ページ別)- 表示されているページに関連するメニューがメニューに表示されます表示されている特定のページに関連するメニュー項目が表示されます。
    • パンくず形式のパスメニュー(横フローを使用)サイト上部の相対パスにメニュー項目が水平方向に表示されます。
  3. 最大レベル数:表示可能な子メニュー項目の最大数。
  4. 方向:hs-menu-flow-horizontalまたはhs-menu-flow-verticalのクラスをメニュー ラッパー コンテナーに追加します。これらのクラスをCSSで使用することにより、縦メニューと横メニューのスタイルを設定できます。モジュール設定によって追加されるクラスの詳細について、開発者ドキュメントをご確認ください。
  5. フライアウトを有効にするflyoutsまたはno-flyoutsのクラスをメニュー ラップ コンテナーに追加します。CSSの中でこれらのクラスを使用することにより、ドロップダウンのあるメニューまたはドロップダウンなしのメニューのターゲット設定をすることができます。モジュール設定によって追加されるクラスの詳細について、開発者ドキュメントをご確認ください。
詳細メニューオプション


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

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

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

ブログコメント

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

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

ブログコンテンツ

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

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

blog-content-1.png

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

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

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

注:ブログのEメール サブスクリプション モジュールは、Eメールテンプレートではサポートされていません。

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

CTA

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

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

follow-me-email-options

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

custom-icon

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

フォーム

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

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

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

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

form-module-2

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

水平方向スペーサー

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

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

画像

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

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

  • ユーザーが画像をクリックしたときにリダイレクトされるURL
  • 画像の代替テキスト
  • 画像のサイズ。
    • ブラウザーとデバイスのサイズに基づいて画像を拡大縮小するには、[自動的に調整]を選択します。このオプションを選択すると、[最大サイズ]セクションで画像の最大サイズを設定できます。画像の元のサイズを最大サイズとして使用するには、[画像の本来のサイズ]を選択します。最大サイズを手動で設定するには、[カスタム]を選択した後、[最大幅][最大高]を設定します。
    • 画像をすべてのデバイスで同じにするには、[幅と高さを固定]を選択します。

design-manager-image-module

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

  1. [スライド]セクションで[+追加]をクリックして、追加のスライドを挿入します。スライドはドラッグ&ドロップで再配置できます。特定のスライドの上にカーソルを置き、編集アイコンeditをクリックしてキャプションと画像を追加します。
  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見出しタグを表示できます。このモジュールは、ページの主要セクションにタイトルを付ける際に最適です。

セクションヘッダー


シンプルメニュー

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

シンプルメニュー


ソーシャルシェアリング

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

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

サブスクリプション設定

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

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

サブスクリプション設定


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

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

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


ウェブページとして表示

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

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