メールコンテンツの最大幅

サポート
1

Currently emails when users text or mention other users will receive emails.
Email content will display 100% of the email window.

So how to set the maximum width of emails! example 650px?

image
image1314×610 63.2 KB

I tried this but it didn’t work!

image
image841×313 12.1 KB

「いいね！」 2
3

メールテンプレートを作成し、%{email_content} タグを max-width を CSS で設定したテーブルで囲むことで、メールの最大幅を設定できます。Outlook で表示されるメールの幅を制限したい場合は、<!--[if mso]> タグで囲まれた固定幅のテーブルを追加する必要があります。

以下は、コンテンツの最大幅を 600px に制限する基本的なメールテンプレートです。このテンプレートを使用する場合は、ロゴ画像の URL を自サイトのロゴの URL に置き換えてください。また、href 属性の値も自サイトの URL に置き換えてください。ロゴ画像の alt 属性には、自サイトにふさわしい説明文を設定してください。

:warning: テンプレートにはサイトロゴが含まれているため、apply custom styles to digest サイト設定を無効にしていることを確認してください。これを設定しないと、サイトから送信される要約メールの上部にロゴが2つ表示されてしまいます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
    body, table, td, th, h1, h2, h3 {
        font-family: Helvetica, Arial, sans-serif !important;
    }
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="padding: 10px 0 30px 0;">
            <!--[if gte mso 9]>
            <table width="600" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td><![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
                   style="max-width: 600px;border-collapse: collapse;">
                <tr>
                    <td style="padding: 20px 15px 20px 15px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td align="center">
                                    <a href="https://forum.example.com">
                                        <img src="https://your-site-logo-url"
                                             alt="Your site name" width="150" height="40"
                                             style="display: block;"/>
                                    </a>
                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 0 15px 0 15px;">
                        <hr style="background-color: #ddd; height: 1px; border: 1px;">
                    </td>
                </tr>
                <tr>
                    <td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
                        %{email_content}
                    </td>
                </tr>
            </table>
            <!--[if gte mso 9]></td></tr></table><![endif]-->
        </td>
    </tr>
</table>

このテンプレートを、主要なメールクライアントが利用可能なメールテストサービスでテストしました。

iPad (Retina) (iOS 13.1):

image
image780×1062 239 KB

Gmail アプリ (Android 6.0):

image
image366×695 99.1 KB

iPhone 6 Plus:

image
image424×1047 171 KB

Outlook.com:

image
image939×844 291 KB

「いいね！」 7
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.