Email

画像のマージンとパディングがOutlookでレンダリングされないのはなぜですか。

更新日時 November 29, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise

マージンやパディングなどの特定のCSSプロパティがおよび

などの特定の要素に適用されると、Outlookでは対応できません。メールクライアントでサポートされるCSSの全リストはこちらです。メールのリッチテキストモジュール内に作成されたマージンは、Outlookを除く主なクライアントのほとんどで正しく表示されます。

画像のスペースを調整するには、メールにある対象の各リッチテキストモジュールの[ソースコード]にアクセスする必要があります。それらのすべての方法で、Outlookに表示される画像とテキストの間にスペースが入れられることになっていても、それらは実際のマージンに代わるものではなく、これらのワークアラウンドにはそれぞれ特徴があります。これらの方法にはHTMLの基本的な知識が必要です

  • [コンテンツ] > [Eメール]の順に進み、メールの名前をクリックします。
  • 画像のリッチテキストモジュールで、[ソースコード]アイコンをクリックします。
User-added image
User-added image

方法1 - hspaceまたはvspaceを使う

  • スペースを追加する画像のソースコードを見つけます。
  • 画像コードの最後に、hspace="10" vspace="10"のコードのいずれかまたは両方を追加します。「10」は実際のスペースの値に置き換えます。
User-added image
hspaceは横のスペースを定義し、画像の左右に均等なスペースを加えます。
  • vspaceは縦のスペースを定義し、画像の上下に均等なスペースを加えます。

方法2 - 表を使う

  • メールのリッチテキストエディタの[表] > [表を挿入]をクリックして、画像、スペース、テキストがある3列の表を作ります。
User-added image
User-added image
  • 表の[ソースコード]で、空白セルの幅に画像とテキスト間のスペースの幅を指定します。たとえば、などです。
  • 表の[ソースコード]で、フォントファミリー、フォントサイズ、フォントの色、行の高さを指定します。たとえば、style="font-family: sans-serif; font-size:15px; line-height: 1.5em; color: #000000"などです。指定しない場合、Outlookでは独自のスタイルが適用されます。
  • 表とhspace/vspaceの方法を組み合わせることもできます。
User-added image
User-added image