【HTMLエディター】Outlookでメールレイアウトが崩れる
この記事では、Outlook(旧版)におけるメールの崩れとその対策について紹介していきます。
修正できない点
まず、修正しきれない点について紹介していきます。
- ボタン要素の角丸・余白・下線
ボタン要素(a)における角丸・余白(border-radius, padding, text-decoration)はインラインCSSであっても無効化されてしまいます。ご了承ください。
[エディターでの見え方]
[Outlook旧版での見え方]
修正できる点
- 画像やテキスト要素の幅
画像やテキスト要素の幅が大きくなりすぎてしまう場合には、その要素(img,text)を選択した状態で、属性内にある
Width:600px; Max-width:100%;
を設定することで直ります。(メール幅が600pxの場合)
2列カラムの場合はWidth:300px; にする等、状況に応じて数値の変更をお願いします。
Related Articles
【HTMLエディター】スマホで見たときにテキスト・文字が小さくなる
HTMLエディターで作成したメールの文字が、スマホで見ると小さくなってしまう場合に解決するための方法を紹介していきます。 なぜこのような事象が発生するのか？ 画像がある場合にサイズ指定がなされていない場合に元のサイズのまま画像を表示しようとすることが原因で、相対的に文字が小さくなってしまいます。 スマホのGmailアプリやOutlookメールアプリで確認した際に、比較的発生しやすい現象です。 ...【HTMLエディター】画像が縦伸びする
HTMLエディターで画像を設定した際に、画像が縦に長くなってしまう(縦に伸びる・縦伸び)ような現象が発生してしまった場合の対応方法について説明していきます。 対応方法 変更したい画像をクリックし、「属性 > Height」のにある「×」を押す。 (or 数字を全て消す or 「auto」と入力する) 下図のように「Height」の部分が「auto」になっていればok。 発生している原因 スマートフォンの場合、画面幅が360~400px程度になります。 ...【HTMLエディター】画像が表示されない
拡張子の確認 画像の拡張子として下記以外のもの(例：.webp, .svg, .tif等)を使用している場合、使用しているメールアプリ(Gmail,Outlook等)によっては画像が表示されません。 下記の形式の画像を使用するようにしてください。 .png .jpg (.jpeg) より詳しく知りたい方は下記記事をご覧ください。 【メール設定】webpやsvgは使用して良いの？メールに使用して良い画像の拡張子は？ Gmailの場合 ...【HTMLエディター】画像が大きく表示される
Outlookの場合 Outlookメールアプリの場合、画像のcssが効かずに元の画像サイズで表示されます。 こちらはエディタの問題では無く、Outlookアプリ側の問題のため、挿入する画像サイズを小さくして頂くことでご対応をよろしくお願いいたします。【HTMLエディター】iPhoneで見ると左と上に灰色の謎の背景がある
HTMLエディターで作成したメールをiPhoneのデフォルトメールアプリで確認したときに、下図のようにメールの左側と上の途中までが灰色になってしまう場合があります。 (現状『iPhone×デフォルトメールアプリ[青いアイコンの物]』の条件下でのみ確認していますが、この条件以外でもし見つけましたら教えて頂けますと幸いです。) この記事では、このような現象が発生した場合の対応方法について記載していきます。 原因 原稿の幅がスマホの幅を越えていることが原因です。 対応方法 1. ...