WordPress などから発送されるメールのレイアウトがジメールなどほとんどのメールでは好きなように表示されますが Naver メールで送信すると、レイアウトが正しく表示されない場合があります。これは Naver これは、Webメールがセキュリティと互換性の問題によって特定のCSSまたはタグを制限するために発生する問題です。この記事では Naver メールで電子メールの書式が崩れる理由と、それを解決する方法について説明します。
Naver メールで送信したメールのレイアウトが壊れた場合
WordPressでパスワードリセットページのレイアウトをカスタマイズしたい場合 Frontend Reset Passwordというプラグインを使用することができます。
このプラグインでは、ユーザーがパスワードリセット要求を行ったときにユーザーに送信される電子メールテンプレートをHTMLで編集できます。 HTMLコードを使用してユーザーに送信される電子メールフォーマットを設定した場合、Gmailは希望のレイアウトで表示されます。
しかし Naver メールではメールコンテンツが正しく表示されません。
Naver メールでHTMLが壊れる理由
- スタイルタグの削除
Naver メールでは<style>タグまたは<link>経由で読み込んだCSSをほとんど削除または無視します。したがって、<style>タグ内で定義したフォント（フォント）、色、レイアウトに関する規則は適用されません。 - インラインスタイル中心に動作
Naver メールはセキュリティ上の理由でいくつかのCSS属性を制限すると言われています。しかし、インラインスタイル（タグ内style="..."形で入力された属性）は相対的に収容するほうだそうです。 - テーブルレイアウトを推奨
一部の電子メールクライアント（特にウェブメール）<div>ベースのレイアウトより<table>ベースレイアウトを安定してレンダリングする傾向があるそうです。 Naver メールも<div>より<table>使用すると、スタイルが壊れる可能性がはるかに少ないようです。
Naver メールの互換性を高めるのに役立つヒント
以下のHTMLコードのようにに直接スタイルを与えるタグを中心にレイアウトを構成する場合 Naver メールで外部スタイルが無視され、背景色や余白、罫線などが割れる現象が発生する可能性が高い。
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>비밀번호 재설정</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 40px; background-color: #f4f4f4; line-height: 1.6;">
<div style="background-color: #ffffff; padding: 20px; border-radius: 5px;">
<h1 style="color: #333;">안녕하세요!</h1>
<p>이메일 본문 내용입니다.</p>
</div>
</body>
</html>下のように背景色、余白などが正常に表示されるようにすべてのスタイルをインラインにしてタグでレイアウトを設定すると、 Naver メールでレイアウトが壊れない可能性が高いです。
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>비밀번호 재설정</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; color: #333333; background-color: #f4f4f4; line-height: 1.6;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4" style="border-collapse: collapse;">
<tr>
<td align="center" style="padding: 40px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="border-collapse: collapse; border-radius: 5px;">
<tr>
<td style="padding: 20px; font-family: Arial, sans-serif; color: #333333; line-height: 1.6;">
<h1 style="margin: 0 0 10px 0; color: #333333;">안녕하세요!</h1>
<p style="margin: 0 0 10px 0;">이메일 본문 내용입니다.</p>
<p style="margin: 0;">감사합니다!</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>実際、上記の2つのHTMLコードでテストしてみると、下のコードを使用してもレイアウトが壊れません。
次のような慣行が役に立ちます。
- すべてのスタイルをインラインで処理する
body 余白、フォント、色などはすべて style プロパティ内に直接インラインで入力します。 - テーブルタグで完全なレイアウトを構成する
外部レイアウトだけでなく、ボタン、画像配置にもできるだけタグを活用することで互換性を高めるのに役立ちます。 - CSS3属性を使用する際の注意
border-radius、box-shadowなどは大体 Naver メールでもサポートされていますが、一部の古いメールクライアントでは壊れる可能性があります。 - シンプルなコードを維持
過度に複雑なレイアウトや入れ子になったスタイルは、予期せぬ割れ現象を引き起こす可能性がありますので、必ず必要な要素を中心にデザインしてください。
WooCommerceで電子メールテンプレートを作成するときに上記を参照してください。 Naver メールでも電子メールの書式が壊れる可能性を減らすことができます。
コメントを残す