レイアウトエディターでページ、Eメール、ブログのテンプレートを作成する
更新日時 2021年 4月 13日
HubSpotのテンプレートビルダーを利用して、ドラッグ&ドロップ方式のインターフェースでモジュールを使ったテンプレートの作成ができます。これらのテンプレートは、ページ、Eメール、ブログの土台となります。HubSpotのテンプレート構成に関するさらに詳しい説明は、こちらのアカデミー講座(英語)を参照してください。
HubSpot技術サービスチームによってテンプレートが用意されている場合は、すでにサイトのデザイン要件に沿ったカスタムテンプレートが設定されています。
HTMLテンプレートを作成するには、カスタムコードテンプレートを作成する方法を確認してください。
注:Eメールテンプレートを作成するには、Marketing Hub ProfessionalまたはEnterpriseのサブスクリプションが必要です。CMS Hubアカウントの場合は、ドラッグ&ドロップで操作できるEメールエディターを使用してEメールを作成できます。
HubSpotテンプレートについて
HubSpotテンプレートは、作成するコンテンツの土台となります。テンプレートは、さまざまなコンテンツモジュールをドラッグ&ドロップで配置して作成します。
レイアウトエディターを使用すると、アイデア、スケッチ、またはプロトタイプを、コンテンツを作成するためのレスポンシブテンプレートに変換できます。

新規テンプレートを作成する
- HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
- 新しいテンプレートを作成するには、ファインダー上部の[File(ファイル)] > [New file(新規ファイル)]をクリックします。
- ダイアログボックスで [ドラッグ&ドロップ] を選択します。
- ドロップダウンメニューを使用して、テンプレートのタイプを選択します。ほとんどの既定のモジュールはどのテンプレートにも使用できますが、一部のモジュールは特定のテンプレート タイプに限定されています。テンプレートのタイプは、次の中から選択します。
- ブログ:個別のブログ記事とブログ一覧ページの両方の土台として利用できるように構成されたテンプレートです。
- Eメール:Eメールの土台として利用できるように構成されたテンプレートです。
- ページ:ウェブサイトとランディングページの土台として利用できるように構成されたテンプレートです。
- システム:エラー、パスワード入力、およびEメール登録のページ用に構成されたテンプレートです。
- 次に、テンプレートファイル名を付けます。完了したら、[作成] をクリックします。

テンプレートの構成とカスタマイズ
テンプレートには、画面右側のインスペクターを使って他のモジュールを追加することができます。インスペクターの [+追加] をクリックして、追加したいモジュールを検索し、ドラッグ&ドロップのテンプレートレイアウトに追加します。テンプレートの構造の編集の詳細について確認してください。
テンプレートのスタイルは、インスペクターのオプションを利用してカスタマイズできます。特定のモジュールを選択しない場合、インスペークターでテンプレートのHeadに直接スタイルを追加することができます。モジュールまたはグループをクリックすると、そのコンポーネントに固有のスタイルオプションにアクセスできます。インスペクターを使用してテンプレートをスタイル設定する方法の詳細について確認してください。
注:CSS(カスケーディング スタイル シート)やJavascriptファイルをEメールテンプレートに添付することはできませんが、カスタムHTMLマークアップ、bodyクラス、インラインスタイルをテンプレートに追加することは可能です。
テンプレートをプレビューして公開する
- 右上の [プレビュー] をクリックして、ウェブブラウザーにテンプレートのプレビューを表示します。[表示オプションを使用したライブプレビュー] を選択すると、他のさまざまなデバイスでの表示を確認することができます。
- テンプレートが完成したら、右上の [変更を公開] をクリックします。
新しいテンプレートを公開したら、そのテンプレートを選択して新しいページまたはEメールを作成できるようになります。また、ブログ設定画面でこのテンプレートをブログのテンプレートに選択することができます。
関連記事
-
テンプレートレイアウトの構成とカスタマイズの方法
既存のドラッグ&ドロップテンプレートをセットアップしてカスタマイズし、モジュール、グループ、列をテンプレートの構成要素として使用する方法をご確認ください。 テンプレートを構成 ...
ナレッジベース -
GoogleタグマネージャーのコードをHubSpotページに追加する
GoogleタグマネージャーとHubSpotを統合して、一か所の複数のソースからのトラッキングを管理することができます。Googleタグマネージャーの詳細については、Googleのスタートガイド...
ナレッジベース -
モジュールの作成と編集
デザイン マネージャー ツールで、カスタム コード モジュールを作成することにより、ブログ、ページ、またはEメールに高度な機能を追加できます。カスタムモジュールに搭載されている幅広い機能により、...
ナレッジベース