HTMLメールの不具合解決方法

画像が表示されない、アップロードできない

原因はいくつかあります。

・画像サーバにアップロードした画像が多い
画像サーバをフォルダ分けを行い、1フォルダあたりの画像数を減らしてください。
画像サーバのポップアップ上でフォルダを右クリックするとフォルダの作成が可能です。
※（2023/4現在）新デザインでは対応していないため旧デザインでお試しください。
※すでにサーバにアップロードした画像を、新しく作成したフォルダに移動することは仕様上できませんので、あらかじめご了承願います。

・画像名がおかしい
画像名は基本的に半角の英数字のみで保存いただくようにお願いいたします。
画像名に半角スペースが含まれていたり、
カッコ()を利用しているとスマホでの表示が安定しない場合があります。

また、アンダーバー2個__は、メール配信エンジンの置き換え文字のため、
画像ファイル名にご使用いただかないようお願いいたします。

・セッションが切れている
お手数ですが、再起動や再ログインをした後、ご確認ください。

・アカウント移管前の画像URLになっている
画像URLが現在お使いのアカウントではなく、移管前のアカウントになっている場合、
画像が表示されないことがあります。
画像のプロパティを開き、下図に示す黄色の箇所をご確認ください。

※改善するためには、改めて画像サーバから該当の画像を選択ください。

画像サーバを開こうとすると「401エラー」が表示される

セッションが切れている可能性があります。
一度、うちでのこづちをログアウトしていただき、再度ログインしていただくと解消することがありますので、お確かめください。

メール本文が一部文字化けしている

文字化け箇所を含む文章が100文字を超えて長い場合、文字化けが起きることがあります。
適切な場所で改行してください。

作成したメールが空白になって何も表示されない

メール本文中に、機種依存文字（環境依存文字）を使用していると、このような事象が発生することがあります。

機種依存文字の例
①円マーク　
②絵文字　
③ゼロ幅スペース

※③の「ゼロ幅スペース」はメール作成画面上では確認できませんが、テキストエディタなどで表示すると<0x200b>のような表記で確認できます。

うちでのこづちのメールでは機種依存文字に対応していない(※)ため、該当箇所を削除していただければ改善されます。
(※機種依存文字が正しく表示される場合もありますが、受信時の表示まで保証できないため推奨しておりません。)
※参考記事：使用不可な文字リスト

メール本文すべてが文字化けしている

外部のメール作成ツールやWordなどを使っていた場合に、文字コードが指定されてしまい、うちでのこづちがメール配信時に利用する文字コード（UTF-8）と一致しないことがあります。
一度メモ帳などに張り付けたのちに、うちでのこづちのメール本文に張り付けると改善されることがあります。

もしくは、HTMLソース上で文字コード指定などをはじめとした不要な要素やスタイルを削除すると改善されることがあります。

画像や文章が左(右)揃えになってしまう

方法① 中央揃えのボタンを使用する
詳細はこちらから

方法② 中央揃えのコードを入力する
メール編集画面の「ソース」を押下し
1番上に
<div style=”text-align: center;”>
1番下に
</div>
を入れてください。

方法③ 画像サイズや幅を推奨サイズに変更する
詳しくはこちらから

Outlookで受信メールを確認するとデザインが崩れる

Outlookで受信した際には、スタイル指定したデザインがほとんど機能しませんのでご注意ください。

・背景色
・画像サイズ
・文字サイズ
・レイアウト
など

テンプレートビルダーではOutlookに対応したメールは作成できません。
テンプレートビルダーはdivタグで作成するため、Outlookではほとんど認識されません。
そのため、外部のエディターで作成するかメール配信画面でHTMLメールを作成ください。

▽OutlookでHTMLメールが崩れないための対策

・すべてTable（table/テーブル）構造にする
HTMLメールの基本はTableレイアウトでお願いします。

・各種デザインを決めるスタイルはインライン形式で入力
インライン形式のイメージ：<td style=”color: #333;”></td>

・セミレスポンシブを使う
通常のレスポンシブは効きません。
そのため、max-widthを使ってレスポンシブのように見せる方法でデバイス幅に合わせます。

・outlookにしか効かないコードを活用する
[if mso][endif]で囲む。”mso”がoutlookに対応します。
msoで囲ってwidthを指定し、その後max-witdhを指定します。
Outlook以外のメーラーだとmax-widthだけが反応し、セミレスポンシブになります。
例）

<table><tr><td max-width="580">
<p>テキストテキストテキスト</p>
</td></tr></table>


外部ツールで作成したHTMLが全体的に崩れる

うちでのこづちのHTMLメールはボディタグ<body>~</body>直下のソースが反映されます。
そのため、ヘッドタグ<head> ～ </head>は認識されませんので、CSSのスタイル指定はインライン方式で入力してください。

メールの文字が小さくなる（小さい）/画像が大きい

画像のサイズ指定をしていない場合、受信メーラーによっては相対的に文字が小さくなることもあります。
スマートフォンのメール内容にある画像だけ幅100%指定すると改善されることがあります。
①「スマートフォン」のタブを開く
②画像を右クリックして「画像のプロパティ」を選択
③幅：100%
④高さ：（未指定）
⑤OKをクリック
PC向けの場合、幅100%にしてしまうと画面幅いっぱいに拡大されるため、600~800pxをお勧めします。

上記の対応後も文字サイズが変わらない場合、メール作成画面上で直接文字列を選択し、デフォルト12ptのフォントサイズを変更ください。

フォントサイズ（文字サイズ）が変更されない

メール作成画面上でフォントサイズを変更したとき、サイズ指定の形式が「pt（ポイント）」のため、
一部メーラーやデバイスによっては、表示にブレが生じる場合があります。

ソースコード上で、フォントサイズを「pt(ポイント)　→　px(ピクセル)」に
指定していただくことで上記のような事象を解消することが可能です。
※参考までに、
テンプレートビルダーで作成した場合は、フォントサイズが「px（ピクセル）」となっています。

テストメールでHTMLソースがそのまま受信される

HTMLメールが受信できないデバイスやドメインにテストメールをした際にソースのまま送信されることがあります。
テストメールでは、マルチパート（テキスト）の配信は行えません。

テストメールだけが文字化けする（HTMLソースのまま表示される）

テストメールで___Name___などのパラメータが変換されない

テスト配信に使用したメールアドレスが、うちでのこづちの顧客として存在するメールアドレスである必要があります。
存在しないメールアドレスでテストすると、パラメータは全て変換されずテスト配信されます。

メール解除URLをクリックすると「不正なURLです。」と表示される

・メール解除URL（例）
http://c.crm-em.com/crm/【アカウントID】/ua/___Id___/___media_id___

メール解除URLは本配信かつ、うちでのこづちに存在する顧客でないと機能しません。
下記メール解除URL中の「___id___（こづち顧客ID）」や「___media_id___（メール配信ID）」が実際の値に変換されている必要があります。
間違って登録されることを防ぐため、このような仕様となっております。

一度アップロードした画像と同じ名称で画像をアップロードしたが、画像が差し代わっていない

同じ名称で画像をアップロードすることは控えていただきますようお願いいたします。

同じ名称で画像を置き換えた場合、サーバに送信されたCookieを元に、セッションの画像データを参照する場合があります。
表示したい画像と異なる画像が表示される恐れがありますので、異なる名称で画像はアップロードいただくようお願いいたします。

画像が横向きでアップロード、添付されてしまう

元画像の向きが標準になっていない可能性があります。
確認方法は、下記外部サイトURLよりご確認ください。
※参考外部サイトページ：https://qiita.com/sho1_24/items/41499b6a0e44d814f3b7

受信メールの内容が作成したメール内容と異なる

Gmailの自動翻訳機能により、文面が自動で変換されている可能性があります。
※外部参考ページ：受信メールの一部分がおかしな文章になっている

「本文: 1行の最大文字数は900文字です」というエラーが表示されている

HTMLメールは1行あたりの文字数が長すぎると、一部のメールサーバーやメーラーで強制的に改行されることがあります。
その結果、レイアウト崩れやリンク切れが起きる可能性があるため、900文字以内で改行する仕様となっています。

900文字エラーが生じた場合は、タグの区切りや属性の終わりで改行するのが安全です。
修正後はテスト配信を実施し、表示に崩れがないかを確認の上、本番配信を実施していただくようお願いいたします。

メール本文に1行900文字を越えている箇所がない

HTMLコード上で900文字を越えている箇所がないかご確認ください。
「リッチテキスト入力」を選択してメールを作成している場合は、HTMLコードへ切り替えてご確認ください。

＞ HTMLコードへの切り替え方法
・新デザインの場合
メニューバーの「<>（ソースコードボタン）」をクリックする → 作成したメール本文がHTMLコードに切り替わる → 1行が900文字を越えている箇所があれば、適切な箇所で改行する