HOME > 目的別 > デコメールを作成する

デコメールを作成したい!
HTMLエディタでらくらく作成!

スマートメールは初心者でもかんたんにメルマガ本文を作成できるように、HTMLエディタをご用意!
もちろん、HTMLが解る方などはより自由な作成を行って頂けます!
※かんたんメニューでは、本文登録が行えません。詳細メニューより本文登録画面へ移ってください。

1.本文登録は詳細メニューから!

詳細メニューから本文登録へ
まず、詳細メニューから本文登録のページへ飛んでください。

1.形式や件名を入力しよう
1-形式
デコレーションを行う場合は「HTML」にチェックを入れましょう。HTMLになっていないと、デコレーションメールで受信ができません。

2-ヘッダー・フッター
ヘッダーフッターは任意でチェックを入れてください。

3-件名
タイトルを入力して下さい。

4-テキスト本文
テキスト本文とは、デコレーションメールを受信できない場合表示される内容です。タグなどは使えません。
まずはここに本文を作成しましょう!

2.HTML(デコレーション)本文を作ろう!
テキスト本文が完成したら、次はHTML化しましょう!そのまま本文を使う場合はコピーし、上図赤丸の場所にあるHTMLエディタのボタンを押してください。

HTMLエディタとは??
普通、web上で文字の色やデザインを作るとき、タグやスタイルシートという文字を組み込まなければなりません。
しかし一つ一つ打って行くのはとても面倒…ましてやいっぱいある文字を覚えれない!
そんな時に役立つのがHTMLエディタです。メルマガの原稿と、ボタン操作だけで様々なデザインのデコレーションメールが作成できます。
初心者の人でも完成度の高いものが創れる優れものなのです。

HTMLエディタ作成方法はこちらから!

3.置換文字とはなに??
置換文字とは、その文字を本文内に書けば指定した文字に自動的に変換される便利な機能です。
例えば、「●●さんへ」など名前を呼びたい時は、記載されている「%%USER_NAME%%: ユーザー名」の「%%USER_NAME%%」を本文に挿入し、「%%USER_NAME%%さんへ」と打ちます。
するとプレビューでは表示されませんが、配信するとユーザー名に変換して送信されます。
覚えるととっても楽しい機能なので、ぜひ使ってみてください!

4.広告・画像参照とはなに??
広告についてはこちらを参照してください。
メール画像とは、本文に挿入されている画像データの事です。HTMLエディタで作成し、画像を挿入した場合は自動でここにファイル名が表示されます。
※%%PICT〜の置換文字はそれぞれの画像とつながっており、この文字を挿入すると取り込まれてある画像を表示できる様になります。
取込で新たにサーバーへ画像をアップし、参照は既にサーバーにアップされている画像を読み込みます。
クリアを押すと画像の情報は消え、本文中の画像は表示されません。
※画像部分の文字を消さなければ本文登録ができません。

プレビューでいつでも確認でき、メルマガのサイズも表示できるのでこまめに微調整ができます!
全部項目を埋めたら登録ボタンを押すだけ。これでデコレーションメールは完成です!

2.HTMLエディタを使おう!

本文を簡単に作成できるHTMLエディタを使いこなしちゃいましょう!
まずエディタが開いたら、本文をコピーした場合そのまま貼付けましょう。
そうでない場合は、大まかに本文を作成してからデコレーションを行うとより効率的です!
HTMLエディタで編集をしよう!

1.背景の色をかえてみよう

背景の色をかえる為にはまず、赤丸の位置にあるアイコンをクリックして下さい。
背景色の選択ボタンを押すと、色選択の小窓が出ます。
お好きな色をクリックしてOKを押してください。
選択した色で大丈夫な場合はOKをクリックして完了です!

※カラーコードでの入力も可能です。その場合は、選択ボタンを押さず、背景色と書かれた下のフォームに打ち込み、OKボタンを押して下さい。

2.文字の位置をかえてみよう

文字を中央寄せしたい場合は、位置変更したい所をドラッグし、赤丸の位置にあるアイコンをクリックして下さい。 すると、選択した場所が中央寄せになります。
右寄せの場合は一番左のアイコン!

3.文字を追加してみよう

文字を書き足す場合は、書き足したい場所にカーソルを持って行き通常通りに打ち込みます。
追加した文字も、色や位置を自由に変える事ができます。

4.文字の色をかえてみよう

文字の色を変えるには、まず色を変えたい部分をドラッグします。
次にオレンジ丸の位置にある、文字色変更ボタンをクリックして下さい。
すると配色パレットが表示されますので、好きな色をクリック。選択した範囲の色が変わります!
更にいろんな色を試したい時は、その他の色をクリックして選んで下さい。

5.文字の大きさをかえてみよう

文字の大きさを変えるには、文字色と同じようにまず大きさを変えたい場所をドラッグして範囲指定します。
次に文字サイズと書かれた隣のプルダウンをクリックして下さい。
すると、1〜7の数字が出てきます。これが、大きさを指定する数字です。
1は最小、7は最大となっており、標準は3の大きさとなります。(上記画像では赤の枠内を5にしています。)
パソコンでは大きさがはっきりと解りますが、携帯では機種により大・中・小の三種類しか見れないものもあります。
その為、サイズを変更する場合はテスト送信等を行って確認を行う事を推奨します。

また、この機能は保存をしない限りエディタ上では文字の大きさが反映されません。(実際には文字の大きさが変わっていますが、HTML本文では大きさはそのままの状態)
※プレビューでは大きさが変わります
大きさを見つつ編集を行いたい場合は、一度OKボタンを押して再度HTMLエディタを開いて下さい。

6.罫線を入れてみよう

罫線とは一本のラインの事です。区切りを付けたい時などに便利な飾りです。
まず罫線を入れたい箇所を決め、マウスカーソルをそこへ持って行きます。
画像では「----」のラインを罫線に変えるため、ドラッグして解りやすくしています。
位置を決めたら、後は青丸の位置にある横罫線アイコンを押すだけです。
そうすると、指定した位置に罫線が挿入されます。

7.デコメ絵文字をいれてみよう

デコメ絵文字を入れる場合は青丸のお日様のアイコンをクリックします。
すると、絵文字パレットが表示されます。
使用したい絵文字をクリックすると、HTML本文に貼り付けられます。

8.画像を挿入してみよう

画像を挿入する場合は、赤丸のアイコンをクリックして小窓を開いて下さい。
次に取り込み画像一覧をクリックして下さい。すると、下記の画面が開きます。
画像サーバー
この画像サーバーには、今まで取り込みを行った画像が入っています。
画像を取り込む
取り込みとは、このページの1-4で紹介した、「広告・画像参照とはなに??」で表記されている取込の事です。 赤丸の取込ボタンを押して、画像をアップしておかなければエディタ上で新たに画像を挿入する事ができません。
画像を挿入する
画像を選んだらOKボタンを押して挿入します。
幅や高さなどは数値を変えるとぼやけたり上手く表示されなくなりますので、できるだけ数値を変えない様にして下さい。
かんたんに画像を挿入できるので、様々な画像を入れて華やかにしちゃいましょう!

9.高校をいれてみよう

広告を挿入する為には、赤丸の広告挿入ボタンをクリック。
広告挿入の小窓が出るので、任意の広告番号をクリック。
すると、広告が簡単に挿入されます。広告の確認はプレビューで行えます。
広告を参照する
広告を参照ボタンで参照していなければ、広告は表示されません。
詳しい広告設定の方法はこちらのページをご覧下さい。

10.リンクの挿入方法

リンクは他のwebページなどに飛ぶ際に便利な機能です。
ただし、広告とは違ってクリック数等は集計できません。

リンクしたい文字をドラッグし、赤丸のアイコンをクリックします。
出て来たリンクの小窓へ、URLを打ち込みます。
この時、http://は既に「プロトコル」で指定されているので、http://を抜いたアドレスを打ち込んで下さい。
リンクタイプを「E-Mail」にした場合はメールアドレスを打ち込んで下さい。

このリンクした文字は、初めは青色ですが任意の文字色へ変える事ができます。

11.検索と置換機能

広告のアイコンの隣をクリックすると、指定した文字列を検索して表示させる検索機能が使用できます。
その隣のアイコンをクリックすると、置き換えを行う事もできます。
長文を打った時や、一部の言葉を変えて本文をもう一つ登録したい時等に便利な機能です。

12.その他エディタアイコンについて

(1)すべて選択アイコン
エディタ内全部を選択(ドラッグ)状態にできます。

(2)元に戻す・やり直しアイコン
左側のアイコンが元に戻す(直前に行った動作を取り消す)
右側のアイコンがやり直し(直前に取り消した動作を1つ戻す)です。
動作を元に戻したり、戻したけどさっきのほうがよかった!という場合にはやり直したりとできます。

(3)ブロック表示アイコン
HTMLがどういう感じで区切られているかを視覚的に見る為の機能です。
HTMLをあまり知らない場合には特に使う必要はありませんが、HTMLを知っている人はこれを見つつ構成を行う事もできます。

3.テスト送信して確認を行おう!

せっかく素敵にデコレーションできても、いざメルマガが届いた時違う画像が表示されていたりしたら、大変です!
送信を行う前にテスト送信を行い、自分でチェックをしましょう。

テスト送信はかんたんメニューなら「予約確認」から、詳細メニューの場合「メール配信登録」「メール配信一覧」から行えます。

ページトップへ