テンプレートの概要

テンプレートは、HubSpotのページ、Eメール、テーマのレイアウトを定義します。テンプレートはモジュールとパーシャルで構成され、スタイルシートやJavaScriptファイルなどのアセットを参照できます。テンプレートの作成には、HubSpot CLI(英語)またはHubSpotのデザインマネージャーを使用できます。制作担当者がページまたはEメールを作成するときに最初に選ぶのが、テンプレートです。

ここではテンプレートの作成方法、テンプレートの種類、テンプレートに含まれる内容について説明します。

テンプレートを作成する

テンプレートは、HubSpot上で、またはCLIを使用して作成できます。

CLIを使用してテンプレートを作成する場合、まずCLIをインストールして設定(英語)する必要があります。この作業が完了したら、次のコマンドを実行してテンプレートを作成します。

hs create template <name> [dest]
hs create template parameters
ParameterDescription
name

作成するテンプレートのカスタム名。

dest

このテンプレートの保存場所にするディレクトリーのローカルパス。この引数は必須ではありません。この引数を省略すると、既定で現在の作業ディレクトリーになります。

次に、作成するテンプレートのタイプを選択します。テンプレートを作成すると、そのテンプレートがローカル側に作成されます。ご使用のHubSpotアカウント上でテンプレートを使用するには、アカウントにテンプレートをアップロードします。watchコマンドを使用して、現在の作業ディレクトリーと子ディレクトリー内の新しいファイルおよび既存のファイルの編集内容を自動的にアップロードすることも可能です。

テンプレートのタイプ

ウェブサイトページやブログ記事など、さまざまなタイプのコンテンツ向けのテンプレートを作成できます。HTML+HubLテンプレートでは、ファイルの先頭部分にアノテーションを追加してテンプレートのタイプを指定します。ビジュアル レイアウト エディター上で作成するドラッグ&ドロップテンプレートの場合は、作成時にのみテンプレートを選択できます。 

さまざまなタイプのテンプレートと、各タイプを指定するためのアノテーションについて、以下で説明します。

注:制作担当者は、テンプレートに「dnd_area」タグが含まれているかどうかに応じて、ページまたはEメールのテンプレートを同じタイプの別のテンプレートと入れ替えることができます。

  • ビジュアル レイアウト エディター上で作成したドラッグ&ドロップテンプレートは、「dnd_area」タグの有無に関係なく、他のドラッグ&ドロップテンプレートまたはコードテンプレートと入れ替えることができます。
  • 「dnd_area」タグを含むコードテンプレートは、「dnd_area」タグを含むコードテンプレートとのみ入れ替えることできます。
  • 「dnd_area」タグを含まないコードテンプレートは、「dnd_area」タグを含まない他のコードテンプレートとのみ入れ替えることできます。

ブログ

ブログを作成する場合、ブログテンプレートの構造は標準ページテンプレートと似ています。大きな違いは、コンテンツ設定ではブログテンプレートを選択できますが、ページテンプレートは選択できない点です。blog_listingblog_postblogのいずれかのtemplateTypeを使用して作成されたテンプレートは、ユーザーがウェブページを作成するときに、テンプレート選択画面に表示されません。ブログテンプレートには、実際にはブログ リスト ページとブログ記事の詳細ページという2つの形式があります。 

ブログ一覧

ブログ リスト テンプレートは、ブログのURLにアクセスしたユーザーに対して表示されるテンプレートです。このテンプレートは通常、ブログの全記事の要約、タイトル、キービジュアルを一覧形式で表示するために使用します。また、このテンプレートでは通常、古い記事を辿るためのページ番号も示します。

templateType: blog_listing

ブログ記事

ブログ記事テンプレートは、ブログの各記事を表示するときにユーザーに対して表示されるテンプレートです。このテンプレートでは通常、記事全体の内容を表示します。

templateType: blog_post

ブログ記事とブログリストの統合テンプレート

1つのブログテンプレートで、リストページと詳細ページの両方のレイアウトを扱うこともできます。ただし、別個のテンプレートに分けるのが一般的です。統合テンプレートは、ブログ設定内のリストとブログ記事の両方に、選択可能なテンプレートとして表示されます。記事専用またはリスト専用のテンプレートを作成する場合は、blog_postまたはblog_listingを使用する必要があります。

templateType: blog

開発の簡素化や制作担当者の操作を求める場合は、統合テンプレートではなく、templateTypesblog_postblog_listingを個別に使用することをお勧めします。

Eメール

Eメールテンプレートは、Eメールツールで使用します。Eメールテンプレートはさまざまなメールクライアントで表示されること、そして到達率を担保するためのベストプラクティスに従わなければならないことから、さまざまな厳しい条件に対応する必要があります。HTML+HubLとデザインマネージャーのドラッグ&ドロップEメールテンプレートにはいずれも、作成時に基本コンポーネントが取り込まれます。以下のtemplateTypeを指定して作成したテンプレートは、Eメールを作成するときにだけテンプレート選択画面に表示されます。

CAN-SPAMに準拠するためには、Eメールテンプレートに必要な必須の変数を含める必要があります。

Eメールテンプレートには、特殊なクラス名またはデータ属性を設定して<style>要素に追加されるinline-cssに対する機能も組み込まれています。EメールにおけるCSSのインライン化は、さまざまなEメールクライアントにわたる対応を強化するために行います。利用者の多いEメールクライアントのほとんどが埋め込みCSSに対応していますが、受信者によっては例外的なEメールクライアントを使用している場合もあります。受信者を考慮して適切に判断してください。

Eメールテンプレートの作成に関する詳細を参照してください。

templateType: email

ページ

ページテンプレートは最も自由度の高いテンプレートタイプです。任意のウェブページまたはランディングページとして使用できます。ページレイアウトに事前に取り込まれるコンポーネントはありません。コード ページ テンプレートには、わずかなマークアップ(メタ情報に提案されるHubLタグ、タイトル、必須のヘッダー/フッターインクルードなど)が事前に取り込まれます。ページテンプレートを使用するページには通常、次の要素が含まれますが、これらに限定されません。

templateType: page

システムページ

システム ページ テンプレートは、特定の用途を示す内部フラグがあります。システムタブのコンテンツ設定で、指定された用途に対応するテンプレートを選択できます。

エラーページ

コンテンツ設定では、エラーページを404ページまたは500ページとして設定できます。どちらのテンプレートも同じtemplateTypeを使用します。以下のtemplateTypeを指定して作成したテンプレートは、ユーザーがウェブページを作成するときにテンプレート作成画面に表示されません。

templateType: error_page

Eメール配信設定

Eメール配信設定ページ。ユーザーがオプトインまたはオプトアウトできる、全ての利用可能なサブスクリプションタイプのリストが表示されます。{% email_subscriptions "email_subscriptions"  %} HubLタグを含める必要があります。cms-theme-boilerplateの配信設定テンプレートを参照してください

templateType: email_subscription_preferences_page

Eメールバックアップ配信解除

Eメール配信解除ページのシステムテンプレート。{% email_simple_subscription "email_simple_subscription" %} HubLタグを含める必要があります。cms-theme-boilerplateのEメールバックアップ配信解除テンプレートを参照してください

templateType: email_backup_unsubscribe_page

Eメールサブスクリプションの配信停止確認

Eメール配信解除確認ページのシステムテンプレート。{{ unsubscribe_link_all }}変数によって生成されたURLにユーザーが移動すると、ここにリダイレクトされます。cms-theme-boilerplateの配信登録確認テンプレートを参照してください

templateType: email_subscriptions_confirmation_page

パスワード入力

パスワード入力テンプレートは、ブランド化されたページを生成します。制作担当者はこのページにパスワードを入力するよう促すメッセージを表示し、訪問者がパスワードを入力しなければページのコンテンツを閲覧できないようにすることができます。パスワード入力テンプレートを設定するには、コンテンツ設定を使用します。HubSpotパスワードで保護されたページの作成方法を参照してください。ボイラープレートでの保護されたページのパスワード入力を参照してください。

templateType: password_prompt_page

検索結果ページ

組み込みCMSサイト検索リスト機能のシステムテンプレート。ボイラープレートでの検索結果ページテンプレートを参照してください。

templateType: search_results_page

アクセス権設定

アクセス権設定(メンバーシップ)機能(CMS Hub Enterprise)を使用できるHubSpotアカウントでは、CRMの特定のリストに含まれるユーザーだけがアクセスできるページをサイト上に作成できます。これにより、サイト訪問者はログイン資格情報が設定されたアカウントを保持できるようになります。これらのテンプレートを使用して、ページの外観を制御できます。

メンバーシップテンプレートとして設定できるのはHTML+HubLテンプレートのみです。

メンバーシップのログイン

これは、アクセス権設定機能でアクセスが制御されたコンテンツにユーザーがアクセスしようとすると表示される、ログインページです。通常、ここには{% member_login "member_login" %}モジュールを含めます。ボイラープレートでのメンバーシップ ログイン テンプレートの例を参照してください。

templateType: membership_login_page

メンバーシップの登録

これは、ユーザー登録ページです。このページでユーザーはアカウントを作成して、このリストに含まれるユーザーがアクセスできるコンテンツを閲覧できるようになります。通常、ここには{% member_register "member_register" %} HubLタグを含めます。ボイラープレートでのメンバーシップ登録テンプレートの例を参照してください。

templateType: membership_register_page

メンバーシップパスワードのリセット

これは、パスワード リセット ページです。このページで、ユーザーは新しいパスワードを設定できます。通常、ここには{% password_reset "password_reset" %} HubLタグを含めます。ボイラープレートでのメンバーシップ パスワード リセット テンプレートの例を参照してください。

templateType: membership_reset_page

メンバーシップのリセットリクエスト

これは、パスワードのリセットをリクエストするページです。パスワードリセットEメールをリクエストするフォームが表示されます。通常、ここには{% password_reset_request "password_reset_request" %} HubLタグを含めます。ボイラープレートでのメンバーシップ パスワード リセット リクエスト テンプレートの例を参照してください。

templateType: membership_reset_request_page

テンプレートをプレビューする

テンプレートを更新した後は必ず、テンプレートが想定どおりに表示され、機能することを確認してください。HubSpotのデザインマネージャーには、モジュールとテンプレートをプレビューするためのツールが用意されています。テンプレートをプレビューするには、デザインマネージャーでテンプレートを開き、上部のバーにある[プレビュー]をクリックします。

表示オプションのドロップダウンが表示されているデザイン マネージャーのプレビュー

ほとんどのテンプレートのプレビューは、既定の状態で表示されます。既定の状態とは、テンプレートからウェブサイトのページを作成し、編集されていない状態の表示です。テンプレートには、[表示オプションを使用したライブプレビュー]と[表示オプションを使用せずにプレビュー]の2つのプレビューモードがあります。 

[表示オプションを使用したライブプレビュー]では、iFrame内にページが表示され、応答性のテストツールや、ドメインのスタイルシートによるテンプレートへの影響確認ツールを使用できます。

表示オプションを使用したライブプレビュー

ブログテンプレートは、テンプレートの実際の動作確認にブログリストとブログ投稿が必要になる点が他とは異なります。ブログのプレビューでは、既存のブログを選択して、そのコンテンツをプレビューに取り込むことができます。その上で、ブログテンプレートのリストページまたは詳細ページを選択して表示できます。

ブログの表示オプションを使用したライブプレビュー

視覚的に微調整するだけであれば、テンプレートのプレビューを使用してプレビューするだけで十分です。ドラッグ&ドロップエリアを変更する場合、モジュールに設定されている既定のパラメーター値を変更する場合、またはその他に大きな変更を加える場合は、テンプレートを使用してウェブサイトのページ、ブログ、ブログ記事、またはEメールを作成するのが最適です。その上でモジュールのさまざまなフィールド値を試し、テンプレートが実際にどのように表示されるかをテストして、制作担当者にとって使いやすくなるように最適化できます。 

コンテンツステージング、下書きプレビュー、または開発者用サンドボックスアカウントを使用すると、ページが一般公開されて表示されることを心配せずにページを確認できます。

インクルードされているCMSファイル

CMSテンプレートには、特定のJavaScriptファイルとCSSファイルが関連付けられます。一部のファイルは自動的にインクルードされて削除できませんが、他のファイルは任意にインクルードできます。CMSコンテンツにスタイルシートが関連付けられる順序については、こちらの記事をご覧ください

jQuery

任意でjQueryをHubSpotテンプレートのheadタグにインクルードできます。インクルードした場合、standard_header_includes HubL変数の一部としてレンダリングされます。

[設定]>[ウェブサイト]>[ページ]で、jQueryのバージョンを1.11.x、バージョン1.7.1に変更したり、jQueryを完全に無効にしたりできます。古いブラウザーとの後方互換性を維持するためにjQuery移行スクリプトをインクルードすることもできます。ページのパフォーマンス向上を目的に、jQueryをフッターに移動することも可能です。jQueryを移動すると、jQueryに依存しているJavaScripが機能しなくなることがあります。サイトをテストするには、ウェブサイト上の特に重要なページを表示して、URLの末尾に?hsMoveJQueryToFooter=Trueを追加し、何も不具合が発生しないことを確かめてください。

HubSpot機能には以前、jQueryが必要であったことから、従来はjQueryが既定でインクルードでされていました。CMS Hubには、jQueryは必須ではありません。jQueryの機能の大半には、同等の最新かつ簡素なJavaScriptがあるので、こちらを使用することをお勧めします。jQueryを使用する必要がある場合は、設定で既定のバージョンを無効にし、</body>タグの前に最新バージョンが読み込まれるようにすることをお勧めします。

サイトでjQueryを削除しても問題が発生しないかどうかをテストするには、サイト上の操作可能な要素が特に多く含まれている複数のページを表示し、URLの末尾に?hsNoJQuery=trueを追加します。

layout.css

layout.css(旧称required_base.css)は、HubSpotのレスポンシブグリッドをスタイル設定するファイルです。このファイルは常に自動的にドラッグ&ドロップテンプレートに組み込まれます。カスタム コード テンプレートに既定で組み込まれることはありません。開発者がコード化されたHTML+HubLテンプレートでdnd_areaタグを使用している場合、layout.cssファイルを組み込む必要はありませんが、このファイルをCMSテーマボイラープレートに組み込んでおくと、素早く簡単に稼働を開始できます。

このファイルにはレスポンシブグリッドCSSに加え、さまざまなビューポートで要素を表示または非表示にするために使用できるクラスが含まれています。このファイルの内容はこちらで確認できます。

HubSpot Tracking Code

HubSpotトラッキングコード常にHubSpotテンプレートに自動的に追加されます(Eメールテンプレートを除く)。これはstandard_footer_includes HubL変数を使用して組み込まれます。トラッキングコードはyour_HubID.js(例:158015.js)という名前のアナリティクスJavaScriptファイルを読み込みます。このトラッキングコードは、HubSpotのGDPR機能に直接統合されます。


参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。