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

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

更新日時 2021年 11月 30日

対象製品

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Basic(旧製品)

デザイナーは、HTMLを使用してウェブサイト、ランディングページ、ブログテンプレートをゼロから構築できます。Marketing Hub ProfessionalアカウントおよびEnterpriseアカウントでは、カスタムコードのEメールテンプレートも構築できます。HubSpotのテンプレートレイアウトをHTMLに複製し、コードテンプレートとしてカスタマイズすることもできます。

この記事では、カスタム コード テンプレートの作成とトラブルシューティングの方法、およびテンプレートで必要なHubLについて説明します。コーディング作業が難しい場合は、HubSpotアカウント上にある既成のテンプレートを利用するか、テンプレートマーケットプレイス事前作成済みのテンプレートの購入を検討してください。

:カスタム コード テンプレートは、既定ではレスポンシブではありません。テンプレートを画面サイズに自動的に適応させるには、専門知識を備えたデザイン担当者と協力してください

新しいHTML & HUBLファイルを作成する

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • 新しいファイルを作成するには、左のサイドバーで[ファイル]>[新規ファイル]をクリックします。folder フォルダーアイコンをクリックして、メニューを展開しなければならない場合があります。
  • ダイアログボックスで、[今日は何を作成しますか?]ドロップダウンメニューをクリックし、[HTML&HUBL]を選択します。
design-manager-html-hubl
  • [次へ]をクリックします。
  • 新しいファイルの詳細を入力します。
    • [テンプレート]または[パーシャルテンプレート]を選択します。パーシャルテンプレートは、他のテンプレート内で使用できるテンプレートです。
    • ドロップダウンメニューで、コーディングするテンプレートのタイプ(ページ、ブログ、またはEメール)を選択します。
    • ファイルに名前を付けます。
    • ファイルの場所を更新するには、[ファイルの場所]セクションで[変更]をクリックし、ファイルを追加するフォルダーを選択します。
  • [作成]をクリックします。
  • ページテンプレートまたはEメールテンプレートのHTMLを記述します。
  • HubLがどのように表示されるかをプレビューするには、エディター上部の[出力を表示]スイッチをクリックしてオンに切り替えます。レンダリングされたプレビューのパネルが右側に開きます。


    design-manager-show-output
  • 右上の[プレビュー]をクリックして、コンテンツエディターでテンプレートがどのように表示されて機能するかをプレビューします。このプレビューはエディターと同期され、作業の進行に合わせて自動更新されます。
  • 右上の[変更を公開]をクリックします。
変更を公開する際にコード内にエラーがある場合は、エラーメッセージが表示されます。コードエディター下部にあるエラーコンソールに、エラーまたは警告の詳細がエラーや警告の修正案と共に表示されます。

error-console

カスタムデザインの詳細については、HubSpotデザイナードキュメントを参照してください。フィルタータグやアイコンなどのコードモジュールのオプションに関するドキュメントもあります。

必要なHubLタグを追加する

コードに必須のHubLタグが1つでも欠けている場合、ファイルを公開しようとするとエラーメッセージが表示されます。

ウェブサイト、ランディングページ、ブログテンプレートには次のタグが必要です。

  • {{standard_footer_includes}}
  • {{standard_header_includes}}
Eメールテンプレートでは、次のタグがCAN-SPAMに準拠している必要があります。次の2つの方法で含めることができます。
  • サブスクライブ解除のCAN-SPAMセクションに取り込むトークン{{unsubscribe_section}}を含めます。次に、次のトークンを個別に追加します。 
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}
    • {{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • この方法でテキストとリンクの言語およびスタイルをフォーマットすることはできません。

  • 次に、次のトークンを個別に使用します。
    • {{site_settings.company_name}}
    • {{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に複製する

ゼロからテンプレートを作成するだけでなく、HubSpotのテンプレートの1つをHTMLに複製することもできます。テンプレートをHTMLに複製すると、テンプレートのHTMLコンテンツにアクセスできます。 

既存のテンプレートのコードバージョンを作成するには、次の手順に従います。

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダーの[アクション]>[HTMLに複製]をクリックします。HTMLファイルは、元のファイルと同じフォルダーに作成されます。ファイル名は、元のテンプレート名の末尾にcopy(コピー)が付加されたものになります。
design-manager-clone-to-html