Eメールテンプレートのマークアップ
この記事では、標準的なHubSpot Eメールテンプレートのコーディング方法について説明します。EメールクライアントでサポートされるHTML機能とCSS機能は限られています。このため、クライアント間で一貫して表示されるEメールテンプレートをコーディングするには、ある程度の経験と忍耐力が必要です。HubSpotのEメールテンプレートは、ユーザーフレンドリーなドラッグ&ドロップテンプレートまたはコードファイルとして作成できるようになっています。
ドラッグ&ドロップEメールテンプレートには、「レスポンシブ」と「基本」があります。「レスポンシブ」はレイアウトがビューポートのサイズに合わせて調整されることを意味し、「基本」はレイアウトが静的なままであることを意味します。
既定ではレスポンシブですが、詳細パネルの[レスポンシブEメールテンプレート]をクリックして[基本Eメールテンプレート]を選択することで、基本テンプレートに変換できます。
デザイナーはデザインマネージャーで既定の色とフォントをカスタマイズしたり([設定]>[マーケティング]>[Eメール])、ドラッグ&ドロップテンプレートのモジュールにインラインCSSを追加したりできます(モジュールのギアアイコン>[CSSを編集])。
HTMLとして複製することで、テンプレートレイアウトのマークアップはいつでも参照できます([アクション]>[HTMLに複製])。コードテンプレートでは、以下の変数を含めることにより、Eメールのマークアップを完全にカスタマイズできます。
HubSpotでEメールを送信するには、テンプレートに特定の情報を含める必要があります。必要なEメールHubL変数を参照してください。コードテンプレートを操作する場合は、1件ずつのEメールの内容を簡単に編集できるように、モジュールも使用する必要があります。
全てのクライアントで正しく表示されるEメールテンプレートをコーディングする際の課点の1つは、<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"]
要素を追加できます。
HubSpotの既定のEメールテンプレートレイアウトでは、以下のマークアップが使用されます。レスポンシブレイアウトには、画像やテーブルをレスポンシブにするメディアクエリーが含まれています。レスポンシブレイアウトでは、[設定]>[マーケティング]>[Eメール]に接続する色とフォントの変数が使用されます。
HubSpotのレスポンシブレイアウトを使用する場合は、テキストの「列」を含むクラスが指定された<td>
がレスポンシブになります。
HubSpotの基本テンプレートレイアウトでは、異なるマークアップが使用され、Eメールをレスポンシブにするメディアクエリーは挿入されません。基本レイアウトでも、[設定]>[マーケティング]>[Eメール]に接続する色とフォントの変数が使用されます。
デザインマネージャーでゼロから.html Eメールを作成すると、以下のマークアップが自動生成されます。
貴重なご意見をありがとうございました。