1

HTMLニュースレターのメイン画像があります。メイン画像の上に特定の位置に5つの画像(画像ボタン)を配置しようとしています。それらを絶対に配置すると、Webブラウザーで表示するときにうまくレンダリングされますが、htmlページを電子メール(outlook)に埋め込むとすぐに、画像が横にスローされます。

HTMLニュースレターに関してこれを達成するための最良の方法は何ですか.

アドバイスをいただければ幸いです。

4

2 に答える 2

1

@ user1475479 VMLを使用して背景画像を作成し、以下の例のような標準のテーブル レイアウトを使用して画像ボタンを一番上に配置できます。

もう 1 つのオプションは、1 つの大きな画像を使用してイメージ マップを使用することですが、多くの購読者が画像をオンにしないため、これは電子メールでは不適切な方法です。この場合、電子メールは空白になり、ボタンが表示されません。

最善かつ最も一般的な解決策は、大きな画像を小さな画像に分割し、テーブルに配置することです。そうすれば、画像ごとに alt タグを割り当てることができるので、サブスクライバーが画像を読み込まなくても、その構造は維持され、人々は何をどこでクリックすればよいかがわかります。注 - display:block; を追加することは非常に重要です。テーブルセルに一人でいるときはいつでも画像に。

@lukeocom - あなたの例にはいくつかの問題があります。応答を編集する代わりに、以下に再構築しました。あなたの画像はすべて持っている必要がありstyle="display:block;"、おそらく幅と高さをピクセル単位で設定する方が良いでしょう. また、すべての色を 6 桁の 16 進数コードとして宣言する必要があり、html 宣言では px を含める必要はありません (css で必要なだけです)。

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#959595">
<tr>
    <td colspan="3" width="600" bgcolor="#757575">
        <a href=""><img src="yourHeader.png" alt="Header" style="margin: 0; border: 0; padding: 0; display: block;" height="100"  width="600"></a>
    </td>
</tr>
<tr>
    <td width="50" style="vertical-align: top;background-color:#555555;">
        <a href=""><img src="sideBars.png" style="margin: 0; border: 0; padding: 0; display: block;" alt="" height="200" width="50"></a>
    </td>
    <td width="500" valign="top" style="padding:20px;">
      <font style="font-family: Century Gothic, Avant Garde, sans-serif; font-size: 14px; color: #000000;">
        PUT YOUR CONTENT HERE
      </font>
    </td>
    <td width="50" style="vertical-align: top;background-color:#555555;">
        <a href=""><img src="sideBars.png" style="margin: 0; border: 0; padding: 0; display: block;" alt="" height="200" width="50"></a>
    </td>
</tr>
<tr>
    <td colspan="3">
        <a href=""><img src="yourFooter.png" alt="Footer" style="margin: 0; border: 0; padding: 0; display: block;" height="100" width="600"></a>
    </td>
</tr>

全体を中央に配置する場合は、次のようにラップします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">           
    /* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding:30px;">

PUT THE ABOVE TABLE IN HERE

</td></tr></table></td></tr></table></body></html>

私は xhtml の代わりに html strict を使用していますが、自己終了 img タグを除いて同じように機能します。

于 2013-02-22T14:24:09.190 に答える
0

先週、1通のメールに費やしたばかりです。HTMLメールの最善のアプローチは、テーブルレイアウトを使用することです。メールでは機能しないタグがたくさんあります。また、電子メールクライアントごとにレンダリングが異なるものはたくさんあります。Outlookは私の最も嫌いです！

使用している画像にリンクがない場合は、photoshopを使用してヘッダーとフッターのバナーを作成し、テーブルレイアウトを使用してそれらを表示します。IDまたはクラス名がサポートされていない場合があるため、インラインスタイルも使用してください。安全である方が良いです...

行ごとのテーブルレイアウトの例は次のようになります。

|header image|
|side bar image(optional) | content (can use another table here) | side bar image|(optional)
|footer image|

ここに臨時雇用者がいます。

<table style="font-size:10pt;background-color: #fff; width:600px;max-width:600px;overflow:hidden; margin: 0px auto; padding: 0px;border-collapse:collapse;border:0;">
    <tr>
        <td colspan="3" width="600px">
            <img src="yourHeader.png" alt="" style="vertical-align:bottom;" height="100%"
            width="100%" />
        </td>
    </tr>
    <tr>
        <td width="50px" style="vertical-align: top;background-color:#fff;">
            <img src="sideBars.png" alt="" height="100%" width="100%" />
        </td>
        <td width="500px" style="background-color:#fff;padding-left:20px;padding-right:20px;">PUT YOUR CONTENT HERE</td>
        <td width="50px" style="vertical-align: top;background-color:#333399;">
            <img src="sideBars.png" alt="right image" height="100%" width="100%" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="yourFooter.png" alt="Bottom banner image" style="vertical-align:top;"
            height="100%" width="100%" />
        </td>
    </tr>
</table>

さらに読む...

OutlookのCSSとタグのサポート-http ://msdn.microsoft.com/en-us/library/aa338201.aspx

一般的なHTMLメールのヒント-http ://www.verticalresponse.com/sites/www.verticalresponse.com/files/html_tips_for_email_guide.pdf

お役に立てれば..

于 2013-02-22T01:08:47.853 に答える