画像パーツは、レイアウトパーツ（「1列」「2列」「3列」）の中に入れて配置してください。レイアウトパーツの外に直接置いた画像は、スマートフォンで表示したときに縮まず、メールの枠からはみ出してしまいます。
どのように表示されるか
パソコンで見ると、画像はメールの枠の中にきれいに並んでいます。
ところが、スマートフォンで表示すると、レイアウトパーツの外に置いた画像だけが縮まず、枠の外にはみ出します。下の例では、1枚目はレイアウトパーツの中、2枚目と3枚目はレイアウトパーツの外に置いています。
実際に届いたメールでも、同じように表示されます。
レイアウトパーツの中と外の見分け方
メール本文の編集画面で、画像のまわりに点線の枠があれば、レイアウトパーツの中に入っています。点線の枠がない画像は、レイアウトパーツの外に置かれています。
直し方
1⃣ メール本文の編集画面で、左側の「レイアウトパーツ」から「1列」を、メール本文の中にドラッグ＆ドロップします。「ここにパーツをドラッグ」と書かれた点線の枠ができます。
🔻
2⃣ 「シングルパーツ」の「画像」を、いま作った点線の枠の中にドラッグ＆ドロップします。
🔻
3⃣ 画像パーツをクリックし、上に出るメニューの「画像を選択」から、表示したい画像を選びます。
🔻
4⃣ レイアウトパーツの外に置いていた画像パーツは、削除します。
🔻
5⃣ 「メール本文を保存」をクリックしたあと、右上の「プレビュー」で「スマホ」に切り替えて、画像が枠に収まっているか確認します。
ポイント
✔ 画像パーツをメール本文に置くときは、先にレイアウトパーツを置いてから、その中に入れる順番にすると、はみ出しを防げます。
注意
パソコンのプレビューだけでは、はみ出しに気付けません。配信する前に、プレビューの「スマホ」表示と、テスト送信でスマートフォンに届いたメールの両方で、見え方を確認してください。
メール本文で使えるパーツについては、HTMLメールを作成するパーツについてをご覧ください。