【HTMLエディター】画像が大きく表示される

【HTMLエディター】画像が大きく表示される

画像が大きく表示されてしまってレイアウトが崩れてしまう場合の多くはメールのCSSの設定不足や設定間違いです。
又は一部メールアプリによっては対応できない場合もあります。

HTMLソース入稿をしている場合

ソース入稿をしている場合、下記の様なソースになっているかご確認ください。
  1. <img src="https://example.com/img/sampleimg.jpg" width="600" style="width:100%; max-width:600px;">
  1. width="600" が設定してある(←2列カラムの場合は300)
  2. style="width:100%;"が設定してある
  3. style="max-width:600px;"が設定してある(←2列カラムの場合は300px)

エディターで設定している場合

エディターで画像を設定している場合、画像幅が下記の通りに設定されているかご確認ください。
  1. Width：100%
  2. Max Width：600px (←2列カラムの場合は300px)

(上記2つの設定をしてもOutlookの場合は元サイズで表示されます。Outlookにも対応したい場合には下記方法にて対応をお願いします。)

また、配信容量の観点からも、画像サイズ自体を小さくする(目安幅600px以下)ことでも疑似的に対応が可能となります。

Outlookの場合

Outlook[classic]メールアプリの場合、申し訳ありませんがエディターのみでは対応が出来ません。
下記手順にて対応をお願いいたします。
また、下記手順を行っても対応できない場合には、画像サイズ自体を小さくする(目安幅600px以下)ことでご対応をお願いいたします。
  1. エディターのViewCode「</>」ボタンを押し、出てきたコードを全文コピーして、メモ帳等に貼り付ける。


  2. 該当する画像部分のソース(<img src="~">)の末尾に、「width="600"」という記述を追加する。
    (1カラム想定です。メールマガジン自体の幅や、画像の横並びの数に応じて変更をお願いします。)
  3. 修正後のソースをコピーして、エディターのimport「↓」ボタンを押し、出てきたモーダルウィンドウに貼り付け、左下の「Import」ボタンを押す。




    • Related Articles

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

      HTMLエディターで画像を設定した際に、画像が縦に長くなってしまう(縦に伸びる・縦伸び)ような現象が発生してしまった場合の対応方法について説明していきます。 HTMLエディタでの対応方法 変更したい画像をクリックし、「属性 > Height」のにある「×」を押す。 (or 数字を全て消す or 「auto」と入力する) 下図のように「Height」の部分が「auto」になっていればok。 ソース編集での対応方法 <img alt="サンプル画像" ...

    • 【HTMLエディター】スマホで見たときにテキスト・文字が小さくなる

      HTMLエディターで作成したメールの文字が、スマホで見ると小さくなってしまう場合に解決するための方法を紹介していきます。 なぜこのような事象が発生するのか？ 画像がある場合に正しくサイズ指定がなされていない場合に元のサイズのまま画像を表示しようとすることが原因で、相対的に文字が小さくなってしまいます。 スマホのGmailアプリやOutlookメールアプリで確認した際に、比較的発生しやすい現象です。 ...

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

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

    • 【HTMLエディター】ボタンを左右中央揃えに配置したい

      ボタンの設置や見た目の変更については『【HTMLエディター】ボタンを挿入・編集したい』の記事を参考にして下さい。 ボタンを左右中央揃えに配置するためには、 まず「1カラム」を挿入し、その中に「ボタン」を挿入して、1カラム側で左右中央揃えの設定を行う必要があります。 「1カラム」を挿入します。 「ボタン」を挿入します。 ボタンのすぐ外側にある「Table cell」を選択します。 「テキスト設定 > Text align：center」を選択する。 ボタンが左右中央揃えになりました。

    • 【HTMLエディター】HTMLで作成したメールをHTMLエディターで編集したい

      方法1. HTML入稿（ソース）で入稿して切り替える 下記のようにHTML入稿を行っている場合、「入稿方法 > HTMLメールエディタ(β)」を選択して頂くことで、エディタに切り替わります。 方法2. HTMLメールエディタ(β)でインポートする はじめからHTMLメールエディタ(β)モードで開き、上部リボンの「インポート(↓)」ボタンを押下して頂くと、インポート用のモーダルウィンドウが表示されます。 ...