HTML ページの本文内に、以下のコードを貼り付けます。 コードを見るだけで、このメールの構造には大したことがないことがわかります。 電子メールは複雑であってはいけないので、これは実際には非常に良いことです。 これまでのところ、表の合計幅を指定するスタイルのみが極少量あり、表のセル間には何もありません。
非常に注意していただきたいことがあります。a: サイズが小さく、b: 画像を適切に説明する alt タグが付いている限り、画像は電子メールに最適です。 ご存知かと思いますが、メール内に画像を表示するには、このメールの受信者が画像の表示を許可する必要があります。 そうしないと、何を期待すべきかを伝えることはできません。 視覚障害のあるユーザー向けの説明を提供しないと、アクセシビリティの問題にもなります。 ただし、それはまた別の話です。 したがって、教訓は次のとおりです。常に alt タグが付いた小さな画像を使用してください。
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>
インラインスタイル
最後に、この HTML 電子メール テンプレートにインライン CSS スタイルを提供します。 これまでのところ、このメールの見た目はまったく美しくありません。 あまりにも複雑にならないように、この部分を小さな部分に分けて説明します。
<tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>
<tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>
<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
この記事はハンナ・バトラーによって書かれています。 彼女は Web 開発者およびデザイナーとして働いています。 さらに、彼女は自分の経験を記事の形で共有することが好きです。 この場合、彼女は WriteMyPaper4Me.co Web サイトに独自のセクションを持っています。 将来、彼女は自分の仕事のやり方を他の人に説明するためにブログを書き始める予定です。
