Design Manager

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

更新日時 2020年 10月 19日

対象製品

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

デザイン マネージャー ツールで、HTMLのテンプレートを最初から作成できます。Marketing Hub ProfessionalおよびEnterpriseのアカウントにはカスタムコードのEメールテンプレートが含まれます。HubSpotのテンプレートレイアウトをHTMLに複製し、コードテンプレートとしてカスタマイズすることもできます。

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

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

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

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

    design-manager-show-output-toggle
  • 変更を公開する際にコード内にエラーがある場合は、エラーメッセージが表示されます。コードエディター下部にあるエラーコンソールに、エラーまたは警告の詳細がエラーや警告の修正案と共に表示されます。

error-console

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

完了したら、[変更を公開]をクリックして、テンプレートまたはHTMLファイルを公開します。

必要なHubLタグを追加する

構造化されたHTMLのコードに、必須のHubLタグが1つでも欠けている場合、ファイルを公開しようとするとエラーメッセージが表示されます。HubLタグとは、コードをHubSpotの設定とコンテンツエディターに関連付けるものです。

Eメールテンプレートには、必須のEメールトークンとCAN-SPAMトークンを含めてください。次の2つの方法で含めることができます。

1.サブスクライブ解除のCAN-SPAMセクション{{unsubscribe_section}}に取り込むトークンを1つ含めます。このトークンが使用されている場合、テキストとリンクの言語およびスタイルをフォーマットすることはできません。次の例は、{{unsubscribe_section}}の見え方を示しています。

次に、以下のトークンを個別に追加する必要があります。

{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}

2.必須の個別のサブスクライブ解除リンクとアドレスのトークンを含めます。
{{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のテンプレートのいずれかをHTMLに複製することもできます。テンプレートをHTMLに複製することで、元のテンプレートのHTMLやHubLを使用できます。これは、作成済みのHubSpotテンプレートを解析して学ぶ方法として最適です。

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

  • {{ local.navDesignManager }}
  • ファインダー[アクション]>[HTMLに複製]をクリックします。HTMLファイルが、デザインマネージャーの新しいタブで開きます。ファイル名は、元のテンプレート名の末尾にcopy(コピー)が付加されたものになります。
HubSpotのヘルプ記事のスクリーンショット

New call-to-action