更新日時 2021年 3月 22日
デザイン マネージャー ツールで、HTMLのテンプレートを最初から作成できます。Marketing Hub ProfessionalおよびEnterpriseのアカウントにはカスタムコードのEメールテンプレートが含まれます。HubSpotのテンプレートレイアウトをHTMLに複製し、コードテンプレートとしてカスタマイズすることもできます。
この記事では、カスタム コード テンプレートの作成とトラブルシューティング、テンプレートでのHubLの作成方法を説明します。コーディング作業が難しい場合は、HubSpotアカウント上にある既成のテンプレートを利用するか、テンプレートマーケットプレイスで事前作成済みのテンプレートの購入を検討してください。
注：カスタム コード テンプレートは既定ではレスポンシブにはなりません。テンプレートを画面サイズに自動的に適応させるには、専門知識を備えたデザイン担当者と協力してください。
新しいHTML & HUBLファイルを作成する
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- 新しいファイルを作成するには、［ファイル］>［新規ファイル］をクリックします。フォルダーアイコンをクリックして、メニューを展開しなければならない場合があります。
- ダイアログボックスで、［HTML & HUBL］をクリックします。
- 新しいファイルの詳細を入力します。
- ［テンプレート］または［パーシャルテンプレート］を選択します。
- コーディングするテンプレートのタイプ（ページ、ブログ、またはEメール）を選択します。
- ファイルに名前を付けます。
- ［作成］をクリックします。
- ページテンプレートまたはEメールテンプレートのHTMLを記述します。
- HubLがどのように表示されるかをプレビューするには、エディター上部の［出力を表示］スイッチをクリックしてオンに切り替えます。レンダリングされたプレビューのパネルが右側に開きます。
- 変更を公開する際にコード内にエラーがある場合は、エラーメッセージが表示されます。コードエディター下部にあるエラーコンソールに、エラーまたは警告の詳細がエラーや警告の修正案と共に表示されます。
カスタムデザインの詳細については、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}}
トークンを個別に使用すると、トークンとリンクの周りに言葉を追加してそれらを必要なスタイルや言語でフォーマットすることができます。
HTMLに複製する
最初からコーディングする代わりに、HubSpotのテンプレートのいずれかをHTMLに複製することもできます。テンプレートをHTMLに複製することで、元のテンプレートのHTMLやHubLを使用できます。これは、作成済みのHubSpotテンプレートを解析して学ぶ方法として最適です。
既存のテンプレートのコードバージョンを作成するには、次の手順に従います。
- {{ local.navDesignManager }}
- ファインダーの［アクション］>［HTMLに複製］をクリックします。HTMLファイルが、デザインマネージャーの新しいタブで開きます。ファイル名は、元のテンプレート名の末尾にcopy（コピー）が付加されたものになります。
