お客さまへの大切なお知らせ：膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。

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

更新日時 2020年 10月 28日

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

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

画像の中央配置

画像がOutlookの中央に表示されない場合は、モジュールソースコード内でHTMLを調整することができます。

HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。
Eメールの名前をクリックします。
画像のリッチテキストモジュールで、ソースコードアイコンcodeをクリックします。
中央に配置しようとしている<img>で始まる画像のコード位置を特定します。
<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を使用する方法と表を使用する方法）あります。

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

source-code-hspace-vspace

クラシックEメールエディターを使用している場合、3列の表を作成して、画像、間隔、テキストを含めることができます。

リッチテキストエディターで、［表］>［表を挿入］の順にクリックします。。3x1の表を作成します。
ソースコードアイコンcodeをクリックします。
<td width="10">のように空のセルに幅を指定して、画像とテキスト間に必要な間隔を確保します。
フォントファミリー、フォントサイズ、フォントカラー、および行の高さを指定します（例：style="font-family: sans-serif; font-size:15px; line-height:1.5em; color: #000000"）。指定しない場合は、Outlookが独自のスタイルを追加します。

table-styling

注：ドラッグ＆ドロップEメールエディターを使用している場合、表をEメールに挿入することはできません。

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