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

更新されたクラシックEメールエディターを使用してマーケティングEメールを作成している場合、OutlookのCSSのサポートに制限があるため、OutlookでのEメールのレンダリング方法に不一致を感じることがあります。

OutlookでEメールの配置や間隔がおかしいことに気づいた場合、以下のトラブルシューティング手順に従ってください。

Eメールデザインについては、HubSpot Designers Communityをご覧ください。 

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

間隔

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

hspaceとvspaceの使用箇所

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

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

• 名前カスタムコード テンプレートの上にカーソルを置き、"Eメールを編集"をクリックします。

• コンテンツ・モジュールをクリックする。

• 画像コードの最後に、以下のコードのどちらか、または両方を追加する：hspace="10" vspace="10"のどちらか一方を、必要なスペーシングで置き換えてください。10

テーブル使用箇所

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

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

• 名前カスタムコードテンプレートをクリックし、"Eメールを編集"をクリックします。

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

• リッチテキストエディタのツールバーで、Advancedをクリックし、Source codeを選択します。

• <td width="10">のように、画像とテキストの間隔を空セルで指定する。

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

Eメールに表示される予期せぬ横線のトラブルシューティング

Outlookの一部のバージョンで既知のバグにより、Eメールのセクション間に横線が表示されることがあります。この問題を解決する一貫した方法はありませんが、フォローしない（No follow）トラブルシューティングの手順を試すことができます：

• Eメールの背景色を本文の色と同じにする。
• コンテンツのフォントサイズと行の高さを偶数に更新する。
• Eメールテンプレートのheadセクションに、以下のCSSスタイルを記述してください：