主要メーラーのバグを回避するHTMLメール用テンプレート -Email-Boilerplate

Post on:2011年8月10日

Email-Boilerplateとは

Email-BoilerplateはHTMLメールを作成する上で、主要となるスタイルをはじめ、各メールアプリケーションのバグを避けるためのものです。
テンプレートは大きく分けて、head箇所とbody箇所があります。head内にはグローバルなスタイルが定義されており、body内にはHTMLのデザインに必要とさせる要素と特定の修正箇所が含まれています。
これらは、そのまま利用してもよし、あなた自身で必要なものを加えたり、削除して使用してください。そして、HTMLメールを作成したら最後に必ずテストすることを忘れないようにしてください。

Email-Boilerplate Lite版

解説のコメントがない、Lite版（2011年6月7日）です。
サイトではLite版だけでなく、通常版もダウンロードできます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Your Message Subject or Title</title>
    <style type="text/css">
     
        /* Client-specific Styles */
        #outlook a { padding: 0; } /* Force Outlook to provide a "view in browser" button. */
        body { width: 100% !important; } .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; } /* Force Hotmail to display emails at full width */
        body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
 
        /* Reset Styles */
        body { margin: 0; padding: 0; }
        img { height: auto; line-height: 100%; outline: none; text-decoration: none; }
        #backgroundTable { height: 100% !important; margin: 0; padding: 0; width: 100% !important; }
     
       p {
           margin: 1em 0;
       }
        
       h1, h2, h3, h4, h5, h6 {
           color: black !important;
           line-height: 100% !important;
       }
        
       h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
           color: blue !important;
       }
        
       h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
           color: red !important; /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
       }
        
       h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
           color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
       }
        
       table td {
           border-collapse: collapse;
       }
 
       .yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important; } /* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */
        
        
       </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
    <tr>
    <td>
     
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td width="200"></td>
            <td width="200"></td>
            <td width="200"></td>
        </tr>
    </table>  
    <!-- End example table -->
     
    <a href="http://www.responsys.com/blogs/nsm/2010/07/feeling-blue-over-yahoo-email.html" style="color:red; text-decoration: none;" target ="_blank" title="Feeling Blue Over Yahoo"><span style="color: red;">Here is the fix for Yahoo from Responsys/Smith Harmon</span></a>
     
    <img src="full path to image" alt="Your alt text" title="Your title text" width="x" height="x" style="display: block;" />
     
    </td>
    </tr>
    </table>  
    <!-- End of wrapper table -->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Your Message Subject or Title</title>

/* Client-specific Styles */

#outlook a { padding: 0; } /* Force Outlook to provide a "view in browser" button. */

body { width: 100% !important; } .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; } /* Force Hotmail to display emails at full width */

body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */

/* Reset Styles */

body { margin: 0; padding: 0; }

img { height: auto; line-height: 100%; outline: none; text-decoration: none; }

#backgroundTable { height: 100% !important; margin: 0; padding: 0; width: 100% !important; }

p {

margin: 1em 0;

}

h1, h2, h3, h4, h5, h6 {

color: black !important;

line-height: 100% !important;

}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {

color: blue !important;

}

h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {

color: red !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */

}

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {

color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */

}

table td {

border-collapse: collapse;

}

.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important; } /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */

</style>

</head>

<body>

<tr>

<td>

<tr>

</tr>

</table>

<a href="http://www.responsys.com/blogs/nsm/2010/07/feeling-blue-over-yahoo-email.html" style="color:red; text-decoration: none;" target ="_blank" title="Feeling Blue Over Yahoo"><span style="color: red;">Here is the fix for Yahoo from Responsys/Smith Harmon</span></a>