カスタムコードマーケティングEメールを作成した場合、配置や間隔の問題など、Outlook でのEメールのレンダリング方法に不一致に気付く場合があります。以下のセクションのトラブルシューティング手順に従って、次のセクションに役立てることができます。
OutlookでEメールの配置や間隔がおかしいことに気づいた場合、以下のトラブルシューティング手順に従ってください。
Eメールデザインについては、HubSpot Designers Communityをご覧ください。
間隔
Outlookで画像周辺の間隔を調整する方法は2つ（hspaceまたはvspaceを使用する方法と表を使用する方法）あります。
hspaceとvspaceの使用箇所
HTML属性vspaceは縦スペースを定義し、画像の上部と下部に均等な間隔を追加します。hspace属性は水平スペースを定義し、画像の左右に均等な間隔を追加します。
- HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
- イメージ コードの末尾に、次のコードのいずれかまたは両方を追加します:
hspace="10" vspace="10", replacing 10 を目的の間隔の金額に置き換えます。
テーブル使用箇所
3列の表を使用して画像、間隔、テキストを均等に含めることができます。
- HubSpotアカウントにて、［マーケティング］＞［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スタイルを記述してください：
ms-text-size-adjust: none; mso-line-height-rule: exactly;
Marketing Email
Marketing Hub
Professional
,
Enterprise
Content Hub
Professional
,
Enterprise
