HTMLメールでメールを配信する場合に、レスポンシブ(スマホ/PC)で画像の比率を崩さない方法や推奨のサイズがあれば教えてください。
新メールエディタでHTMLメールをレスポンシブに作成しておりますが、
画像のサイズをPCに合わせて設定することで、スマートフォンにした場合に比率が崩れて文字が読めなくなってしまいます。
推奨の画像サイズや画像の比率を崩さない方法があれば教えてください。
-
ご質問いただき、ありがとうございます。
早速ですが、本件を回答いたします。
今回の新メールエディタでレスポンシブ(PC/スマホ)の両方で、表示される画像の崩れを防ぐために、以下の推奨の画像サイズや画像の比率を崩さない方法をご案内いたします。また、画像サイズや比率変更後にレスポンシブに対応できているかの確認方法も合わせて記載いたします。■レスポンシブ対応の推奨の画像サイズ
以下の内容で画像を作成していただき、新メールエディタへご登録ください。- 推奨の画像自体の横幅 ：～600px
※画像自体の幅の上限値:600px - 推奨の画像の拡張子：SVG/PNG
補足：
上記で比率が崩れてしまう場合は、以下の「画像の比率を崩さない方法」をご確認ください。■画像の比率を崩さない方法
PCの表示に合わせて、CSSで縦横の幅を両方とも強制的に設定されていると、スマホ側の画像も固定されてるため、縦横比率が崩れる可能性があります。
PC表示に合わせて、CSSを調整する場合は、幅のみを指定いただくと、自動で幅に合わせて高さをリサイズ(拡大/縮小)します。
これにより、縦横比率の崩れを防ぐことが可能です。
以下の画像の例では、画像の「プロパティ設定」を変更することで縦横比率の変動を確認できます。
(画像1)
- 元サイズ：画像を当てはめると、縦横比率が崩れています。
幅 ：150px
高さ：150px
- [プロパティ設定]の1回目変更：[幅]を600pxにすると、縦横比率が変わります。
幅 ：600px
高さ：150px
- [プロパティ設定]の2回目変更：[高さ]の値を削除することで、autoになり、高さをリサイズ(拡大/縮小)します。
幅 ：600px
高さ：auto
詳しくは以下のマニュアルからご確認ください。
テンプレートを登録する>【画像】
■編集画面からレスポンシブ対応(PC版/スマホ版)の確認方法
PC版/スマホ版へのレスポンシブに対応できているかの確認は、編集画面の機能で確認可能です。
以下のマニュアルの項目の詳細の表より、以下の項目についての説明が記載されております。
テンプレートを登録する>【本文】-
：PCでメールを受信した時の文章を確認することができます。 -
：スマホでメールを受信した時の文章を確認することができます。
0 - 推奨の画像自体の横幅 ：～600px
サインインしてコメントを残してください。
コメント
1件のコメント