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

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

更新日時 2023年 6月 28日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

すべての製品とプラン

開発者は、HTMLを使用することで、ブログ、ウェブサイトページ、ランディングページ、Eメールのテンプレートをゼロから作成することができます。または、ドラッグ&ドロップテンプレートのレイアウトをHTMLに複製し、それをコードテンプレートとしてカスタマイズすることもできます。

注:カスタムコードのEメールテンプレートを作成するには、「Marketing Hub Professional」または「Enterprise」のアカウントが必要です。

新しい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
 
 
この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。