Gmail、Outlook、Yahooのメールに画像が正しく表示されない

Question

私はテンプレートデザインをメールするのが初めてで、私のメールテンプレートにこれがどうして起こっているのか不思議です。最初のスクリーンショットは私が期待しているもので、他のスクリーンショットはそれぞれgmail、yahoo、outlookでレンダリングされています。私の懸念は、なぜロゴが期待どおりに右に揃っていないかということです。また、ロゴを表示する対応するコードを添付しました。

<tr> 
 
\t <td align="center" valign="top"> 
 
\t <!-- CENTERING TABLE // --> 
 
\t <!-- 
 
\t The centering table keeps the content 
 
\t tables centered in the emailBody table, 
 
\t in case its width is set to 100%. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#ffffff;" bgcolor="#E1E1E1"> 
 
\t <tr> 
 
\t <td align="center" valign="top"> 
 
\t <!-- FLEXIBLE CONTAINER // --> 
 
\t <!-- 
 
\t The flexible container has a set width 
 
\t that gets overridden by the media query. 
 
\t Most content tables within can then be 
 
\t given 100% widths. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer"> 
 
\t <tr> 
 
\t <td align="center" valign="top" width="600" class="flexibleContainerCell"> 
 

 
\t <!-- CONTENT TABLE // --> 
 
\t <!-- 
 
\t The content table is the first element 
 
\t that's entirely separate from the structural 
 
\t framework of the email. 
 
\t --> 
 
\t <table border="0" cellpadding="30" cellspacing="0" width="100%"> 
 
\t <tr> 
 
\t <td align="center" valign="top" class="textContent"> 
 
\t <img align="right" alt="accesbank-logo" src="http://oi65.tinypic.com/euel9v.jpg" /><br /><br /> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CONTENT TABLE --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // FLEXIBLE CONTAINER --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CENTERING TABLE --> 
 
\t </td> 
 
</tr>

Answer 1

あなたはロゴが右に整列されることになっているテーブルにあるように、右揃えする必要がTDの上で整列センターがたくさんあります。

余分なテーブルを追加して、ロゴと同じサイズにして、それを正しく整列させました。

\t <tr> 
 
\t <td align="right" valign="top"> 
 
\t <!-- CENTERING TABLE // --> 
 
\t <!-- 
 
\t The centering table keeps the content 
 
\t tables centered in the emailBody table, 
 
\t in case its width is set to 100%. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#ffffff;" bgcolor="#E1E1E1"> 
 
\t <tr> 
 
\t <td align="right" valign="top"> 
 
\t <!-- FLEXIBLE CONTAINER // --> 
 
\t <!-- 
 
\t The flexible container has a set width 
 
\t that gets overridden by the media query. 
 
\t Most content tables within can then be 
 
\t given 100% widths. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer"> 
 
\t <tr> 
 
\t <td align="right" valign="top" width="600" class="flexibleContainerCell"> 
 

 
\t <!-- CONTENT TABLE // --> 
 
\t <!-- 
 
\t The content table is the first element 
 
\t that's entirely separate from the structural 
 
\t framework of the email. 
 
\t --> 
 
\t <table border="0" cellpadding="30" cellspacing="0" width="100%"> 
 
\t <tr> 
 
\t <td align="right" valign="top" class="textContent"> 
 

 
\t <table width="152" border="0" align="right" cellpadding="0" cellspacing="0" style="width:100%; max-width: 152px;"> 
 
\t <tbody> 
 
\t <tr> 
 
\t <td align="right"><img alt="accesbank-logo" src="http://oi65.tinypic.com/euel9v.jpg" /></td> 
 
\t </tr> 
 
\t </tbody> 
 
\t </table> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CONTENT TABLE --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // FLEXIBLE CONTAINER --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CENTERING TABLE --> 
 
\t </td> 
 
\t </tr>

これはそれを修正するなら、私に教えてください。これで問題が解決されない場合は、テンプレートよりもテンプレートが重複してしまう原因となる競合するクラスまたはIDがあるかどうかを確認するコードがさらに必要になります。

この部分はハイブリッドであるか応答性の高いメールですか？

乾杯