カスタム コード化されたマーケティング Eメールの外観が Outlook で異なる

カスタムコードマーケティングEメールを作成した場合、配置や間隔の問題など、Outlook でのEメールのレンダリング方法に不一致に気付く場合があります。

間隔の問題を解決

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

hspaceとvspaceを使用する

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

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. カスタム コード テンプレートを使用して下書きEメールの名前 をクリックします。
3. Eメールエディターで、編集する モジュール をクリックします。
4. リッチテキストツールバーの「詳細」ドロップダウンメニューをクリックし、「ソースコード」を選択します。 
5. ダイアログボックスで、画像コードの末尾にhspace="10" vspace="10" を追加します。10 を必要な間隔で置き換えます。

テーブルを使用する

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

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. カスタム コード テンプレートを使用して下書きEメールの名前 をクリックします。
3. Eメールエディターで、編集する モジュール をクリックします。
4. リッチ テキスト ツールバーで、[挿入]ドロップダウンメニューをクリックし、[テーブル]を選択して[ テーブル]を選択し、3x1テーブルを作成します。 

5. リッチ テキスト エディターのツールバーで、[ 詳細]ドロップダウンメニューをクリックし、[ソースコード]を選択します。

6. ダイアログボックスで、空のセルの幅( <td width="10">など)を追加して、 画像とテキストの間のスペースを設定します。
7. フォントファミリー、サイズ、色、および行の高さを設定します。これは、指定しない場合、Outlookによって独自のスタイルが追加されるためです。

予期しない水平線のトラブルシューティング

• Eメールの背景色を本文の色と同じにする。
• コンテンツのフォントサイズと行の高さを偶数に更新します。
• 次のCSSスタイル を EメールテンプレートのHeadセクションに追加します。