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

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

更新日時 2019年 4月 23日

対象製品

Marketing Hub  Professional, Enterprise
Basic

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

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

画像の中央配置

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

  • HubSpotアカウントにて、[マーケティング] > [Eメール]の順に進みます。
  • Eメールの名前をクリックします。
  • 画像のリッチテキストモジュールで、ソースコードアイコン codeをクリックします。
  • 中央に配置しようとしているで始まる画像のコード位置を特定します。
  • コードの周囲に
    または

    タグを追加します。例:

 

間隔

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

hspace と vspace を使用する

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

  • HubSpotアカウントにて、[マーケティング] > [Eメール]の順に進みます。
  • Eメールの名前をクリックします。

  • コンテンツモジュールをクリックし、ソースコードアイコン codeをクリックします。

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

source-code-hspace-vspace

表を使用する

3 列の表を作成して、画像、間隔、テキストを含めます。

  • HubSpotアカウントにて、[マーケティング] > [Eメール]の順に進みます。
  • Eメールの名前をクリックします。

  • リッチテキストエディターで、[表] > [表を挿入] の順にクリックします。。3x1 の表を作成します。

    create-table

  • ソースコードアイコン codeをクリックします。

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

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

table-styling

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