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

HTMLエディターで作成したメールをiPhoneのデフォルトメールアプリで確認したときに、下図のようにメールの左側と上の途中までが灰色になってしまう場合があります。

(現状『iPhone×デフォルトメールアプリ[青いアイコンの物]』の条件下でのみ確認していますが、この条件以外でもし見つけましたら教えて頂けますと幸いです。)

この記事では、このような現象が発生した場合の対応方法について記載していきます。

原因

原稿の幅がスマホの幅を越えていることが原因です。

対応方法

1. 原稿幅をスマホの幅以内に収める

1. 幅(width)がピクセル値(○○px)で指定してありそうな要素をHTMLエディタから探す。
   ほとんどの場合は画像orボタンです。
   (添付図では、ボタンが160pxと指定してあり、160px×3個＝480pxとなって360pxを越えているのが原因でした。)
2. width値がスマホ幅(目安360px)を越えないように修正する。
   (添付図max-widthが指定してありますが、iPhoneのデフォルトメールアプリではwidthしか見ないため、widthとmax-widthを逆にする対応を行います。)
3. テスト配信を行い、見え方を確認する。
   (添付図では、ボタンの幅が各列の85%になっている(文字左右の余白が無くなっている)ことが分かるかと思います。)
   
   
   
4. これで原稿がスマホ幅内に収まり、正しく左右中央揃えになりました！
   「左右が揃っていれば背景色はこのままで大丈夫」という方はここで終わりです。

2. 背景の灰色を白くする。

両側に見えている灰色の部分は、HTMLエディターの両側に見えている灰色の部分ではありません。

この部分はパソコンなど、幅600px以上のデバイスの場合にのみ表示される部分であって、iPhoneのデフォルトメールアプリで表示されているのはbody要素の背景色です。

そのため、HTMLエディタでは下記手順にてbody要素の背景色を設定してください。

1. リボン右上のレイヤーボタン(ひし餅みたいな形の右から2番目のもの)を押下する。
   
2. 一番上にある「Body」をクリックする(少し全体的に色が薄くなる)。
   
3. リボン右上の編集ボタン(筆(🖌)みたいなもの)を押下する。
   
4. 装飾トグルをクリックして開く。
5. 「Background」に「#ffffff」と記入する。
   
   
6. テスト配信を行って正しく変更されているか確認する。
   

もし「どの要素が原因でスマホ幅を越えてしまっているのか分からない」「上記手順を行っても上手く行かない」等の場合には、CSまでご連絡ください。

• Related Articles

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

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

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

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

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

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

• 【HTMLエディター】画像が表示されない

  拡張子の確認 画像の拡張子として下記以外のもの(例：.webp, .svg, .tif等)を使用している場合、使用しているメールアプリ(Gmail,Outlook等)によっては画像が表示されません。 下記の形式の画像を使用するようにしてください。 .png .jpg (.jpeg) より詳しく知りたい方は下記記事をご覧ください。 【メール設定】webpやsvgは使用して良いの？メールに使用して良い画像の拡張子は？ Gmailの場合 ...

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

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