ソニーペイメントサービスの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メールで画像を中央寄せにする方法

画像を<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では崩れているという場合もありますので、まずはメールをテスト送信し、複数のメールクライアントサービスで確認してから本送信することをおすすめします。