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

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

更新日時 2019年 4月 25日

対象製品

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

デザインマネージャーツールで、HTML を使用してテンプレートを最初から作成できます。あるいは、HubSpot テンプレートレイアウトを HTML に複製し、コードテンプレートとしてカスタマイズすることもできます。

この記事では、HubSpot でカスタムテンプレートをコーディングする方法と、カスタム E メールテンプレートに含める変数について説明します。コーディングに慣れていない場合は、HubSpot アカウントにあらかじめ用意されている既成のテンプレートのいずれかを使用するか、テンプレートマーケットプレイス既成のテンプレートを購入してください。

ご注意ください。カスタムコードテンプレートは既定ではレスポンシブなものにはなっていません。デザインのプロフェッショナルと協力して、テンプレートが画面サイズに自動的に適応するようにしてください

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

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • 新しいファイルを作成するには、[ファイル] > [新規ファイル] をクリックします。フォルダーアイコンフォルダー をクリックして、メニューを展開しなければならない場合があります。
  • ダイアログボックスで、[HTML & HUBL] をクリックします。
コードエディター
  • 新しいファイルの詳細を入力します。
    • [テンプレート] または [パーシャルテンプレート] を選択します。 
    • コーディングするテンプレートのタイプ (ページ、ブログ、または E メール) を選択します。
    • ファイルに名前を付けます。
  • [作成] をクリックします。

次に、ページテンプレートまたは E メールテンプレートの HTML を作成します。HubSpot コードエディターでは、インデントが自動処理され、HTML 構文が強調表示されます。また、終了タグも自動的に追加されます。コード内にエラーがある場合、変更を公開しようとエラーメッセージで該当するエラーにフラグが立てられます。コードエディターの下部にあるエラーコンソールにエラーまたは警告の詳細が表示され、これらのエラーや警告を修正するための提案が表示されます。

error-console

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

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

必要な HubL タグを追加する

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

E メールテンプレートには、必須の E メールトークンと CAN-SPAM トークンを含めます。CAN-SPAM トークンの詳細については、HubLドキュメントをご覧ください。

必須の 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 のヘルプ記事のスクリーンショット