テンプレートの概要

Last updated:

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

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

テンプレートを作成する

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

  • CLIを使用してテンプレートを作成するには、次のコマンドを実行します。
hs create template <name> [dest]
hs create template parameters
ParameterDescription
name

テンプレートの名前

dest

テンプレートを作成するローカルディレクトリーのパス。このパラメーターが含まれない場合、テンプレートは現在のディレクトリーに作成されます。

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

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

テンプレートを更新したらプレビューして、期待どおりに表示されて動作することを確認できます。次のように、HubSpotにはテンプレートをプレビューする方法がいくつかあります。

  • デザインマネージャーでテンプレートをプレビューする:簡単な目視チェックを行う場合や、ブログ記事/リスト/統合テンプレートをプレビューする必要がある場合に最適です。
  • テンプレートから新しいアセットを作成する:ドラッグ&ドロップエディターとコンテンツ作成エクスペリエンスのテストに最適です。

デザインマネージャーでプレビューする

デザインマネージャーによるテンプレートのプレビューは、簡単な目視チェックを行う際に特に便利です。テンプレートプレビューアーでは、ビューポートの寸法などの表示オプションも設定できます。

デザインマネージャーでテンプレートをプレビューするには、次の手順に従います。

  • HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
  • 左サイドバーのファイルエクスプローラーを使用して、プレビューするテンプレートをクリックします。
  • 右上にある[プレビュー]をクリックします。 
    • [表示オプションを使用したライブプレビュー]を選択し、応答性とドメイン設定(スタイルシートなど)をテストするオプションを含むテンプレートをプレビューします。このオプションでは、iframe内のページが表示されます。ブログテンプレート用にブログとブログ記事、またはリストビューを選択することもできます。
    • [表示オプションを使用せずにプレビュー]を選択し、追加オプションのないテンプレートをプレビューします。

template-preview-options

新しいページでプレビューする

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

さらに、コンテンツのステージングまたは開発者サンドボックスアカウントを使用して、本番アカウントに影響を与えることなくアセットを作成および表示できます。

テンプレートのタイプ

ウェブサイトページやブログ記事など、さまざまなタイプのコンテンツでテンプレートを使用できます。コードテンプレートでは、ファイルの先頭部分にアノテーションを追加してテンプレートのタイプを指定します。

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

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

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

ページ

templateType: page

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

Eメール

templateType: email

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

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

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

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

パーシャル

templateType: page isAvailableForNewContent: false

パーシャルは、他のコードファイルに組み込むことができるテンプレートファイルです。パーシャルは、グローバルパーシャルと異なり、パーシャルの他のインスタンスに影響を与えることなく個別に編集できます。 

パーシャルについて詳細をご確認ください。

グローバルパーシャル

templateType: global_partial
グローバルパーシャルは、HTMLとHubLを使用して作成されたテンプレートの一種であり、ウェブサイト全体にわたって再利用できます。典型的なパーシャルは、ウェブサイトのヘッダー、サイドバー、フッターです。グローバルパーシャルを更新すると、グローバルパーシャルのインスタンスが全て更新されます。

グローバルパーシャルグローバルコンテンツについて詳細をご確認ください。

ブログ

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

ブログ一覧

templateType: blog_listing

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

ブログ記事

templateType: blog_post

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

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

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

templateType: blog

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

システムページ

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

注:CLIを使用して作成できるシステム ページ テンプレートのタイプは、検索結果ページテンプレートだけです。

エラーページ

コンテンツ設定では、エラーページを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

インクルードされている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に依存しているJavaScriptが機能しなくなることがあります。移動する前に、ウェブサイトページのURLの最後に?hsMoveJQueryToFooter=Trueを追加して、テストすることをお勧めします。

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

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

layout.css

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

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

HubSpotトラッキングコード

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

関連コンテンツ


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