カスタム コード テンプレートを作成する

開発者は、HTML+HubLを使用して、ブログ、ウェブサイトページ、ランディングページ、Eメールテンプレートをゼロから作成できます。または、ドラッグ＆ドロップテンプレートのレイアウトをHTMLに複製し、それをコードテンプレートとしてカスタマイズすることもできます。

カスタムアセットの設計について詳しくは、 開発者ドキュメントを参照してください。 

始める前に

この機能を使い始める前に、あらかじめ必要となる手順と、この機能の使用に伴う制限事項と潜在的な結果について十分に理解しておいてください。

要件を理解する

• デザインマネージャーでテンプレートを作成および編集するためのデザインツール権限があることを確認します。
• グローバルなウェブアセットとブログ/ウェブサイト を編集する必要がある場合は、グローバルコンテンツとテーマの設定」権限と「ウェブサイト設定」権限も持つことをお勧めします。

制限事項と考慮事項について

• Eメールテンプレートを作成するには、Marketing Hub Professional または Enterprise サブスクリプションが必要です。 Content Hubアカウントでは、ドラッグ&ドロップでEメールエディターを使用してEメールを作成できます。
• カスタム コード テンプレートでは、多くの定義済み変数を使用できます。これらの変数には、Eメールやページの作成に必須のものもあれば、省略可能なものもあります。必須のEメール変数、ウェブサイト変数、ランディングページ HubL変数を追加する方法について詳細をご確認ください。 

新しいHTML+HubLファイルを作成する

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーの上部にある[ファイル]ドロップダウンメニューをクリックし、[新規ファイル]を選択します。

3. ダイアログボックスで、[今日は何を作成しますか?]ドロップダウンメニューをクリックし、[HTML+HubL]を選択します。

4. [何を構築していますか? ]フィールドで、 オプションを選択します。
   • テンプレート:ウェブサイトページ、ランディングページ、ブログ記事、またはEメールに表示されるコンテンツのレイアウトと構造を定義します。 
   • テンプレートパーシャル:は、他の複数のテンプレートに含めることができる、再利用可能なコードまたはコードスニペットです。 
5. [ テンプレートタイプ ]ドロップダウンメニューをクリックし、カスタム コード テンプレートの タイプ (ページ、ブログ記事/リスト、Eメール、またはシステムページ)を選択します。テンプレートタイプについて詳細をご確認ください。
6. [ファイル名 ]フィールドに ファイル名 を入力します。
7. ファイルの場所を更新するには、[ ファイルの場所 ]セクションの[ 変更 ]をクリックし、 フォルダーを選択します。
8. 完了したら、［作成］をクリックします。

テンプレートにHTML+HubLを追加

新しいファイルを設定した後、 コードエディター に移動し、カスタムコードを追加して、公開中のページにどのように表示されるかをプレビューします。

HTML+HubLを追加

1. テンプレートの HTML を入力します。カスタム コード テンプレートへの CSS ファイルと JavaScript ファイルの追加の詳細をご覧ください。 
2. HTML+HubLによるレンダリングを表示するには、左上の[ 出力を表示 ]スイッチをオンに切り替えます。レンダリングされたプレビューのパネルが右側に開きます。

必須のHTML+HubLを追加

カスタム コード テンプレートが機能するには、特定のHTML変数または HubL変数 が必要です。これらの必須変数のいずれかが欠落している場合、テンプレートを公開しようとしたときにエラーメッセージが表示されることがあります。 

• ページとブログのテンプレートには次の変数が必要です。

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• Eメールテンプレートでは、次の変数が CAN-SPAMに準拠している必要があります。

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• Eメールテンプレートで特定のEメールクライアントでプレビューテキストを表示するには、次のコードが必要です。

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

テンプレートをHTMLに複製する

テンプレートをゼロから作成するだけでなく、ブログ、ウェブサイトページ、ランディングページのドラッグ&ドロップテンプレートをHTMLに複製することもできます。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、複製するテンプレート の名前 をクリックします。
3. [アクション] ドロップダウンメニューをクリックし、[ HTMLに複製]を選択します。HTMLファイルは、元のファイルと同じフォルダーに作成されます。

テンプレートをプレビューして公開する

テンプレートを作成したら、公開中のページでどのように表示されるかをプレビューしてから公開できます。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、プレビューまたは公開するテンプレート の名前 をクリックします。
3. 右上の[プレビュー]ドロップダウンメニューをクリックし、 オプションを選択します。
   • [ 表示オプションを使用したライブプレビュー]を選択した場合は、 ビューポートプリセットを選択することで、他のデバイスでの表示時のテンプレートをプレビューできます。
   • [表示オプションなしでプレビュー]を選択した場合は、テンプレートがブラウザーでどのように表示されるかをプレビューすることしかできません。
4. 完了したら、[ 変更を公開]をクリックします。
5. コードエラーがある場合は、エラーメッセージが表示されます。コードエディターの下にあるエラーコンソールで、これらのエラーの詳細を確認してください。

• • ページ上部のエラーメッセージで、[ エラーコンソール ]をクリックして、コードエディターの下のコンソールを開きます。 
  • または、左下のコードエディターで[ 詳細を表示]をクリックします。