サポートされる製品
次のいずれかの製品またはそれ以上が必要です。
Marketing HubMarketing HubProfessional
Content HubContent HubProfessional
最終更新日: 2025年8月22日
ドラッグ＆ドロップエリアを使用することで、開発者はEメールエディター内でレイアウト、スタイル、コンテンツを直接変更できる、カスタム Eメール テンプレートのセクションを作成できます。これにより、開発者はグローバル構造を使用してテンプレート作成数を減らすことができ、作成されたEメールテンプレートを使用してコンテンツ制作担当者は個々の目的に応じてさまざまなレイアウトのページを作成できるようになります。
注: カスタムEメールテンプレートに含めることができるドラッグ＆ドロップエリアは1つだけです。
1

新規HTMLテンプレートを作成する

新しいHTMLテンプレートを作成して、ドラッグ＆ドロップセクションのHubLおよびHTMLコードを含めます。
  • HubSpotアカウントで［コンテンツ］＞［デザインマネージャー］の順に進みます。
  • 新しいファイルを作成するには、左のサイドバーで［ファイル］＞［新規ファイル］をクリックします。
  • ダイアログボックスで、［今日は何を作成しますか？］の下にあるドロップダウンメニューをクリックし、［HTML + HubL］を選択します。
  • ［次へ］をクリックします。
  • ［テンプレートタイプ］ドロップダウンメニューをクリックし、［Eメール］を選択します。
  • テンプレートの名前を入力します。
  • テンプレートの保存場所を更新するには、［ファイルの場所］の下にある［変更］をクリックし、テンプレートを作成する新しいフォルダーを選択します。
  • ［作成］をクリックします。
2

テンプレートヘッドにHubLタグを追加する

スタイル設定と互換性の目的でEメールテンプレートの<head>セクションに含めることができる必須のタグと任意のタグを以下でご確認ください。

​
必須タグ

{{ dnd_area_stylesheet }}このタグは、次の機能を提供します。
  • 関連付けられたメディアクエリーを追加する
  • Outlookの既知のスタイル設定に関する問題を修正する
  • マージンとパディングをリセットする
  • アンチエイリアス処理を有効にする
  • 特定のCSSを追加する

​
任意のタグ

全ての主要なEメールクライアントで一貫性のあるテンプレートの表示を確保するために、以下の任意のHubLタグをテンプレートに含めることもできます。
  • {{ email_header_includes }}：このタグはCSSをテンプレートに挿入して、一貫したスタイルをレンダリングし、一般的なスタイルの問題を修正し、EメールのHTMLにメタデータを追加します。このHubLタグを解析すると、Eメールの<head>内に次の内容が追加されます。
パラメーター説明
<meta name="x-apple-disable-message-reformatting">iOS11によりEメールが自動的にスケーリングされないようにします。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">ブラウザーやEメールクライアントに、さまざまな文字をどのように解釈するかを伝えます。
<meta http-equiv="X-UA-Compatible" content="IE=edge">Windows Phone 7.5でCSS3とメディアクエリーを有効にし、可能な限り最適なモードでコンテンツをレンダリングするようにInternet Explorerに通知し、EメールをレンダリングするInternet Explorerのバージョンをブラウザーが選択できるようにします。
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>表示可能領域をデバイス画面の幅に設定して、Eメールをレスポンシブにします。
  • {{ reset_css_stylesheet }}：このタグを含めると、Outlookにおける多くのスタイルの問題が修正されると同時に、Eメールの余白とパディングがリセットされます。
  • {{ outlook_background_snippet }}：このタグは、関連する背景CSSルールを指定している場合に、Outlookの背景画像または色を設定します。
3

ドラッグ＆ドロップエリアを作成する

{{ dnd_area_stylesheet }} HubLタグとその他の任意のタグをテンプレートの<head>に追加したら、テンプレート本文にdnd_areaを設定できます。

​
空のドラッグ＆ドロップエリアを作成する

dnd_areaは、ウェブページの一部の構造、デザイン、およびコンテンツを編集可能にするためのコンテナーです。ドラッグ＆ドロップエリアのデフォルトのコンテンツは、dnd_areaタグの本文で指定します。ドラッグ＆ドロップエリアは、<div>または<table>で囲むことができます。ドラッグ＆ドロップエリアの制限の1つは、最小幅が624ピクセルに設定されており、この値をオーバーライドできないことです。このタグの独自機能により、制作担当者がモジュールをEメールエディター内にドラッグするためのドロップエリアが生成されます。次のコードは、空のドラッグ＆ドロップエリアを指定します。
{% dnd_area "main" %}
	<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}

​
空の列を含むドラッグ＆ドロップエリアを作成する

dnd_sectionフィールドとdnd_columnフィールドを使用してドラッグ＆ドロップエリアをカスタマイズし、デフォルトのセクションと列を指定することもできます。例えば、以下のHubLコードでは、3列のドラッグ＆ドロップエリアを指定します。
{% dnd_area "main" %}
  {% dnd_section padding={'top': 25, 'bottom': '20} %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
  {% end_dnd_section %}
{% end_dnd_area %}
dnd_row HubLタグは、現在Eメールテンプレートでサポートされていません。
4

モジュールを含むドラッグ＆ドロップエリアを追加する

セクションにあらかじめコンテンツを取り込むには、dnd_moduleタグを使用して、取り込むモジュールのパスを参照します。モジュールをセクションと列内に追加し、ドラッグ＆ドロップエリアにコンテンツが事前に取り込まれるようにする必要があります。以下の例ではデフォルトのHubSpotモジュールが参照されていますが、デザインツールのファイルツリー内のパスを指定して、自分で作成したモジュールを含めることもできます。dnd_moduleのデフォルト値を指定するには、module_attributeタグを使用できます。
{% dnd_area "main", full_width=False %}
	{% dnd_section padding={
	            'top':'25',
	            'bottom':'20'
	            }, full_width=False %}
	  {% dnd_column width=6 %}
	    {% dnd_module path='@hubspot/image_email', img={
	                    'alt':'NavyLogo',
	                    'height':38,
	                    'src':'email_dnd_template_images/NavyLogo.png',
	                    'width':120
	                    }, alignment='center', hs_enable_module_padding=True, hs_wrapper_css={
	                    'padding-bottom':'10px',
	                    'padding-left':'20px',
	                    'padding-right':'20px',
	                    'padding-top':'10px'
	                    } %}
	    {% end_dnd_module %}
	  {% end_dnd_column %}
	  {% dnd_column width=6 %}
	  {% end_dnd_column %}
	{% end_dnd_section %}
{% end_dnd_area %}
5

ドラッグ＆ドロップテンプレートをさらにカスタマイズしてスタイルを設定する

ドラッグ＆ドロップのHubLタグ（dnd_area、dnd_section、dnd_columnなど）のそれぞれには、デフォルトのスタイルを指定したり、その他の動作（Eメールエディターのサイドバーに表示するラベルなど）を指定したりするために使用できるさまざまなパラメーターが含まれています。各タグで使用できるパラメーターの詳細については、各タグの以下のリンクを確認してください。