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

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

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

始める前に

この機能の使用を開始する前に、事前に実行する必要がある手順、および機能の制限と、それを使用した場合の潜在的な結果を完全に理解してください。

要件を理解する

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

制限事項と考慮事項の理解

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

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

• HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
• 左列上の  [ファイル] メニューをクリックして  新規ファイル選択します。

• [新規ファイル ]ダイアログボックスで、[ 今日は何を作成しますか？]ドロップダウンメニューをクリックし、[HTML+HubL]を選択してから[次へ]をクリックします。  

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

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

新しいファイルの設定が完了すると、カスタムコードの追加と公開中のページでの表示のプレビューができるように、 コードエディター が表示されます。

HTML+HubLを追加

• テンプレートのHTMLを入力します。カスタム コード テンプレートへの CSS ファイルと JavaScript ファイルの追加について詳細をご確認ください。 
• HubLがどのように表示されるかを確認するには、［出力を表示］スイッチをクリックしてオンに切り替えます。レンダリングされたプレビューのパネルが右側に開きます。

必須のHubLを追加

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

• ページとブログのテンプレートには次の変数が必要です。
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• Eメールテンプレートでは、次の変数が CAN-SPAMに準拠している必要があります。 
  • {{unsubscribe_link}}または{{unsubscribe_link_all}}（少なくともいずれか1つを含めます）
  • {{unsubscribe_anchor}}
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • {{site_settings.company_zip}}

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

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

• 既存のテンプレートのコードバージョンを作成するには、次の手順に従います。
  • HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。

• • 左サイドバーで、複製元のテンプレートを開きます。
  • [アクション] ドロップダウンメニューをクリックし、[ HTMLに複製]を選択します。HTMLファイルは、元のファイルと同じフォルダーに作成されます。

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

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

• 右上の [プレビュー]をクリックします。
• [ 表示オプションを使用したライブプレビュー]を選択した場合は、 ビューポートプリセットを選択することで、他のデバイスでの表示時のテンプレートをプレビューできます。
• [表示オプションなしでプレビュー]を選択した場合は、テンプレートがブラウザーでどのように表示されるかをプレビューすることしかできません。
• 編集が完了したら、右上の [変更を公開 ]をクリックします。

• コードエラーがある場合は、エラーメッセージが表示されます。コードエディターの下にあるエラーコンソールで、これらのエラーの詳細を確認してください。
  • ページ上部のエラーメッセージで、[ エラーコンソール ]をクリックして、コードエディターの下のコンソールを開きます。 
  • または、コードエディターの下部に移動して[ 詳細を表示]をクリックします。