1
私は現在、主要な電子メールプロバイダと互換性のある電子メールテンプレートを作成しています。さまざまなメールプロバイダの画像の上にダイナミックテキストを配置するにはどうすればよいですか？ （Responsive Email）
クライアントによれば、画像の上に敬礼の段落またはヘッダーを作成するはずだから、ブラウザでうまく動作しているが、電子メール（Outlook、hotmail、gmail、yahooでテスト済み）ではなく、これらのどれも不動産の位置を読んでいない：絶対（私は確信していないと思う）。
テンプレートも応答性があります。したがって、画面のサイズを変更すると、画面の幅に関するテキストが調整されます。 電子メールに複数の問題があるため、イメージの周りに境界線を作成するために2つのテーブルを作成し、内部に2つ目のテーブルを作成してイメージ自体を表示する必要がありました。
テキストは、ピンク色の道路標識の内側にある必要があります。それは、Hi Margaretです。これは、動的になります。ここで
は私のコードです：あなたはあなたのCSSクラスの内部で持っているかどう
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="UTF-8">
<style type="text/css">
body {
background: #dff1f6 !important;
font-family: Arial, sans-serif;
}
.preheader {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
color: transparent !important;
height: 0 !important;
width: 0 !important;
}
@media (max-width: 376px) {
.anglianlogo {
max-width: 250px !important;
}
.anglianwellcome {
font-size: 11px !important;
}
.awvideopreview {
height: 150px;
}
.mobileresize {
width: 90% !important;
font-size: 9px;
}
}
</style>
<div style="background: #dff1f6;">
<!--Container-->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="600">
<!--Main Table-->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; width: 100%; margin: 0 auto; background: white;">
<tr>
<td>
<!--Video-->
<table width="600" cellspacing="0" cellpadding="0" border="0" style="padding-bottom: 30px; padding-left:10%; padding-right:10%; width:100%;">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="center" style="text-align:center; margin: 0 auto;">
<tr>
<td style="padding: 0; border: 10px solid #72b8d1;">
<a style="margin: 0 auto; display: block;">
<!--href="{{ CustomerData.vidUrl }}"-->
<img class="awvideopreview" src="https://preview.ibb.co/gKOzsv/Videopreview.gif" width="450" border="0" align="center" style="width:100%;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--End Table-->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
<!--End Container-->
</div>
</body>
</html>
こんにちは、私はいくつかのコードをコピーしてここに置くことができましたので、今更新されました。助けてくれてありがとう –