【HTMLエディター】画像メールを作成しようとすると余白/隙間ができるので消したい

【HTMLエディター】画像メールを作成しようとすると余白/隙間ができるので消したい

LPのようなメルマガを飛ばす場合、縦長の画像をいくつかに分割して挿入すると思います。
この際、端末で見てみると画像と画像の間や左右で余白が空いてしまうことがあります。
この記事では、この余白を消す方法について説明していきます。


1. padding,marginの設定を確認する

左右の余白では特に見落としがちになるのですが、画像の外側にあるカラム(table)要素に余白が入ってしまっていることが原因の可能性があります。

1-a. カラム(table)の余白

画像の外側のtableをクリックして頂き、右上の編集ボタンから「属性 > Margin,Padding」を確認してください。
Marginの上下(top,bottom)とPaddingが0以外の値になっていたら、0にするようにしましょう。


1-b. 画像の余白

または、画像自体に余白が付いている可能性があります。
下記にHTMLエディターで対応する方法を一応記載しますが、2の手順でまとめて対応できますので、飛ばしてしまって大丈夫です。

(HTMLエディターで対応する方法)
画像の外側のtableをクリックして頂き、右上の編集ボタンから「属性 > Margin,Padding」を確認してください。
MarginとPaddingが0以外の値になっていたら、0にするようにしましょう。




2. img,aタグのdisplayの変更

HTMLエディター上では見た目は直っているのに、テスト配信を行ってみると
一部アプリにおいては、上記対応を行ってもまだ余白が表示されてしまうことがあります。
これに対応するためには、「HTML入稿（ソース）」モードでの対応が必要です。


「HTML入稿（ソース）」モードに切り替えて頂き、
  1. <style>
と書かれている箇所の直下に、下記をコピーして貼り付けてください。
  1. a{display:block!important; margin:0!important; padding:0!important;}
  2. img{display:block!important; margin:0!important; padding:0!important;}
貼り付けた後、「HTMLメールエディタ(β)」モードに戻してもらい、崩れていないことを確認してテストメールを送信してください。

上記方法で上手く行かないなど、困ったことがありましたらCSまでご連絡ください。

参考記事


    • Related Articles

    • 【HTMLエディター】iPhoneで見ると左と上に灰色の謎の背景がある

      HTMLエディターで作成したメールをiPhoneのデフォルトメールアプリで確認したときに、下図のようにメールの左側と上の途中までが灰色になってしまう場合があります。 (現状『iPhone×デフォルトメールアプリ[青いアイコンの物]』の条件下でのみ確認していますが、この条件以外でもし見つけましたら教えて頂けますと幸いです。) この記事では、このような現象が発生した場合の対応方法について記載していきます。 原因 原稿の幅がスマホの幅を越えていることが原因です。 対応方法 1. ...

    • 【HTMLエディター】Outlookでメールレイアウトが崩れる

      この記事では、Outlook(旧版)におけるメールの崩れとその対策について紹介していきます。 修正できない点 まず、修正しきれない点について紹介していきます。 ボタン要素の角丸・余白・下線 ボタン要素(a)における角丸・余白(border-radius, padding, text-decoration)はインラインCSSであっても無効化されてしまいます。ご了承ください。 [エディターでの見え方] [Outlook旧版での見え方] 修正できる点 画像やテキスト要素の幅 ...

    • 【HTMLエディター】テキストを挿入・編集したい

      テキストの追加 下記手順にテキストを追加して下さい。 上側リボンにある追加ボタン[+]を押す。 右側メニューにある[テキスト]を挿入したい場所にドラッグする。 ダブルクリックしてテキストを書き換える。 [テキスト設定]や[装飾]から文字色などを変更できます。(詳細は記事下部のテキストの変更で解説しています。) テキストの編集 編集したいテキストをダブルクリックすることで、文字列を編集できます。 ...

    • 【HTMLエディター】ボタンを挿入・編集したい

      ボタンの追加 A. ボタンの挿入 下記手順でボタンを追加して下さい。 上側リボンにある追加ボタン[+]を押す。 右側メニューにある[ボタン]を挿入したい場所にドラッグする。 ダブルクリックしてテキストを書き換える。 [テキスト設定]や[装飾]から文字色などを変更できます。(詳細は記事下部のテキストの変更で解説しています。) B. ボタンのリンク先設定 上部リボンにある歯車ボタンを押す。 遷移先URLを設定する。 (タイトルは「null(空のまま)」、ターゲット属性は「New ...

    • 【HTMLエディター】画像が縦伸びする

      HTMLエディターで画像を設定した際に、画像が縦に長くなってしまう(縦に伸びる・縦伸び)ような現象が発生してしまった場合の対応方法について説明していきます。 対応方法 変更したい画像をクリックし、「属性 > Height」のにある「×」を押す。 (or 数字を全て消す or 「auto」と入力する) 下図のように「Height」の部分が「auto」になっていればok。 発生している原因 スマートフォンの場合、画面幅が360~400px程度になります。 ...