> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# テンプレートの概要

> テンプレートは再利用可能なページラッパーまたはEメールラッパーです。通常はテンプレートによってモジュールやパーシャルがレイアウトに配置されます。制作担当者は使用するテンプレートを選択してから、ページやEメールの作成を始めます。

テンプレートは、HubSpotのページ、Eメール、テーマのレイアウトを定義するものです。テンプレートはモジュールとパーシャルで構成され、スタイルシートやJavaScriptファイルなどのアセットを参照できます。テンプレートの作成には、[HubSpot CLI](/cms/start-building/introduction/react-plus-hubl/react-plus-hubl-quickstart)または[HubSpotのデザインマネージャー](https://knowledge.hubspot.com/ja/design-manager/create-page-email-and-blog-templates-in-the-layout-editor)を使用できます。制作担当者がページまたはEメールを作成するときに最初に選ぶのが、テンプレートです。

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

## テンプレートを作成する

テンプレートを作成するには、[HubSpotのデザインマネージャー](https://knowledge.hubspot.com/ja/design-manager/create-page-email-and-blog-templates-in-the-layout-editor)を使用するか、`hs create template`のCLIコマンドを実行します。

```shell theme={null}
hs create template <name> [dest]
```

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

* 矢印キーを使用して、作成する[テンプレートのタイプ](#template-types)に移動し、**Enter**キーを押します。

その後、テンプレートはローカルで作成されます。ご使用のHubSpotアカウント上でテンプレートを使用するには、アカウントにテンプレートを[アップロード](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#upload)します。[Watch](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#watch)コマンドを使用して、現在の作業ディレクトリーと子ディレクトリー内の新しいファイルおよび既存のファイルの編集内容を自動的にアップロードすることも可能です。

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

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

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

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

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

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

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

<Frame>
  <img src="https://www.hubspot.jp/hubfs/Knowledge_Base_2021/Developer/template-preview-options.png" alt="テンプレートのプレビューオプション" />
</Frame>

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

ドラッグ＆ドロップエリアを変更する場合、モジュールに設定されているデフォルトのパラメーター値を変更する場合、またはその他に大きな変更を加える場合は、テンプレートを使用して、[ウェブサイトページ](https://knowledge.hubspot.com/ja/website-and-landing-pages/create-and-customize-pages)、[ブログ](https://knowledge.hubspot.com/ja/blog/create-a-new-blog)、[ブログ記事](https://knowledge.hubspot.com/ja/blog/create-and-publish-blog-posts)、または[Eメール](https://knowledge.hubspot.com/ja/marketing-email/create-marketing-emails-in-the-drag-and-drop-email-editor)を作成するのが最適です。その上でモジュールのさまざまなフィールド値を試し、テンプレートが実際にどのように表示されるかをテストして、制作担当者にとって使いやすくなるように最適化できます。これらのアセットを公開することも、テスト用に下書きモードのままにすることもできます。

さらに、[コンテンツのステージング](https://knowledge.hubspot.com/ja/website-pages/redesign-and-relaunch-your-site-with-content-staging#new)または[開発者サンドボックスアカウント](https://offers.hubspot.com/free-cms-developer-sandbox)を使用して、本番アカウントに影響を与えることなくアセットを作成および表示できます。

## テンプレートのタイプ

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

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

<Warning>
  ### 注：

  制作担当者は、テンプレートに[dnd\_area](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas)タグが使用されているかどうかに応じて、ページのテンプレートを同じタイプの別のテンプレートと入れ替えることができます。

  * ドラッグ＆ドロップ方式のビジュアルレイアウトエディター上で作成したテンプレートは、`dnd_area`タグの有無に関係なく、他のドラッグ＆ドロップテンプレートまたはコードテンプレートと入れ替えることができます。
  * Dnd*areaタグを含むコードテンプレートは、`dnd_area`タグを含む他のコードテンプレートとのみ入れ替えることができます。* \_
  * `dnd_area`タグが<u>使用されていない</u>コードテンプレートは、`dnd_area`タグが使用されていない他のコードテンプレートとのみ入れ替えることができます。
</Warning>

### ページ

```html theme={null}
templateType: page
```

ページテンプレートは最も自由度の高いテンプレートタイプです。任意のウェブページまたは[ランディングページ](https://blog.hubspot.com/blog/tabid/6307/bid/7177/what-is-a-landing-page-and-why-should-you-care.aspx)として使用できます。ページの[レイアウト](#layout-css)に事前に取り込まれるコンポーネントはありません。コードページテンプレートには、わずかなマークアップ（メタ情報に提案されるHubLタグ、タイトル、必須のヘッダーまたはフッターの[インクルード](#included-cms-files)など）が事前に取り込まれます。ページテンプレートを使用するページには通常、次の要素が含まれますが、これらに限定されません。

* [ホームページ](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html)
* [会社概要](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/about.html)
* [お問い合わせ先](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/contact.html)

### Eメール

```html theme={null}
templateType: email
```

Eメールテンプレートは、[Eメールツール](https://www.hubspot.jp/products/marketing/email)で使用します。Eメールテンプレートはさまざまなメールクライアントで表示されること、そして到達性を担保するためのベストプラクティスに従わなければならないことから、さまざまな厳しい条件に対応する必要があります。[HTML+HubL](/cms/start-building/building-blocks/templates/html-hubl-templates)とデザインマネージャーのドラッグ＆ドロップEメールテンプレートにはいずれも、作成時に基本コンポーネントが取り込まれます。以下の`templateType`を指定して作成したテンプレートは、[Eメールを作成](https://knowledge.hubspot.com/ja/marketing-email/create-and-send-marketing-emails-with-the-updated-classic-editor)するときにだけテンプレート選択画面に表示されます。

[CAN-SPAM](https://knowledge.hubspot.com/ja/marketing-email/edit-office-location-information-in-email-footers)に準拠するためには、Eメールテンプレートに必要な[必須の変数](https://developers.hubspot.jp/docs/reference/cms/hubl/variables#required-email-template-variables)を含める必要があります。

Eメールテンプレートには、特殊なクラス名またはデータ属性を設定して`<style>`要素に追加される[inline-css](/cms/start-building/building-blocks/templates/email-template-markup#hs-inline-css-and-data-hse-inline-css)に対する機能も組み込まれています。EメールにおけるCSSのインライン化は、さまざまなEメールクライアントへの対応を強化するために行います。[利用者の多いEメールクライアントのほとんどが埋め込みCSSに対応](https://litmus.com/blog/do-email-marketers-and-designers-still-need-to-inline-css)していますが、受信者によっては例外的なEメールクライアントを使用している場合もあります。受信者を考慮して適切に判断してください。

詳しくは、[Eメールテンプレートの作成](/cms/start-building/building-blocks/templates/email-template-markup)をご参照ください。

### パーシャル

```html theme={null}
templateType: page isAvailableForNewContent: false
```

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

詳しくは、[パーシャル](/cms/start-building/building-blocks/templates/html-hubl-templates#partials)をご参照ください。

### グローバルパーシャル

```html theme={null}
templateType: global_partial
```

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

詳しくは[グローバルパーシャル](/cms/start-building/building-blocks/templates/html-hubl-templates#global-partials)と[グローバルコンテンツ](/cms/start-building/building-blocks/global-content)をご参照ください。

### ブログ

[ブログを作成](https://knowledge.hubspot.com/ja/blog/create-a-new-blog)する場合、[ブログテンプレート](/cms/start-building/building-blocks/templates/blog)の構造は標準[ページテンプレート](#page-templates)と似ています。大きな違いは、[コンテンツ設定](https://app.hubspot.com/login?loginRedirectUrl=https%3A%2F%2Fapp.hubspot.com%2Fshortlink%2Fsettings%2Fwebsite%2Fpages%2Fall-domains%2Fsystem-pages)ではブログテンプレートを選択できますが、ページテンプレートは選択できない点です。`blog_listing`、`blog_post`、または`blog`の`templateType`で作成されたテンプレートは、ユーザーがウェブページを作成するときにテンプレート作成画面に**表示されません**。ブログテンプレートには、実際にはブログ リスト ページとブログ記事の詳細ページという2つの形式があります。

### ブログリスト

```html theme={null}
templateType: blog_listing
```

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

### ブログ記事

```html theme={null}
templateType: blog_post
```

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

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

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

```html theme={null}
templateType: blog
```

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

### システムページ

システムページテンプレートには、特定の用途を示す内部フラグがあります。アカウントの[コンテンツ設定](https://app.hubspot.com/login?loginRedirectUrl=https%3A%2F%2Fapp.hubspot.com%2Fshortlink%2Fsettings%2Fwebsite%2Fpages%2Fall-domains%2Fsystem-pages)で、システムタブの指定された用途に対応するテンプレートを選択できます。

<Warning>
  ### 注：

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

#### エラーページ

[コンテンツ設定](https://app.hubspot.com/login?loginRedirectUrl=https%3A%2F%2Fapp.hubspot.com%2Fshortlink%2Fsettings%2Fwebsite%2Fpages%2Fall-domains%2Fsystem-pages)では、エラーページを[404](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/404.html)ページまたは[500](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/500.html)ページとして設定できます。どちらのテンプレートも同じtemplateTypeを使用します。以下のtemplateTypeを指定して作成したテンプレートは、ユーザーがウェブページを作成するときにテンプレート作成画面に表示されません。

```html theme={null}
templateType: error_page
```

#### Eメール配信設定

Eメール配信設定ページ。ユーザーがオプトインまたはオプトアウトできる、全ての利用可能な配信カテゴリー（サブスクリプションタイプ）のリストが表示されます。`{% email_subscriptions "email_subscriptions"  %}`のHubLタグを含める場合は必須です。[Cms-theme-boilerplateの配信設定テンプレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/subscription-preferences.html)をご参照ください。

```html theme={null}
templateType: email_subscription_preferences_page
```

#### Eメールバックアップ配信停止

Eメール配信停止ページのシステムテンプレート。`{% email_simple_subscription "email_simple_subscription" %}`のHubLタグを含める場合は必須です。[Cms-theme-boilerplateのEメールバックアップ配信停止テンプレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/backup-unsubscribe.html)をご参照ください。

```html theme={null}
templateType: email_backup_unsubscribe_page
```

#### Eメール配信停止確認

Eメール配信停止確認ページのシステムテンプレート。[`{{ unsubscribe_link_all }}`](https://developers.hubspot.jp/docs/reference/cms/hubl/variables#email-variables)の変数によって生成されたURLにユーザーが移動すると、ここにリダイレクトされます。[Cms-theme-boilerplateの配信登録確認テンプレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/subscriptions-confirmation.html)をご参照ください。

```html theme={null}
templateType: email_subscriptions_confirmation_page
```

#### パスワードプロンプト

パスワード入力テンプレートでは、ブランディングが施されたページが生成されます。制作担当者はこのページにパスワードを入力するよう促すメッセージを表示し、訪問者がパスワードを入力しなければページのコンテンツを閲覧できないようにすることができます。パスワード入力テンプレートを設定するには、[コンテンツ設定](https://app.hubspot.com/login?loginRedirectUrl=https%3A%2F%2Fapp.hubspot.com%2Fshortlink%2Fsettings%2Fwebsite%2Fpages%2Fall-domains%2Fsystem-pages)を使用します。[HubSpotパスワードで保護されたページの作成方法](https://knowledge.hubspot.com/ja/website-pages/password-protect-a-page)をご参照ください。ボイラープレートでの[保護されたページのパスワード入力](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/password-prompt.html)をご参照ください。

```html theme={null}
templateType: password_prompt_page
```

#### 検索結果ページ

組み込みCMSサイト検索リスト機能のシステムテンプレート。ボイラープレートでの[検索結果ページテンプレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/search-results.html)をご参照ください。

```html theme={null}
templateType: search_results_page
```

### アクセス権設定（メンバーシップ）

[アクセス権設定（メンバーシップ）機能](https://developers.hubspot.jp/docs/guides/cms/content/memberships/overview)（**CMS Hub** Enterpriseのみ）を使用できるHubSpotアカウントでは、[CRMの特定のリストに含まれるユーザーだけがアクセスできるページをサイト上に作成](https://knowledge.hubspot.com/ja/website-pages/require-member-registration-to-access-private-content)できます。\_ \_これにより、サイト訪問者はログイン資格情報が設定されたアカウントを保持できるようになります。これらのテンプレートを使用して、ページの外観を制御できます。

<Info>
  メンバーシップテンプレートとして設定できるのは[HTML+HubLテンプレート](/cms/start-building/building-blocks/templates/html-hubl-templates)のみです。
</Info>

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

アクセス権設定機能でアクセスが制御されたコンテンツにユーザーがアクセスしようとすると表示される、ログインページです。通常は、`{% member_login "member_login" %}`モジュールを含んでいます。ボイラープレートでの[メンバーシップログインテンプレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/membership-login.html)の例をご参照ください。

```html theme={null}
templateType: membership_login_page
```

#### メンバーシップの登録

ユーザー登録ページです。このページでユーザーはアカウントを作成して、このリストに含まれるユーザーがアクセスできるコンテンツを表示できるようになります。通常は、`{% member_register "member_register" %}`のHubLタグを含んでいます。ボイラープレートでの[メンバーシップ登録テンプレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/membership-register.html)の例をご参照ください。

```html theme={null}
templateType: membership_register_page
```

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

パスワードリセットページです。このページで、ユーザーは新しいパスワードを設定できます。通常は、`{% password_reset "password_reset" %}`のHubLタグを含んでいます。ボイラープレートでの[メンバーシップパスワードリセットテンプレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/membership-reset-password.html)の例をご参照ください。

```html theme={null}
templateType: membership_reset_page
```

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

パスワードのリセットをリクエストするページです。パスワードリセットEメールをリクエストするフォームが表示されます。通常は、`{% password_reset_request "password_reset_request" %}`のHubLタグを含んでいます。ボイラープレートでの[メンバーシップパスワードリセットリクエストテンプレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/membership-reset-password-request.html)の例をご参照ください。

```html theme={null}
templateType: membership_reset_request_page
```

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

CMSテンプレートには、特定のJavaScriptファイルとCSSファイルが関連付けられます。一部のファイルは自動的にインクルードされて削除できませんが、他のファイルは任意にインクルードできます。CMSコンテンツにスタイルシートが関連付けられる順序については、[こちらの記事](https://knowledge.hubspot.com/ja/design-manager/create-edit-and-attach-css-files-to-style-your-site)をご参照ください。

### jQuery

任意で[jQuery](https://jquery.com/)をHubSpotテンプレートのheadタグにインクルードできます。インクルードした場合、[`standard_header_includes`](https://developers.hubspot.jp/docs/reference/cms/hubl/variables#required-page-template-variables)のHubL変数の一部としてレンダリングされます。

［設定］＞［ウェブサイト］＞［ページ］で、jQueryのバージョンを1.11.x、バージョン1.7.1に変更したり、完全に無効にしたりできます\*\*。 \*\*古いブラウザーとの後方互換性を維持するためにjQuery移行スクリプトをインクルードすることもできます。ページのパフォーマンス向上を目的に、jQueryをフッターに移動することも可能ですが、jQueryを移動すると、それに依存しているJavaScriptが機能しなくなることがあります。移動する前に、ウェブサイトページのURLの最後に`?hsMoveJQueryToFooter=True`を追加して、テストを行うことをお勧めします。

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

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

### layout.css

このcss（旧称`required_base.css`）は、HubSpotのレスポンシブグリッドをスタイル設定するファイルです。このファイルは自動的にドラッグ＆ドロップテンプレートに組み込まれますが、カスタムコードテンプレートにデフォルトで組み込まれることは<u>ありません</u>。コード化されたHTML+HubLテンプレートで[dnd\_area](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas)タグを使用している場合、`layout.css`ファイルを組み込む必要はありませんが、このファイルを[CMSボイラープレートに組み込んでおく](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css)と、素早く簡単に稼働を開始できます。

このファイルにはレスポンシブグリッドCSSに加え、さまざまなビューポートで要素を表示または非表示にするために使用できるクラスが含まれています。詳細については、[ファイルを直接確認](https://cdn2.hubspot.net/hubfs/327485/Designers_Docs_2015/layout.css)してください。

### HubSpotトラッキングコード

[HubSpotトラッキングコード](https://knowledge.hubspot.com/ja/account/how-does-hubspot-track-visitors)は、[**standard\_footer\_includes**](https://developers.hubspot.jp/docs/reference/cms/hubl/variables)のHubL変数と共に、HubSpotテンプレートに自動的に追加されます（Eメールテンプレートを除く）。トラッキングコードは`your_HubID.js`（例：`158015.js`）という名前のアナリティクスJavaScriptファイルを読み込みます。このトラッキングコードは、[HubSpotのGDPR機能](https://knowledge.hubspot.com/ja/privacy-and-consent/how-do-i-turn-on-gdpr-functionality-in-my-hubspot-account)に直接統合されます。

## 関連コンテンツ

* [ドラッグ＆ドロップエリア](/cms/start-building/building-blocks/drag-and-drop/overview)
* [セクションテンプレート](/cms/start-building/building-blocks/sections/sections)
* [テンプレートとモジュールでウェブコンポーネントを使用する方法](https://developers.hubspot.com/blog/use-web-components-in-hubspot-cms-development)
* [グローバルコンテンツを使用してヘッダーやフッターなどを構築する](/cms/start-building/building-blocks/global-content)