#やりたいこと
モバイルやPCに配信されたHTMLメール中の画像サイズについて
A)あるスマホで受信したメール本文の画像(横長のボタン)を見た場合
B)別の機種のスマホで受信したメール本文中の横長のボタン画像
見比べてみると、Aでは、ボタン画像は画面の幅いっぱいに近いくらい大きく見え、Bでは、ボタンの画像がすごく小さく見えてしまいます。
なお、メール配信時には、キャリアによってメール本文を書き換えるような
ことはしていません。
いまやりたいことは、できるだけ異なるスマホで(HTMLメールを)見た場合に
画像サイズ感を同じにしたい、ということです。
ちなみに、比較した2機種はどちらも、画面はFHDで解像度も同じでした。
こういった場合、どういった点に注意してHTMLを作成すれば、ボタン画像の
サイズ感は同じになるでしょうか?
コードを掲載します。
A,Bの2機種で違う見え方をした画像は、alt="詳しい応募方法" の画像です。
(このコードでは画像のパスを公開できないのですが、実際は、画像は確実にWEBサーバに存在しパスも間違っていません。)
HTML
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html> 3<head> 4<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 5<meta name="viewport" content="width=device-width"> 6<title>〇〇 2018年8月号</title> 7 8<style type="text/css"> 9<!-- 10* {margin: 0; padding: 0;} 11td {border-collapse: collapse;} 12a:link, a:visited {text-decoration: underline;} 13@media only screen and (max-width: 699px) { 14table.container { 15width: 100% !important; 16} 17.header_left { 18width:35%; 19} 20.header_right { 21width:65%; 22} 23.common_padding { 24padding-left:10px !important; 25padding-right:10px !important; 26} 27.fluid { 28display: block !important; 29width: 100% !important; 30padding:0 !important; 31clear: both; 32margin-bottom: 30px; 33} 34} 35--> 36</style> 37 38</head> 39<body text="#333333" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" style="width: 100% !important; background: #ffffff; margin:0; padding:0;"> 40<div style="font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;"> 41 42<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f7f7f7"> 43<tr> 44<td align="center" valign="top"> 45<center> 46 47<table class="container" width="700" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff;"> 48<tr> 49<td> 50<!--Header--> 51<table class="container" width="700" border="0" cellspacing="0" cellpadding="0"> 52<tr> 53<td align="center" colspan="2" style="background:#ebebeb; font-size:10px; line-height:1.4; padding:10px;"> 54このメールは〇〇〇・ジャパンから会員の方々にお送りしています。<br/> 55画像がうまく表示されない方は、<a href="https://goo.goo/V" target="_blank" style="color:#003E7E">こちらのWEBページ</a>をご覧ください。 56</td> 57</tr> 58<tr> 59<td class="header_left" align="left" width="350" style="font-size:0; line-height:1; padding:15px 15px;"> 60<a href="https://www.project.com/jp/home.html" target="_blank"><img src="https://members.com/_var/header_logo.png" border="0" style="width:71px; height:50px; display:block;" alt="D"> 61</a> 62</td> 63<td class="header_right" align="right" width="350" valign="middle" style="font-size:11px;padding-right:15px;text-align:right;"> 64<a href="https://www.project.com/jp/home.html" target="_blank" style="color:#003E7E;">サイト</a> 65<a href="https://members.com/user/edit" target="_blank" style="color:#003E7E;">配信内容の変更</a> 66</td> 67</tr> 68</table> 69</td> 70</tr> 71 72<!-- Main --> 73<tr> 74<td align="center" style="font-size:0;"><img src="https://members.com/_var/2018/bn_02.jpg" border="0" style="width:100%; display:block;" alt="キャンペーン"></td> 75</tr> 76 77<tr> 78<td class="common_padding" style="padding:0 15px"> 79<table class="container" width="670" border="0" cellspacing="0" cellpadding="0"> 80<tr> 81<td style="padding:25px 0 0"> 82<p style="display:block; font-size:15px; color:#333333; line-height:1.4;">夏の訪れを感じる季節になりましたね。<br/> 83今回も、キャンペーンをご紹介!<br/> 84ぜひご応募ください。</p> 85</td> 86</tr> 87<tr> 88<td style="padding:50px 0 25px"> 89<h3 style="font-size:18px; color:#003E7E; font-weight:bold; line-height:1.4;">毎月100名様に〇〇が当たる!</h3> 90<h2 style="font-size:23px; color:#003E7E; font-weight:bold; line-height:1.25; margin-top:5px;">ご登録情報更新キャンペーン</h2> 91<p style="display:block; font-size:15px; color:#333333; line-height:1.4; margin-top:25px;">会員の皆様に感謝の気持ちを込めて、毎月100名様に当たる!「ご登録キャンペーン」<br/> 92現在、第n回のご応募受付中!ご応募お待ちしております。<br/><br/> 93 94◆応募期間:201n年n月n日(火) ~ 201n年n月n日(火)23:59まで<br/> 95 <s>第1回締切:201n年n月n日(木) 23:59まで</s><br/> 96 <s>第2回締切:201n年n月n日(土) 23:59まで</s><br/> 97 第3回締切:201n年n月n日(火) 23:59まで<br/> 98◆当選人数:毎月10名様(合計30名様)<br/> 99◆当選賞品:〇〇<br/> 100</p> 101</td> 102</tr> 103<tr> 104<td align="center"> 105<a href="https://goo.goo/L" target="_blank"><img src="https://members.com/_var/images/button_new.png" width="240" height="42" alt="詳しい応募方法"></a> 106</td> 107</tr> 108<tr> 109<td style="padding:25px 0 0"> 110</td> 111</tr> 112</table> 113</td> 114</tr> 115 116<tr> 117<td><img src="https://members.com/_var/images/spacer.gif" style="display:block;" height="60" alt=""></td> 118</tr> 119<tr> 120<td class="common_padding" style="padding:0 15px"> 121 122<!-- Contents --> 123<table class="container" width="670" border="0" cellspacing="0" cellpadding="0"> 124<tr> 125<!-- 大見出し --> 126<td style="color:#fff; background:#003E7E; font-size:20px; font-weight:bold; line-height:1.4; padding:15px">お知らせ 127</td> 128</tr> 129<tr> 130<!-- 131<td style="padding:30px 0 0;"> 132</td> 133--> 134</tr> 135</table> 136<!-- /Contents --> 137</td> 138</tr> 139<tr> 140<td><img src="https://members.com/_var/spacer.gif" style="display:block;" height="60" alt=""></td> 141</tr> 142<!-- Footer --> 143<tr> 144 145<td align="center" style="font-size:11px; line-height:1.4; padding:40px 0; background:#ebebeb;"> 146<!-- 147--> 148</td> 149</tr> 150</table> 151<!-- /container --> 152 153</center> 154</td> 155</tr> 156</table> 157 158</div> 159 160</body> 161</html>
回答2件
あなたの回答
tips
プレビュー