​

Android の Gmail アプリでのレンダリングの問題

​

Auto-fit Email Messages 設定

1. Gmail アプリに移動します。
2. 左上のメニューアイコンをタップします。
3. General Settings をタップし、Auto-fit Email Messages オプションのチェックを外します。

​

Gmail でのメールのクリッピング

1. メールテンプレートのサイズが大きい。テンプレートのサイズは 90KB 以内に抑えることをお勧めします。
2. メールに次の文字が含まれている場合、Gmail は実際にはメッセージをクリッピングしていなくても「Message has been clipped」というテキストを表示することがあります。
   • 著作権記号 ©、登録商標記号 ®、商標記号 ™ などの非 ASCII 文字
   • 空白用に追加されたもの（nbsp）など、一部の HTML エンティティはクリッピングの問題を引き起こす可能性があります。HTML エンティティは &<entity_code>, の形式であり、以下に示すものはメールのクリッピングを引き起こす可能性があります。
     •   - ノーブレークスペース（一部のケース）
     • © - ©著作権
     • ® - ®登録商標
     • ¥ - ¥ 円
     • £ - £ ポンド
     • ¢ - ¢ セント
   • クリッピングが発生しないように、HTML テンプレートのコードを調べて、上記のエンティティを削除することをお勧めします。たとえば、テンプレートの末尾や先頭に   が付いている場合や、テンプレート内で Hello User のように空白を追加するためにコンテンツ（またはタグ）の間で   が使用されている場合は、それを削除してください。Hello User を Hello User に置き換えて、メールを再送信してください。
3. テストメールでクリッピングが見られる場合は、件名が同じであることが原因である可能性があります。Gmail は、同じ件名のメールを受信トレイ内で1つのメールにまとめる（「スレッド化」する）ことがよくあります。同じキャンペーンのテストメールを何通も送信すると、メッセージが大きくなりすぎて Gmail がクリッピングする場合があります。テスト目的の場合は、件名を変更するか、受信トレイ内の以前のテストメールを削除してから、テストメールを再送信してください。

​

メールのプレビューが空白になる

​

JINJA を使用した HTML テーブルが機能しない

<table>
<% for item in items %>
<tr><td>{{item.name}}</td></tr>
<% endfor %>
</table>

<tr style="display:none;">{% JINJA CODE %}</td></tr>

<table>
<tr style="display:none;"><td><% for item in items %></td></tr>
<tr><td>{{item.name}}</td></tr>
<tr style="display:none;"><td><% endfor %></td></tr>
</table>

​

MoEngage はメールでのダークモード / prefers-color-scheme スタイリングをサポートしていますか？

• ライトモードでは、白いストロークは白い背景に溶け込んで見えなくなります。
• ダークモード（Gmail の自動反転）では、背景が黒になり、白いストロークによってロゴが見える状態に保たれます。

<style>
  /* Standard dark mode support for Apple Mail, Outlook Mac, etc. */
  @media (prefers-color-scheme: dark) {
    .light-logo { display: none !important; }
    .dark-logo { display: block !important; }
  }
</style>

<div>
  <img src="https://your-domain.com/business-black.png" class="light-logo" alt="business" style="display: block; width: 120px; height: auto;">

  <div class="dark-logo" style="display: none; mso-hide: all;">
    <div style="background: #000000; mix-blend-mode: screen;">
      <div style="background: #000000; mix-blend-mode: difference;">
        <img src="https://your-domain.com/business-white.png" alt="business" style="display: block; width: 120px; height: auto; color: #ffffff;">
      </div>
    </div>
  </div>
</div>