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

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

更新日時 2022年 1月 27日

対象製品

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Basic(旧製品)

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

カスタム コード テンプレートを使用できるコンテンツのタイプは、「Marketing Hub」および「CMS Hub」サブスクリプションによって異なります。 

 

Marketing Hub」サブスクリプションなし

または

Marketing Hub Starter

Marketing Hub Professional/Enterprise」

または

Marketing Hub Basic(レガシー製品)」

 

CMS Hubサブスクリプションなし

カスタム コード テンプレートを使用できない

ブログランディングページEメールでカスタム コード テンプレートを使用できる

 

CMS Hub Starter

ブログウェブサイトページでカスタム コード テンプレートを使用できる

ブログランディングページウェブサイトページEメールでカスタム コード テンプレートを使用できる

 

CMS Hub Professional/Enterprise」

ブログランディングページウェブサイトページでカスタム コード テンプレートを使用できる

ブログランディングページウェブサイトページEメールでカスタム コード テンプレートを使用できる

新しい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
 
 
Was this article helpful? *
This form is used for documentation feedback only. Learn how to get help with HubSpot.