【非デザイナー向け】無料ツールを利用したHTMLメールの作り方~後編~メールの書き方tweetいよいよ、メール本文を作ろう!ツールを起動メールテンプレートを貼りつけ不要箇所を削除ヘッダー画像を差し替えるメール本文を編集するフッターを修正するhtmlとして保存する完成したメールを見てみよう前回に引き続き、非デザイナー向けに無料ツールを利用したHTMLメールの作り方をご紹介します。前回の記事はこちら【非デザイナー向け】無料ツールを利用したHTMLメールの作り方~前編~いよいよ、メール本文を作ろう!前回は、家づくりにおける設計や土台・骨組みづくりにあたる”メールテンプレートの作成”について解説しました。本記事ではいよいよ、外装や内装の仕上げにあたる”メール本文の作成”についてご紹介します。今回使用するのはscratchpadという無料のHTML編集ツールです。こちらも英語のツールですが、使い方は至ってシンプル、心配は無用です。★下記URLをクリックして、ツールを起動しますhttp://scratchpad.io/メールテンプレートを貼りつけ★メールテンプレートのソースファイルを左画面に貼りつけます(画像クリックで拡大)前回作成したindex.htmlをnotepadなどのテキストエディターで開くと、ソースファイルを出力することができます。ソースファイルを左画面に貼りつけると、右画面にHTMLの表示イメージがリアルタイムで出力されます。★「Webバージョン」「アップデート設定」などは今回利用しませんので、削除します(画像クリックで拡大)左画面のエディター上で109-144行目を削除すると、右画面上部のバーが削除されます。~/>)のsrc=”~”部分に差し込みたい画像ファイルのURLを絶対パス(http://~で始まるURL)で記述します。URLを指定すると、右画面の赤枠部分に画像が差しこまれます。only”と定義されたlayoutタグ(<layout>~</layout>)には見出しと説明文を1種類ずつ含みます。description」を書き換えることで、それぞれ見出しと説明文を編集することができます。image”と定義されたlayoutタグ(<layout>~</layout>)には見出しと説明文に加えて画像を含みます。~/>)に差し込みたい画像のURLを指定しましょう。(src=”~”を追記する)見出し・説明文・画像をそれぞれ指定すると、下記のようにリアルタイムで表示イメージが出力されます。href=”~”>~<a>)に登録変更・解除用のフォームURLを指定します。htmlとして保存する★完成したソースをHTMLファイルとして保存する完成したソースファイルはnotepadなどのテキストエディターにコピー&ペーストしてHTMLファイルとして保存しましょう。完成したメールを見てみようこれでHTMLメールの完成です!最後にもう一度アウトプットを確認してみましょう。(アウトプットイメージはこちら)いかがでしたか。大介)もっとラクにHTMLメールを作りたい!そんな方にはエディタ機能が付いたメール配信システムをご紹介しています。法人向けクラウドサービスを提供する株式会社ラクスで製品企画を担当しております。Reserved.メルラボの最新情報をメールでお届けします。