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

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

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

• HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
• 新しいファイルを作成するには、左のサイドバーで［ファイル］>［新規ファイル］をクリックします。folder フォルダーアイコンをクリックして、メニューを展開しなければならない場合があります。
• ダイアログボックスで、［今日は何を作成しますか？］ドロップダウンメニューをクリックし、［HTML＆HUBL］を選択します。

• ［次へ］をクリックします。
• 新しいファイルの詳細を入力します。
  • ［テンプレート］または［パーシャルテンプレート］を選択します。パーシャルテンプレートは、他のテンプレート内で使用できるテンプレートです。
  • ドロップダウンメニューで、コーディングするテンプレートのタイプ（ページ、ブログ、またはEメール）を選択します。
  • ファイルに名前を付けます。
  • ファイルの場所を更新するには、［ファイルの場所］セクションで［変更］をクリックし、ファイルを追加するフォルダーを選択します。
• ［作成］をクリックします。
• ページテンプレートまたはEメールテンプレートのHTMLを記述します。
• HubLがどのように表示されるかをプレビューするには、エディター上部の［出力を表示］スイッチをクリックしてオンに切り替えます。レンダリングされたプレビューのパネルが右側に開きます。
  
  
  
• 右上の［プレビュー］をクリックして、コンテンツエディターでテンプレートがどのように表示されて機能するかをプレビューします。このプレビューはエディターと同期され、作業の進行に合わせて自動更新されます。
• 右上の［変更を公開］をクリックします。

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

必要なHubLタグを追加する

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

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

• {{standard_footer_includes}}
• {{standard_header_includes}}

• 次に、次のトークンを個別に使用します。
  • {{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（コピー）が付加されたものになります。