OutlookでEメールの表示が異なるのはどうしてですか？

HubSpotのEメールテンプレートとEメールは、ドラッグ＆ドロップエディターで作成され、一般的なEメールクライアント全体にわたって一貫性がありレスポンシブになるように設計されています。あらゆるEメールクライアントでEメールをプレビューすることもできます。OutlookではCSSのサポートが限定されているため、OutlookでのEメール表示方法に相違が確認される場合があります。OutlookでEメールの配置や間隔がおかしいことに気づいた場合、以下の手順で修正できます。 

注：HubSpotサポートはカスタムコードのEメールテンプレートをサポートできません。カスタムコードのテンプレートを使用している場合、テンプレートを作成したプロバイダーにお問い合わせください。または、コミュニティーで他のHubSpotユーザーやデザイナーと接触することもできます。

間隔

Outlookで画像周辺の間隔を調整する方法は2つ（hspaceまたはvspaceを使用する方法と表を使用する方法）あります。

hspaceとvspaceを使用する

HTML属性vspaceは縦スペースを定義し、画像の上部と下部に均等な間隔を追加します。hspace属性は水平スペースを定義し、画像の左右に均等な間隔を追加します。

• HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。

• Eメールの名前にカーソルを置き、［編集］をクリックします。

• コンテンツモジュールをクリックし、［詳細設定］>［ソースコード］をクリックします。

• 画像コードの最後に、hspace="10" vspace="10"のコードのいずれかまたは両方を追加します。「10」は実際の間隔の値に置き換えます。

表を使用する

3列の表を使用して画像、間隔、テキストを均等に含めることができます。

• HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。

• Eメールの名前にカーソルを置き、［編集］をクリックします。

• リッチテキスト エディター ツールバーで、［挿入］>［表］をクリックします。3x1の表を作成します。
  
  

• リッチテキスト エディター ツールバーで、［詳細設定］>［ソースコード］をクリックします。

• <td width="10">のように空のセルに幅を指定して、画像とテキスト間に必要な間隔を確保します。

• フォントファミリー、フォントサイズ、フォントカラー、および行の高さを指定します（例：style="font-family: sans-serif; font-size:15px; line-height:1.5em; color: #000000"）。指定しない場合は、Outlookが独自のスタイルを追加します。

デザイナーコミュニティーのEメールデザインについての詳細を確認してください。