メインコンテンツへスキップ

サポートされる製品

この記事では、標準HubSpot Eメールテンプレートのコーディング方法について説明します。カスタムEメールテンプレートを作成する際は、Eメールクライアントが特定のHTMLおよびCSS機能のみをサポートしていることに注意してください。このため、クライアント間で一貫して表示されるEメールテンプレートをコーディングするには、ある程度の経験と忍耐力が必要です。 アプリ内でテンプレートレイアウトを作成する方法と既存のEメールをテンプレートとして保存する方法については、HubSpotのナレッジベースをご覧ください。

​
Eメールテンプレートの必須変数

HubSpotでEメールを送信するには、テンプレートに所定の情報を含める必要があります。詳しくはEメールの必須HubL変数をご参照ください。コードテンプレートを使用する場合は、Eメールごとに内容を簡単に編集できるように、モジュールも使用する必要があります。

​
hs-inline-cssとdata-hse-inline-css

全てのクライアントで正しく表示されるEメールテンプレートをコーディングする際には、<head>内の<style>でCSSがサポートされないことが課題となります。 Eメールテンプレートのコーディングを簡単に行えるよう、HubSpotのEメール コード テンプレートでは特別なスタイルタグがサポートされています。このタグを使用してCSSを記述すると、コンパイルされてからインラインCSSに変換され、ターゲット要素に追加されます。hs-inline-cssというIDを持つスタイルタグに追加されたコードは、全てターゲットタグに追加されます。 例えば、Microsoft Outlookでは、<td>タグにインラインでフォントファミリーを指定しない限り、そのテーブル列に含まれる全てのテキストにデフォルトのフォントファミリーが適用されます。以下の例では、hs-inline-cssスタイルタグを使用してテンプレート内の全てのテーブル列にフォントファミリーを追加します。メディアクエリーはインラインで指定できないため、別の<style>に含める必要がある点に注意してください。 注：hs-inline-cssの代わりに、ドラッグ＆ドロップテンプレートの［編集］＞［Headの編集］で<style>タグにdata-hse-inline-css属性を設定する方法でも同じ目的を達成できます。コードファイルでは、（テンプレートに含まれるstyle#hs-inline-cssが1つだけであれば）どちらの方法も使用できます。複数のstyle[data-hs-inline-css="true"]要素を追加できます。

​
レスポンシブEメールテンプレート

HubSpotのデフォルトのEメールテンプレートレイアウトでは、以下のマークアップが使用されます。レスポンシブレイアウトには、画像やテーブルをレスポンシブにするメディアクエリーが含まれています。レスポンシブレイアウトでは、［設定］＞［マーケティング］＞［Eメール］に接続する色とフォントの変数が使用されます**。 **
HubSpotのレスポンシブレイアウトを使用する場合は、テキストの「列」を含むクラスが指定された<td>がレスポンシブになります。

​
基本Eメールテンプレート

HubSpotの基本テンプレートレイアウトでは、異なるマークアップが使用され、Eメールをレスポンシブにするメディアクエリーは挿入されません。基本レイアウトでも、［設定］＞［マーケティング］＞［Eメール］に接続する色とフォントの変数が使用されます**。 **

​
ゼロから作成する

デザインマネージャーで.htmlのEメールをゼロから作成すると、以下のマークアップが自動生成されます。
最終更新日 2026年2月10日