テンプレートの概要
テンプレートは、HubSpotのページ、Eメール、テーマのレイアウトを定義します。テンプレートはモジュールとパーシャルで構成され、スタイルシートやJavaScriptファイルなどのアセットを参照できます。テンプレートの作成には、HubSpot CLIまたはHubSpotのデザインマネージャーを使用できます。制作担当者がページまたはEメールを作成するときに最初に選ぶのが、テンプレートです。
ここではテンプレートの作成方法、テンプレートの種類、テンプレートに含まれる内容について説明します。
| Parameter | Description |
|---|---|
name
| テンプレートの名前 |
dest
| テンプレートを作成するローカルディレクトリーのパス。このパラメーターが含まれない場合、テンプレートは現在のディレクトリーに作成されます。 |
- 矢印キーを使用して、作成するテンプレートのタイプに移動し、Enterキーを押します。
その後、テンプレートはローカルで作成されます。ご使用のHubSpotアカウント上でテンプレートを使用するには、アカウントにテンプレートをアップロードします。watchコマンドを使用して、現在の作業ディレクトリーと子ディレクトリー内の新しいファイルおよび既存のファイルの編集内容を自動的にアップロードすることも可能です。
テンプレートを更新したらプレビューして、期待どおりに表示されて動作することを確認できます。次のように、HubSpotにはテンプレートをプレビューする方法がいくつかあります。
- デザインマネージャーでテンプレートをプレビューする：簡単な目視チェックを行う場合や、ブログ記事／リスト／統合テンプレートをプレビューする必要がある場合に最適です。
- テンプレートから新しいアセットを作成する：ドラッグ＆ドロップエディターとコンテンツ作成エクスペリエンスのテストに最適です。
デザインマネージャーでプレビューする
デザインマネージャーによるテンプレートのプレビューは、簡単な目視チェックを行う際に特に便利です。テンプレートプレビューアーでは、ビューポートの寸法などの表示オプションも設定できます。
デザインマネージャーでテンプレートをプレビューするには、次の手順に従います。
- HubSpotアカウントにて、［マーケティング］>［ファイルとテンプレート］>［デザインツール］の順に進みます。
- 左サイドバーのファイルエクスプローラーを使用して、プレビューするテンプレートをクリックします。
- 右上にある［プレビュー］をクリックします。
- ［表示オプションを使用したライブプレビュー］を選択し、応答性とドメイン設定（スタイルシートなど）をテストするオプションを含むテンプレートをプレビューします。このオプションでは、iframe内のページが表示されます。ブログテンプレート用にブログとブログ記事、またはリストビューを選択することもできます。
- ［表示オプションを使用せずにプレビュー］を選択し、追加オプションのないテンプレートをプレビューします。
新しいページでプレビューする
ドラッグ＆ドロップエリアを変更する場合、モジュールに設定されている既定のパラメーター値を変更する場合、またはその他に大きな変更を加える場合は、テンプレートを使用して、ウェブサイトのページ、ブログ、ブログ記事、またはEメールを作成するのが最適です。その上でモジュールのさまざまなフィールド値を試し、テンプレートが実際にどのように表示されるかをテストして、制作担当者にとって使いやすくなるように最適化できます。これらのアセットを公開することも、テスト用に下書きモードのままにすることもできます。
さらに、コンテンツのステージングまたは開発者サンドボックスアカウントを使用して、本番アカウントに影響を与えることなくアセットを作成および表示できます。
ウェブサイトページやブログ記事など、さまざまなタイプのコンテンツでテンプレートを使用できます。コードテンプレートでは、ファイルの先頭部分にアノテーションを追加してテンプレートのタイプを指定します。
さまざまなタイプのテンプレートと、各タイプを指定するためのアノテーションについて、以下で説明します。
注：制作担当者は、テンプレートに「dnd_area」タグが含まれているかどうかに応じて、ページのテンプレートを同じタイプの別のテンプレートと入れ替えることができます。
- ビジュアル ドラッグ＆ドロップ レイアウト エディター上で作成したテンプレートは、「
dnd_area」タグの有無に関係なく、他のドラッグ＆ドロップテンプレートまたはコードテンプレートと入れ替えることができます。 - dnd_areaタグを含むコードテンプレートは、
dnd_areaタグを含む他のコードテンプレートとのみ入れ替えることできます。 dnd_areaタグを含まないコードテンプレートは、dnd_areaタグを含まない他のコードテンプレートとのみ入れ替えることできます。
Eメールテンプレートは、Eメールツールで使用します。Eメールテンプレートはさまざまなメールクライアントで表示されること、そして到達率を担保するためのベストプラクティスに従わなければならないことから、さまざまな厳しい条件に対応する必要があります。HTML+HubLとデザインマネージャーのドラッグ＆ドロップEメールテンプレートにはいずれも、作成時に基本コンポーネントが取り込まれます。以下のtemplateTypeを指定して作成したテンプレートは、Eメールを作成するときにだけテンプレート選択画面に表示されます。
CAN-SPAMに準拠するためには、Eメールテンプレートに必要な必須の変数を含める必要があります。
Eメールテンプレートには、特殊なクラス名またはデータ属性を設定して<style>要素に追加されるinline-cssに対する機能も組み込まれています。EメールにおけるCSSのインライン化は、さまざまなEメールクライアントにわたる対応を強化するために行います。利用者の多いEメールクライアントのほとんどが埋め込みCSSに対応していますが、受信者によっては例外的なEメールクライアントを使用している場合もあります。受信者を考慮して適切に判断してください。
パーシャルは、他のコードファイルに組み込むことができるテンプレートファイルです。パーシャルは、グローバルパーシャルと異なり、パーシャルの他のインスタンスに影響を与えることなく個別に編集できます。
パーシャルについて詳細をご確認ください。
グローバルパーシャルとグローバルコンテンツについて詳細をご確認ください。
ブログ リスト テンプレートは、ブログのURLにアクセスしたユーザーに対して表示されるテンプレートです。このテンプレートは通常、ブログの全記事の要約、タイトル、キービジュアルを一覧形式で表示するために使用します。また、このテンプレートでは通常、古い記事を辿るためのページ番号も示します。
ブログ記事テンプレートは、ブログの各記事を表示するときにユーザーに対して表示されるテンプレートです。このテンプレートでは通常、記事全体の内容を表示します。
1つのブログテンプレートで、リストページと詳細ページの両方のレイアウトを扱うこともできます。ただし、別個のテンプレートに分けるのが一般的です。統合テンプレートは、ブログ設定内のリストとブログ記事の両方に、選択可能なテンプレートとして表示されます。記事専用またはリスト専用のテンプレートを作成する場合は、blog_postまたはblog_listingを使用する必要があります。
開発の簡素化や制作担当者の操作を求める場合は、統合テンプレートではなく、templateTypesにblog_postとblog_listingを個別に使用することをお勧めします。
システム ページ テンプレートは、特定の用途を示す内部フラグがあります。アカウントのコンテンツ設定で、システムタブの指定された用途に対応するテンプレートを選択できます。
Eメール配信設定ページ。ユーザーがオプトインまたはオプトアウトできる、全ての利用可能な配信カテゴリー(サブスクリプションタイプ)のリストが表示されます。{% email_subscriptions "email_subscriptions" %}HubLタグを含める場合は必須です。cms-theme-boilerplateの配信設定テンプレートを参照してください。
Eメール配信解除ページのシステムテンプレート。{% email_simple_subscription "email_simple_subscription" %}HubLタグを含める場合は必須です。cms-theme-boilerplateのEメールバックアップ配信解除テンプレートを参照してください。
Eメール配信解除確認ページのシステムテンプレート。{{ unsubscribe_link_all }}変数によって生成されたURLにユーザーが移動すると、ここにリダイレクトされます。cms-theme-boilerplateの配信登録確認テンプレートを参照してください。
パスワード入力テンプレートは、ブランド化されたページを生成します。制作担当者はこのページにパスワードを入力するよう促すメッセージを表示し、訪問者がパスワードを入力しなければページのコンテンツを閲覧できないようにすることができます。パスワード入力テンプレートを設定するには、コンテンツ設定を使用します。HubSpotパスワードで保護されたページの作成方法を参照してください。ボイラープレートでの保護されたページのパスワード入力を参照してください。
組み込みCMSサイト検索リスト機能のシステムテンプレート。ボイラープレートでの検索結果ページテンプレートを参照してください。
アクセス権設定（メンバーシップ）機能（CMS Hub Enterpriseのみ）を使用できるHubSpotアカウントでは、CRMの特定のリストに含まれるユーザーだけがアクセスできるページをサイト上に作成できます。これにより、サイト訪問者はログイン資格情報が設定されたアカウントを保持できるようになります。これらのテンプレートを使用して、ページの外観を制御できます。
メンバーシップテンプレートとして設定できるのはHTML+HubLテンプレートのみです。
これは、アクセス権設定機能でアクセスが制御されたコンテンツにユーザーがアクセスしようとすると表示される、ログインページです。通常は、{% member_login "member_login" %}モジュールを含んでいます。ボイラープレートでのメンバーシップ ログイン テンプレートの例を参照してください。
これは、ユーザー登録ページです。このページでユーザーはアカウントを作成して、このリストに含まれるユーザーがアクセスできるコンテンツを閲覧できるようになります。通常は、{% member_register "member_register" %}HubLタグを含んでいます。ボイラープレートでのメンバーシップ登録テンプレートの例を参照してください。
これは、パスワード リセット ページです。このページで、ユーザーは新しいパスワードを設定できます。通常は、{% password_reset "password_reset" %}HubLタグを含んでいます。ボイラープレートでのメンバーシップ パスワード リセット テンプレートの例を参照してください。
これは、パスワードのリセットをリクエストするページです。パスワードリセットEメールをリクエストするフォームが表示されます。通常は、{% password_reset_request "password_reset_request" %}HubLタグを含んでいます。ボイラープレートでのメンバーシップ パスワード リセット リクエスト テンプレートの例を参照してください。
CMSテンプレートには、特定のJavaScriptファイルとCSSファイルが関連付けられます。一部のファイルは自動的にインクルードされて削除できませんが、他のファイルは任意にインクルードできます。CMSコンテンツにスタイルシートが関連付けられる順序については、こちらの記事をご覧ください。
任意で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を追加します。
このcss（旧称required_base.css）は、HubSpotのレスポンシブグリッドをスタイル設定するファイルです。このファイルは自動的にドラッグ＆ドロップテンプレートに組み込まれますが、カスタム コード テンプレートに既定で組み込まれることはありません。コード化されたHTML+HubLテンプレートでdnd_areaタグを使用している場合、layout.cssファイルを組み込む必要はありませんが、このファイルをCMSボイラープレートに組み込んでおくと、素早く簡単に稼働を開始できます。
このファイルにはレスポンシブグリッドCSSに加え、さまざまなビューポートで要素を表示または非表示にするために使用できるクラスが含まれています。詳細については、ファイルを直接確認してください。
HubSpotトラッキングコードは、standard_footer_includes HubL変数と共に、HubSpotテンプレートに自動的に追加されます（Eメールテンプレートを除く）。トラッキングコードはyour_HubID.js（例：158015.js）という名前のアナリティクスJavaScriptファイルを読み込みます。このトラッキングコードは、HubSpotのGDPR機能に直接統合されます。
貴重なご意見をありがとうございました。