お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Design Manager
カスタム コード テンプレートを作成する
更新日時 2023年 1月 19日
デベロッパーは、HTMLを使用してブログ、ウェブサイトページ、ランディングページ、メールテンプレートを一から構築できます。または、ドラッグ&ドロップテンプレートのレイアウトをHTMLに複製し、それをコードテンプレートとしてカスタマイズすることもできます。
注意:カスタムコード化された電子メールテンプレートを作成するには、マーケティングハブ プロフェッショナルまたはエンタープライズアカウントが必要です。
新しいHTMLとHubLファイルを作成する
- HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
- 新しいファイルを作成するには、左のサイドバーで[ファイル]>[新規ファイル]をクリックします。folder フォルダーアイコンをクリックして、メニューを展開しなければならない場合があります。
- ダイアログボックスで、[今日は何を作成しますか?]ドロップダウンメニューをクリックし、[HTML&HUBL]を選択します。

- [次へ]をクリックします。
- 新しいファイルの詳細を入力します。
- [テンプレート]または[パーシャルテンプレート]を選択します。パーシャルテンプレートは、他のテンプレート内で使用できるテンプレートです。
- ドロップダウンメニューで、コーディングするテンプレートのタイプ(ページ、ブログ、またはEメール)を選択します。
- ファイルに名前を付けます。
- ファイルの場所を更新するには、[ファイルの場所]セクションで[変更]をクリックし、ファイルを追加するフォルダーを選択します。
- [作成]をクリックします。
- ページテンプレートまたはEメールテンプレートのHTMLを記述します。
- HubLがどのように表示されるかをプレビューするには、エディター上部の[出力を表示]スイッチをクリックしてオンに切り替えます。レンダリングされたプレビューのパネルが右側に開きます。
- 右上の[プレビュー]をクリックして、コンテンツエディターでテンプレートがどのように表示されて機能するかをプレビューします。このプレビューはエディターと同期され、作業の進行に合わせて自動更新されます。
- 右上の[変更を公開]をクリックします。
カスタムデザインの詳細については、HubSpotデザイナードキュメントを参照してください。フィルタータグやアイコンなどのコードモジュールのオプションに関するドキュメントもあります。
必要なHubLタグを追加する
コードに必須のHubLタグが1つでも欠けている場合、ファイルを公開しようとするとエラーメッセージが表示されます。
ウェブサイト、ランディングページ、ブログテンプレートには次のタグが必要です。
{{standard_footer_includes}}
{{standard_header_includes}}
- [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
Thank you for your feedback, it means a lot to us.
This form is used for documentation feedback only. Learn how to get help with HubSpot.