マイメールのデザインが

-1
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css"> 
 
    ReadMsgBody{ width: 100%;} 
 
    .ExternalClass {width: 100%;} 
 
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 
 
    body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;} 
 
    p { margin: 1em 0;} 
 
    table td { border-collapse: collapse;} 
 
    img {outline:0;} 
 
    a img {border:none;} 
 
    p {margin: 1em 0;} 
 
    @-ms-viewport{ width: device-width;} 
 
    
 
    @media only screen and (max-width: 300PX) { 
 
    body[yahoo] .container { width:100% !important; } 
 
    body[yahoo] .footer { width:auto !important; margin-left:0; } 
 
    body[yahoo] .content-padding{ padding:4px !important; } 
 
    body[yahoo] .mobile-hidden { display:none !important; } 
 
    body[yahoo] .logo { display:block !important; padding:0 !important; } 
 
    body[yahoo] img { max-width:100% !important; height:auto !important; max-height:auto !important;} 
 
    body[yahoo] .header img{max-width:100% !important;height:auto !important; max-height:auto !important;} 
 
    body[yahoo] .photo img { width:100% !important; max-width:100% !important; height:auto !important;} 
 
    body[yahoo] .drop { display:block !important; width: 100% !important; float:left; clear:both;} 
 
    body[yahoo] .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;} 
 
    body[yahoo] .nav4, body[yahoo] .nav5, body[yahoo] .nav6 { display: none !important; } 
 
    body[yahoo] .tableBlock {width:100% !important;} 
 
    body[yahoo] .responsive-td {width:100% !important; float:left !important; padding:0 !important; } 
 
     .fluid, .fluid-centered { 
 
     width: 100% !important; 
 
     max-width: 100% !important; 
 
     height: auto !important; 
 
     margin-left: auto !important; 
 
     margin-right: auto !important; 
 
     } 
 
     .fluid-centered { 
 
     margin-left: auto !important; 
 
     margin-right: auto !important; 
 
     } 
 
    /* MOBILE GLOBAL STYLES - DO NOT CHANGE */ 
 
     body { padding: 0px !important; font-size: 16px !important; line-height: 150% !important;} 
 
     h1 { font-size: 22px !important; line-height: normal !important;} 
 
     h2 { font-size: 20px !important; line-height: normal !important;} 
 
     h3 { font-size: 18px !important; line-height: normal !important;} 
 
     .buttonstyles { 
 
     font-family:arial,helvetica,sans-serif !important; 
 
     font-size: 16px !important; 
 
     color: #FFFFFF !important; 
 
     padding: 10px !important; 
 
     } 
 
    /* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */ 
 
    } 
 
    
 
    @media only screen and (max-width: 640px) { 
 
    body[yahoo] .container { width:100% !important; } 
 
    body[yahoo] .mobile-hidden { display:none !important; } 
 
    body[yahoo] .logo { display:block !important; padding:0 !important; } 
 
    body[yahoo] .photo img { width:100% !important; height:auto !important;} 
 
    body[yahoo] .nav5, body[yahoo] .nav6 { display: none !important;} 
 
     .fluid, .fluid-centered { 
 
     width: 100% !important; 
 
     max-width: 100% !important; 
 
     height: auto !important; 
 
     margin-left: auto !important; 
 
     margin-right: auto !important; 
 
     } 
 
     .fluid-centered { 
 
     margin-left: auto !important; 
 
     margin-right: auto !important; 
 
     } 
 
    } 
 
</style><!--[if mso]>  <style type="text/css">   /* Begin Outlook Font Fix */   body, table, td {    font-family: Arial, Helvetica, sans-serif ;    font-size:16px;    color:#808080;    line-height:1;   }   /* End Outlook Font Fix */  </style>  <![endif]--></head><body bgcolor="#ffffff" text="#000000" style="background-color: #FFFFFF; color: #000000; margin: 0px; padding: 0px; -webkit-text-size-adjust:none;" yahoo="fix"><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td align="center" valign="top"><div style="margin:18px 0;"> 
 

 
<!-- END Table use to set width of email --></div> 
 
<!--End Navi Bar--> 
 
</td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner" style="padding-top: 10px;padding-right: 10px;padding-left: 10px;"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%; padding-right: 5px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tr><td> 
 
<img data-assetid="31498" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0dbebd2d-e383-4fb3-b7d2-775d5e3b437c.jpg" height="337" width="256" style="height:337px;width:256px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"></td></tr></table></td></tr></table></td> 
 
<td class="responsive-td" valign="top" style="width: 50%; padding-left: 5px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style> 
 
/* Gridblock with Title Sections Pattern CSS */ 
 
@media only screen and (max-width: 500px) { 
 
     table[class="pattern"] table { width: 100%; } 
 
     table[class="pattern"] .spacer { display: none; } 
 
     table[class="pattern"] .section-title, 
 
     table[class="pattern"] .section-row { 
 
      display: block; 
 
      height: auto; 
 
     } 
 
     table[class="pattern"] .section-title { 
 
      width: 100%; 
 
      padding: 20px 0; 
 
      margin-bottom: 8px; 
 
     } 
 
     table[class="pattern"] .section-row { width: 100%; } 
 
     table[class="pattern"] .section-row .section { 
 
      display: block; 
 
      float: left; 
 
      width: 32%; 
 
      height: auto; 
 
      margin-left: 2%; 
 
      padding: 60px 20px; 
 
      -moz-box-sizing: border-box; 
 
      -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
     } 
 
     table[class="pattern"] .section-row .section:first-child { margin-left: 0; } 
 
} 
 
    @media only screen and (max-width: 400px) { 
 
     table[class="pattern"] .grid-block { padding-bottom: 0 !important; } 
 
     table[class="pattern"] .section-row .section { 
 
      float: none; 
 
      width: 100%; 
 
      margin: 0 0 8px 0; 
 
     } 
 
    } 
 
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_eggo.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td> 
 
<td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_motts.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""> 
 
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_honey_nut_cheerios.jpg" alt="" width="128" height="168" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style> 
 
/* Gridblock with Title Sections Pattern CSS */ 
 
@media only screen and (max-width: 500px) { 
 
     table[class="pattern"] table { width: 100%; } 
 
     table[class="pattern"] .spacer { display: none; } 
 
     table[class="pattern"] .section-title, 
 
     table[class="pattern"] .section-row { 
 
      display: block; 
 
      height: auto; 
 
     } 
 
     table[class="pattern"] .section-title { 
 
      width: 100%; 
 
      padding: 20px 0; 
 
      margin-bottom: 8px; 
 
     } 
 
     table[class="pattern"] .section-row { width: 100%; } 
 
     table[class="pattern"] .section-row .section { 
 
      display: block; 
 
      float: left; 
 
      width: 32%; 
 
      height: auto; 
 
      margin-left: 2%; 
 
      padding: 60px 20px; 
 
      -moz-box-sizing: border-box; 
 
      -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
     } 
 
     table[class="pattern"] .section-row .section:first-child { margin-left: 0; } 
 
} 
 
    @media only screen and (max-width: 400px) { 
 
     table[class="pattern"] .grid-block { padding-bottom: 0 !important; } 
 
     table[class="pattern"] .section-row .section { 
 
      float: none; 
 
      width: 100%; 
 
      margin: 0 0 8px 0; 
 
     } 
 
    } 
 
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_progresso.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="128" height="168" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td> 
 
<td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_metamucil.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""> 
 
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_green_giant_beans.jpg" alt="" width="128" height="168" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style> 
 
/* Gridblock with Title Sections Pattern CSS */ 
 
@media only screen and (max-width: 400px) { 
 
     table[class="pattern"] table { width: 100%; } 
 
     table[class="pattern"] .spacer { display: none; } 
 
     table[class="pattern"] .section-title, 
 
     table[class="pattern"] .section-row { 
 
      display: block; 
 
      height: auto; 
 
     } 
 
     table[class="pattern"] .section-title { 
 
      width: 100%; 
 
      padding: 20px 0; 
 
      margin-bottom: 8px; 
 
     } 
 
     table[class="pattern"] .section-row { width: 100%; } 
 
     table[class="pattern"] .section-row .section { 
 
      display: block; 
 
      float: left; 
 
      width: 32%; 
 
      height: auto; 
 
      margin-left: 2%; 
 
      padding: 60px 20px; 
 
      -moz-box-sizing: border-box; 
 
      -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
     } 
 
     table[class="pattern"] .section-row .section:first-child { margin-left: 0; } 
 
} 
 
    @media only screen and (max-width: 400px) { 
 
     table[class="pattern"] .grid-block { padding-bottom: 0 !important; } 
 
     table[class="pattern"] .section-row .section { 
 
      float: none; 
 
      width: 100%; 
 
      margin: 0 0 8px 0; 
 
     } 
 
    } 
 
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Holderolay.jpg" alt="" width="120" height="120" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="120" height="120" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td> 
 
<td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Mission.jpg" alt="" width="120" height="120" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="120" height="120" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/ReddyWhip.jpg" alt="" width="120" height="120" border="0" class=""></a></td> 
 
<td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/images.jpg" alt="" width="120" height="120" border="0" class=""></a></td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""> 
 
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Kraft.jpg" alt="" width="120" height="120" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner" style="padding: 10px;"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%; padding-right: 3px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style> 
 
/* Gridblock with Title Sections Pattern CSS */ 
 
@media only screen and (max-width: 500px) { 
 
     table[class="pattern"] table { width: 100%; } 
 
     table[class="pattern"] .spacer { display: none; } 
 
     table[class="pattern"] .section-title, 
 
     table[class="pattern"] .section-row { 
 
      display: block; 
 
      height: auto; 
 
     } 
 
     table[class="pattern"] .section-title { 
 
      width: 100%; 
 
      padding: 20px 0; 
 
      margin-bottom: 8px; 
 
     } 
 
     table[class="pattern"] .section-row { width: 100%; } 
 
     table[class="pattern"] .section-row .section { 
 
      display: block; 
 
      float: left; 
 
      width: 32%; 
 
      height: auto; 
 
      margin-left: 2%; 
 
      padding: 60px 20px; 
 
      -moz-box-sizing: border-box; 
 
      -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
     } 
 
     table[class="pattern"] .section-row .section:first-child { margin-left: 0; } 
 
} 
 
    @media only screen and (max-width: 400px) { 
 
     table[class="pattern"] .grid-block { padding-bottom: 0 !important; } 
 
     table[class="pattern"] .section-row .section { 
 
      float: none; 
 
      width: 100%; 
 
      margin: 0 0 8px 0; 
 
     } 
 
    } 
 
</style><table cellpadding="0" cellspacing="0" class="pattern" width="100%"><tbody><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section-row" width="450"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;"> 
 
            2 
 
           </td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;"> 
 
            3 
 
           </td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section-row" width="450"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;"> 
 
            2 
 
           </td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;"> 
 
            3 
 
           </td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td><td class="responsive-td" valign="top" style="width: 50%; padding-left: 3px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td><img data-assetid="31510" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/89c228aa-d401-4f79-ba4b-1f76b230b360.jpg" height="395" width="300" style="height:395px;width:300px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody> 
 
</table></td></tr></tbody></table></td> 
 
</tr></table></td></tr></table></td></tr><tr><td valign="top"><center><table cellpadding="2" cellspacing="0" width="600" ID="Table5"><tr><td> </body></html>
モバイルデバイスに応答していない私はちょうどしかし、私はそれがモバイルデバイスに正しく応答して厳しい時間を過ごしてい今度のキャンペーンのための電子メールを設計しました。私がLitmusでそれをチェックすると、ブレークポイントを確認しないでください。私は以下のコードを添付しました：
出典
2017-05-09 Clay
コードはありません:( –
電子メールのデザインを評価できるオンラインサービスがあります.1つはLitmusと呼ばれ、月額79ドルです。あなたの仕事は見栄えの良いメールデザインが必要な場合は、購入することをお勧めします。 – amphetamachine
@amphetamachine私はリトマスを持っている、これは私だけがImはmobleへの応答コードに問題があるなどをチェックし、不良リンクブラウザについてお知らせします。 – Clay
3つのことは私にはみ出し：
は、第1：あなたはもうこのtable[class="pattern"]ようなクラスを定義するために括弧を必要としません。 table.patternはすべての電子メールクライアントで機能します。
第2号： はなぜほとんどすべてはbody[yahoo]が付いていますか？このターゲットはYahoo!他の場所でレンダリングされることはありません。このように接頭辞付きのメディアクエリコードがあると、iOS MailまたはGmail Appでレンダリングされません。
第3号： <body>でかなりの数の<style>タグブロックがあります。これらはすべての電子メールクライアントによってレンダリングされず、<head>に移動するのに最適です。
出典
2017-05-10 12:06:56
マイメールのデザインが

答えて

関連する問題
