WelcartのHTMLメール作成方法と使用可能なタグ・属性一覧

Welcart2.3でHTMLメールオプションが追加されました。
今までのテキストメールと何が違うのか、どう作るのかをまとめましたので、最後まで読んでいただけると嬉しいです。

HTMLメールでできること

今までのテキストメールと違う点は、Webサイトのように画像を挿入できたり、URLからページ遷移できる点です。
また、タグの中にコードを書くことで、文字色の変更や背景色の変更ができデザインの幅が広がるので、メールを開いたユーザーを引きつけやすいのが、テキストメールとの大きな違いです。

WelcartでHTMLメールを使用する方法

WelcartでHTMLメールを使えるようにするには、まず管理画面にログインし左ナビゲーションの中の「Welcart Shop」をクリックします。
「Welcart Shop」の下に「メール設定」という項目が表示されますので、さらにクリックしてください。
画面に「メールオプション」のタブがありますので、その中の「HTMLメール形式」の利用するを選択し、設定更新ボタンをクリックします。 これでHTMLメールが使えるようになりました。

HTMLメールを作成する際は「ビジュアル」か「テキスト」

WelcartでHTMLメールを作成する際に「ビジュアル」と「テキスト」のどちらかを選択されるかと思います。

それぞれ作り方があるので、自分に合う作り方をお読みください。

ビジュアルでHTMLメールを作成する

HTMLメールをビジュアルで作成される方はテキストメールと同じように文章を書いていただいて問題ありません。
それに加えて、文字に色をつけたり文字の配置を変更することができますので、追加された機能をご紹介します。

アイコン	説明
	見出し1〜6、整形済テキストを挿入する
	文字を太くする
	文字を斜めにする
	先頭に「・」がついたリストを生成する
	先頭に数字がついたリストを生成する
	引用文を挿入する ※表示されないメールクライアントサービスがありますので基本的には利用しないでください
	文字を左寄せにする
	文字を中央寄せにする
	文字を右寄せにする
	リンクを追加する
	文字に取り消し線をつける
	文字の下にアンダーラインを引く
	文字に色をつける
	リンクなどを含んだ文章をコピーした時、ただの文字としてペーストする
	特殊文字を挿入する ※表示されないメールクライアントサービスがありますので、基本的には利用しないでください
	インデントを無くす ※対応していないメールクライアントサービスがありますので、基本的には利用しないでください
	インデントをつける ※対応していないメールクライアントサービスがありますので、基本的には利用しないでください

テキストでHTMLメールを作成する

HTMLメールをテキストで作成される方は、<table>タグを使用し枠組みを作成してください。
floatやFlexboxを使用し要素を横に並べた際に、そのcssに対応してないメールクライアントサービスがあると、表示くずれが起きてしまうからです。

HTMLメールを作成する時に使うタグ

HTMLメールの枠組を作る際に、よく使うコードをまとめました。
筆者がHTMLメールを作成する際に必ず使用するコードですので、参考にしていただければと思います。

タグ	機能	使い方
<table>	表を作成するタグ	<table>〇〇</table>
<tr>	表の行を作成するタグ	<tr>〇〇</tr>
<td>	表の内容を作成するタグ	<td>〇〇</td>
<div>	内容をひとまとめにするタグ	<div>〇〇</div>
<p>	段落を作成するタグ	<p>〇〇</p>
<a>	リンクを作成するタグ	<a href=”[URLを指定]”>〇〇</a>
<br>	改行する時に使うタグ	ここで改行<br>します
<img>	画像を配置する時に使うタグ	<img src=”画像のurlを指定” alt=”画像の説明”>

例文：

<table>
    <tr>
        <th>期間限定！全品30%OFF</th>
        <td>
            <div>
                <a href="リンク先のurl入ります"><img src="https://〇〇.com/img/event-banner.png" alt="イベントバナーの説明が入ります"></a>
                <p>なくなり次第終了しますので、ご了承ください。<br>なお、今回購入されたものに関しては返品・交換できません。</p>
            </div>
        </td>
    </tr>
</table>

プレビュー：

※プレビューは「設定を更新」ボタンを押したあとに反映されます。
※表示崩れが起きている場合はHTMLを圧縮してから貼り付けてご確認ください。（Welcart 2.3.1で修正予定）
※「ビジュアル」・「テキスト」のタブを切り替えてプレビューすると表示崩れが起きますので、ご注意ください。

HTMLメールで装飾をする時に使う属性

HTMLメールでデザインを当てる際に、よく使う属性をまとめました。
ただ属性といってもどう書いていいのかわからないという方もいらっしゃると思いますので、例文も合わせて見ていただければと思います。

属性	機能	値
width	要素の幅を決めるプロパティー	px（ピクセル）または%を指定
height	要素の高さを決めるプロパティー	px（ピクセル）または%を指定
border	線の太さや種類、色を指定するプロパティー	線の太さはpx（ピクセル）、種類はsolid（直線）やdouble（二重線）など、色はコード（#ff0000）で指定
cellpadding	テーブルのセル内の余白を指定するプロパティー	px（ピクセル）または%を指定
cellspacing	テーブルのセル外の余白を指定するプロパティー	px（ピクセル）または%を指定
bgcolor	背景色を指定するプロパティー	色コードで指定 （例：#ff0000）
align	要素の配置方向を指定するプロパティー	top,right,bottom,left,middleのいずれかを指定
valign	要素の縦方向の配置を指定するプロパティー	top,middle,bottom,baselineのいずれかを指定
style	タグ内にスタイルシートを埋め込むプロパティー	cssを指定 （例：style=”color: #ff0000;”）

例文：

<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#eeeeee">
    <tr>
        <th align="center" colspan="2" style="font-size: 30px; color: #333333; padding: 20px 0 0;">期間限定！全品30%OFF</th>
    </tr>
    <tr>
        <td align="center" valign="top" style="padding:20px;">
            <div>
                <img src="https://〇〇.com/img/event-banner1.png" alt="イベントバナーの一つ目の説明が入ります">
                <p align="left">なくなり次第終了しますので、ご了承ください。<br>なお、今回購入されたものに関しては返品・交換できません。</p>
            </div>
        </td>
        <td align="center" valign="top" style="padding:20px;">
            <div>
                <img src="https://〇〇.com/img/event-banner2.png" alt="イベントバナーの二つ目の説明が入ります">
                <p align="left">なくなり次第終了しますので、ご了承ください。<br>なお、今回購入されたものに関しては返品・交換できません。</p>
            </div>
        </td>
    </tr>
</table>

プレビュー：

※プレビューは「設定を更新」ボタンを押したあとに反映されます。
※表示崩れが起きている場合はHTMLを圧縮してから貼り付けてご確認ください。（Welcart 2.3.1で修正予定）
※「ビジュアル」・「テキスト」のタブを切り替えてプレビューすると表示崩れが起きますので、ご注意ください。

HTMLメールで画像を中央寄せにする方法

画像を<img>タグでそのまま設置しても中央寄せにはなりません。
中央寄せにする場合は、<img>タグの中にmargin: 0 auto; display: block;を記入してください。

例文：

<table>
    <tr>
        <td align="center" valign="top" style="padding:20px;">
            <div>
                <img src="https://〇〇.com/img/event-banner1.png" alt="イベントバナーの一つ目の説明が入ります" style="margin: 0 auto; display: block;">
            </div>
        </td>
    </tr>
</table>

HTMLメールを送信する前の注意点

先ほども書いたように各メールクライアントサービスで対応していないcssがありますので、表示が崩れる場合があります。
Gmailでは表示崩れが無かったけれど、Outlookでは崩れているという場合もありますので、まずはメールをテスト送信し、複数のメールクライアントサービスで確認してから本送信することをおすすめします。