メインコンテンツにスキップ
HubSpot ナレッジベース
お客さまへの大切なお知らせ：膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

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

更新日時 2025年 3月 7日

以下の 製品でご利用いただけます（別途記載されている場合を除きます）。

すべての製品とプラン

開発者は、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ファイルは、元のファイルと同じフォルダーに作成されます。

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

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

  • 右上の [プレビュー]をクリックします。
  • [ 表示オプションを使用したライブプレビュー]を選択した場合は、 ビューポートプリセットを選択することで、他のデバイスでの表示時のテンプレートをプレビューできます。
  • [表示オプションなしでプレビュー]を選択した場合は、テンプレートがブラウザーでどのように表示されるかをプレビューすることしかできません。
  • 編集が完了したら、右上の [変更を公開 ]をクリックします。
  • コードエラーがある場合は、エラーメッセージが表示されます。コードエディターの下にあるエラーコンソールで、これらのエラーの詳細を確認してください。
    • ページ上部のエラーメッセージで、[ エラーコンソール ]をクリックして、コードエディターの下のコンソールを開きます。 
    • または、コードエディターの下部に移動して[ 詳細を表示]をクリックします。 

この記事はお役に立ちましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。

関連記事

New to HubSpot? Use these guides to get started.