ソニーペイメントサービスの2つの決済モジュール

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>

プレビュー: プレビュー1

※プレビューは「設定を更新」ボタンを押したあとに反映されます。
※表示崩れが起きている場合は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>

プレビュー: プレビュー2

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

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

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