投稿日:2013年11月08日更新日:2023年4月6日

【非デザイナー向け】無料ツールを利用したHTMLメールの作り方~後編~

ビジネスメール

前回に引き続き、非デザイナー向けに無料ツールを利用したHTMLメールの作り方をご紹介します。

前回の記事はこちら：【非デザイナー向け】無料ツールを利用したHTMLメールの作り方~前編~

>>HTMLメール用テンプレート集をプレゼント！

いよいよ、メール本文を作ろう！

前回は、家づくりにおける設計や土台・骨組みづくりにあたる”メールテンプレートの作成”について解説しました。本記事ではいよいよ、外装や内装の仕上げにあたる”メール本文の作成”についてご紹介します。

今回使用するのはscratchpadという無料のHTML編集ツールです。こちらも英語のツールですが、使い方は至ってシンプル、心配は無用です。

ツールを起動

下記URLをクリックして、ツールを起動します
http://scratchpad.io/

Scrathpad

メールテンプレートを貼りつけ

★メールテンプレートのソースファイルを左画面に貼りつけます

前回作成したindex.htmlをnotepadなどのテキストエディターで開くと、ソースファイルを出力することができます。ソースファイルを左画面に貼りつけると、右画面にHTMLの表示イメージがリアルタイムで出力されます。

不要箇所を削除

★「Webバージョン」「アップデート設定」などは今回利用しませんので、削除します

左画面のエディター上で109-144行目を削除すると、右画面上部のバーが削除されます。

ヘッダー画像を差し替える

★ヘッダー画像のURLを指定する

label=”Header Image”と定義されているimgタグ（<img ~/>）のsrc=”~”部分に差し込みたい画像ファイルのURLを絶対パス（http://~で始まるURL）で記述します。URLを指定すると、右画面の赤枠部分に画像が差しこまれます。

メール本文を編集する

★テキストのみブロックを編集する

label=”Text only”と定義されたlayoutタグ（<layout>~</layout>）には見出しと説明文を1種類ずつ含みます。（画像は含みません）
「Add a title」と「Enter your description」を書き換えることで、それぞれ見出しと説明文を編集することができます。

★テキスト＆画像のブロックを編集する

label=”Text with full-width image”やlabel=”Text with right-aligned image”と定義されたlayoutタグ（<layout>~</layout>）には見出しと説明文に加えて画像を含みます。テキストのみのブロックと同様に見出しと説明文を書き換え、さらにimgタグ（<img ~/>）に差し込みたい画像のURLを指定しましょう。（src=”~”を追記する）