HubSpot のEメールテンプレートとEメールは、ドラッグ＆ドロップエディターで作成され、一般的なEメールクライアント全体にわたって一貫性がありレスポンシブになるように設計されています。あらゆるEメールクライアントでEメールをプレビューすることもできます。Outlook では CSS のサポートが限定されているため、Outlook でのEメール表示方法に相違が確認される場合があります。Outlook でEメールの配置や間隔がおかしいことに気づいた場合、以下の手順で修正できます。
注：HubSpot サポートはカスタムコードのEメールテンプレートをサポートできません。カスタムコードのテンプレートを使用している場合、テンプレートを作成したプロバイダーにお問い合わせください。または、コミュニティーで他の HubSpot ユーザーやデザイナーと接触することもできます。
画像の中央配置
画像が Outlook の中央に表示されない場合は、モジュールソースコード内で HTML を調整することができます。
- HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。
- Eメールの名前をクリックします。
- 中央に配置しようとしている
で始まる画像のコード位置を特定します。
- <img>コードの周囲に<center> </center>または<p style="text-align: center;"> </p>タグを追加します。例：
<center><img src="http://www.hubspot.com/test.jpg"></center>
<p style="text-align: center;"><img src="http://www.hubspot.com/test.jpg"></p>
間隔
Outlook で画像周辺の間隔を調整する方法は 2 つ（hspace または vspace を使用する方法と表を使用する方法）あります。
hspace と vspace を使用する
HTML 属性 vspace は縦スペースを定義し、画像の上部と下部に均等な間隔を追加します。hspace 属性は水平スペースを定義し、画像の左右に均等な間隔を追加します。
- HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。
-
Eメールの名前をクリックします。
-
コンテンツモジュールをクリックし、ソースコードアイコンをクリックします。
- 画像コードの最後に、hspace="10" vspace="10" のコードのいずれかまたは両方を追加します。「10」は実際の間隔の値に置き換えます。
表を使用する
3 列の表を作成して、画像、間隔、テキストを含めます。
- HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。
-
Eメールの名前をクリックします。
-
リッチテキストエディターで、[表] > [表を挿入] の順にクリックします。。3x1 の表を作成します。
-
ソースコードアイコンをクリックします。
-
のように空のセルに幅を指定して、画像とテキスト間に必要な間隔を確保します。
-
フォントファミリー、フォントサイズ、フォントカラー、および行の高さを指定します（例：style="font-family: sans-serif; font-size:15px; line-height:1.5em; color: #000000"）。指定しない場合は、Outlook が独自のスタイルを追加します。
デザイナーコミュニティーのEメールデザインについての詳細を確認してください。