9

HTML Eメールでフォントを同様のサイズに保つ方法はありますか?

ウェブサイトでは見栄えが良いのですが、私のメールではテキストが非常に小さく、まとまりがありません。

ライブデモ

メールに表示されているもののスクリーン ショットを含めます。ここに画像の説明を入力

これを修正する方法はありますか?

htmlコードは次のとおりです。

<html>
<head>
<title>The Most Holy Rosary</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#Table_01 tr td #box {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    line-height: 24px;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Holy Mary Email copy.psd) -->
<table width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_01.png" width="546" height="253" alt=""></td>
        <td width="297" rowspan="3" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_02.png" width="297" height="855" alt=""></td>
    </tr>
    <tr>
        <td width="11" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_03.png" width="11" height="565" alt=""></td>
        <td width="535" valign="top"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="15" id="box">
          <tr>
            <td valign="top"><p style="font-weight: bold; color: #666;">PRAISE BE JESUS CHRIST!</p>
            <p><br>
              Thank you for taking the time to read this email. We are developing some exciting media to help you and others fall even more in love with JESUS through the power of Mary, the Queen of Heaven (Revelations 12) and through Heaven's blessed gift to us... The Most Holy Rosary. </p>
            <p>We need your help if you can. We need you to answer some quick questions on the Rosary. Also once on the page can you &quot;like&quot; it on Facebook, Tweet it and finally forward this email to friends who may be interested. Awesome! Thank you so much.</p>
            <p align="center"><a href="http://www.EdVizenor.com/?p=questions"><img src="http://www.EdVizenor.com/rosary/email/images/HolyRosary.png" width="364" height="67"></a></p>
            <p>Be assured of my prayers for you and all your intentions in my Rosary.</p>
            <p>In The Merciful Heart Of Jesus Christ,<br>
            <span style="color: #666">Ed Vizenor </span></p></td>
          </tr>
      </table></td>
    </tr>
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_05.png" width="546" height="37" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
4

4 に答える 4

19

メールには常に インラインスタイルを設定してください。メールは外部スタイルをサポートしていません。このように書いてください:

<table style="font-size:16px" width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0"></table>
于 2013-01-23T08:08:12.783 に答える
2

動作したコードを投稿しています。表に「INLINE STYLES」をしましたがうまくいかなかったので、すべての段落に「INLINE STYLES」を入れました。

小さな問題が 1 つだけあります。それは、左側の画像、テキスト用の空白の横にある左側のバーで、gmail で 1 ピクセルずれているようなものです。そのバグを修正できません。

わかりましたここに動作するコードがあります

<html>
<head>
<title>Holy Mary Email copy</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Holy Mary Email copy.psd) -->
<table width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_01.png" width="546" height="253" alt=""></td>
        <td width="297" rowspan="3" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_02.png" width="297" height="855" alt=""></td>
    </tr>
    <tr>
        <td width="11" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_03.png" width="11" height="565" alt=""></td>
        <td width="535" valign="top"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" id="box">
          <tr>
            <td valign="top"><p style="font-family: Tahoma, Geneva, sans-serif; font-weight: bold; color: #666; font-size: 17px">PRAISE BE JESUS CHRIST!</p>
              <p><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">Thank you for taking the time to read this email. We are developing some exciting media to help you and others fall even more in love with JESUS through the power of Mary, the Queen of Heaven (Revelations 12) and through Heaven's blessed gift to us... The Most Holy Rosary. <br>
                <br>
                </span><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">We need your help if you can. We need you to answer some quick questions on the Rosary. Also once on the page can you &quot;like&quot; it on Facebook, Tweet it and finally forward this email to friends who may be interested? Awesome! Thank you so much.</span></p>
              <span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">
                <p align="center"><a href="http://www.EdVizenor.com/?p=questions"><img src="http://www.EdVizenor.com/rosary/email/images/HolyRosary.png" alt="" width="364" height="67"></a></p>
              </span>
              <p><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">Be assured of my prayers for you and all your intentions in my Rosary.</span></p>
              <p><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">In The Merciful Heart Of Jesus Christ,</span><br>
                <span style="color: #666">Ed Vizenor </span> </td>
          </tr>
        </table></td>
    </tr>
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_05.png" width="546" height="37" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
于 2013-01-23T20:02:10.940 に答える
2

電子メールの場合、すべてのフォント css をフォント タグ、スパン タグ、または<td>テキストを含む にインラインで配置します。

<font style="color:#770000;">This will always work</font>


<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="color:#770000;">
      So will this.  
    </td>
  </tr>
</table>
于 2013-01-23T19:28:45.610 に答える
1

そこの!Gmail の画像間のスペースに関するこの問題 (Hotmail でも発生します) を回避するには display=block、画像にインライン CSS スタイルを配置する必要があります。そのように:

img src="http://webserver.com/image.jpeg" alt="" style="display:block;"
于 2013-01-24T13:37:50.820 に答える