無料HTMLエディタ「BEE free」使ってみた≪後編≫

無料HTMLエディタ「BEE free」使ってみた≪後編≫

  • このエントリーをはてなブックマークに追加

『無料HTMLエディタ「BEE Free」使ってみた』記事の後編です。

前編では、BEE Freeを使って、HTMLメールを作成するところまで紹介しました。
後編では、作成したHTMLメールを、実際に配信する手順をご紹介します。

BEE free は、ブラウザを介してインターネット上で操作する、クラウド型のHTMLメール編集ツールで、パソコンへのインストールなどは一切必要なく、インターネットがつながる環境であれば誰でも利用できるWEBツールです。

端的に言うと、BEE Freeで作成したHTMLメールの「ソース」を、HTMLメールが配信可能なメール配信ツールへセットして、配信する、という単純なものですが、BEE FreeからダウンロードしたHTMLソースを貼り付けただけでは、うまくいきません。
配信されたメール本文内に入っているはずの画像が、表示されないのです。

 

関連ページ:ドラッグ&ドロップでHTMLメールを誰でもカンタンに作成・配信できる「配配メール」

 

まずはじめに

HTML全体のこととなると話が長くなってしまうので、ここではHTMLメールの画像が表示される仕組みにフォーカスして説明します。

HTMLメールでは、メールそのものに写真や画像が張り付いている(添付されている)わけではありません。みなさんがお使いのパソコンに保存した画像が表示されているわけでもありません。では、HTMLメールで表示される画像はどこに保存されているかというと、インターネット上にあるサーバーの中に保存されています。

それを、HTMLの記述で、サーバーの場所を指定し、インターネット上から画像を呼び出しているのです。

 

2016-10-31_14h21_51

 

上図は、HTMLの記述によって、画像を指定して表示している部分のHTMLのソースです。

「img  src=」というHTML記述で、http://○○○(←サーバー上の画像の保存場所)にある画像を表示してね、という指示をしています。画像を絶対パス(フルパス)で指定する、なんて言われたりします。

HTMLメールの画像はこのような形で、インターネットのサーバー上にある画像をHTMLの記述で指定して、メール本文に表示させる必要があります。

つまり、サーバー上に画像を保存・アップロードする必要があるということです。

 

Chapter.1 サーバーへの画像アップロード

画像をサーバーへアプロードする、という言葉だけ聞くと、何やら難しそうなイメージですが、そんなに難しいものではありません。

サーバーへの画像ファイルのアップロード方法は、各サーバー会社によって異なったり、特定の画像アップロードのサービスを提供していたりするので、ロリポップ以外のサーバーをお使いの方は、下記のリンク集や、ご契約中のサーバー会社へご確認ください。

 

▼主要レンタルサーバー会社の、サーバーへの画像ファイルアップロード方法

エックスサーバー
http://tabibitojin.com/file-upload-xserver-filemanager/

さくらインターネット
https://help.sakura.ad.jp/hc/ja/articles/206207001

WebARENA
http://web.arena.ne.jp/support/suite2/manual/ftp/instruction.html

GMOクラウド
https://help.gmocloud.com/app/answers/detail/a_id/2809/

CPI
http://www.cpi.ad.jp/support/faq/faq_func/faq_func_ftp/support-248.html 

 

今回はロリポップというサーバー会社の提供するレンタルサーバーで話を進めていきます。

 

BEE FreeでHTMLメールの作成で利用した画像ファイルをすべてサーバー上に保存します。

2016-10-24_20h13_43

 

こんな感じで、画像のサーバー保存と、保存先のサーバーURLの確認ができます。

次に、前回の記事で作成したHTMLメールのダウンロードファイルの中に『images』というフォルダを開くと、SNSのアイコンがずらりと並んでいます。

 

2016-10-24_19h28_131

2016-11-02_15h26_30

こちらの画像も後ほど利用するものなので、全てサーバー上にアップロードしてしまいます。

画像を全てアップロードし終えるとこんな感じになります。

2016-11-02_15h30_23

 

Chapter.2 HTMLソースの取得

ダウンロードファイル内のブラウザのアイコンマークから、HTMLソースの取得ができます。

2016-10-24_19h28_132

アイコンマークをダブルクリックすると、ブラウザが立ち上がり、作成したHTMLメールが表示されます。
※画像はまだ表示されていません。

2016-10-24_19h31_17

 

この状態で、右クリックをして、「ページのソースを表示」という項目を選択します。

2016-10-24_19h32_43

 

すると、HTMLタグで構成されたページになりますので、この内容を全てコピーし、メモ帳などに貼り付けておきます。

2016-10-24_19h33_09

 

Chapter.3 メール配信ツールへのソース貼り付け

ここまでで、HTMLに挿入する画像のサーバー上への保存と、HTMLメールのソースの取得が完了しました。

ここで、取得したソースを、HTMLメール配信に対応しているメール配信ツールへ貼り付けていきます。

2016-10-24_19h41_51

 

メモ帳に貼り付けたHTMLソースをコピーし、HTML挿入箇所に貼り付けます。

2016-10-24_19h41_38

 

この状態でプレビューを表示してみても、やはり画像はまだ表示されていない状態です。

2016-10-24_19h42_20

 

Chapter.4  サーバー上の画像との紐づけ

このままではメール本文内に画像が表示されないままメールが送られてしまうので、サーバー上に保存してある画像との紐づけが必要となります。

ここからはソースを少しいじることになりますが、それほど難しくないので気構えずにご覧頂ければと思います。

前項でもお伝えしたように、HTMLメールでの画像表示の仕組みは

「img  src=」というHTML記述で、http://○○○(←サーバー上の画像の保存場所)にある画像を指定、です。

2016-10-31_14h21_51

ですので、先ほど貼り付けたHTMLソースの中で「img  src=」の記述を探し、その後のhttp://~の保存先URLを変更すれば、所定の位置に、所定の画像が表示される仕組みとなります。

 

先ほど貼り付けたソースの画面で[Ctrl + F](MACの場合は[comand+F])を押して、検索窓を表示させ、「src」と入力します。これは、表示されている画面の中から「src」という文字を探してくれ、見つけやすいように色を付けて強調してくれるものです。
2016-10-24_19h34_12検索してみると、srcと表示される部分が複数見受けられます。

2016-10-24_19h45_14

 

この「src=」の後ろの“      ”の部分に、現在記述されている文字を消して、表示させたい画像が保存されている、サーバーのURLを入力します。

2016-10-24_19h43_05

 

プレビューで確認すると、画像が挿入されています。

2016-10-24_19h42_20

2016-10-24_19h44_10

 

こんな感じで、画像を挿入する箇所を探していき、“   ”の部分に、該当する画像の保存先URLを記述していきます。

2016-10-24_19h43_31

2016-10-24_19h53_48

 

ダウンロードファイルから保存したSNSアイコンの画像も、所定の箇所に当てはめると
2016-10-24_20h16_29

こんな感じです。

全ての画像のURLの挿入が終われば完成です!

2016-10-24_20h17_47

上の図はスマホでのプレビュー画面ですが、「BEE Free」で作ったHTMLメールはレスポンシブ対応(スマホでメールを開くと画像サイズやレイアウトが最適化される仕組み)がされているので、スマートフォン向けのHTMLメール送信にも活用できますね!

 

さいごに

サーバーへの画像のアップロードが、慣れるまで少し時間がかかるかもしれませんが、HTMLメールを送る時の基礎の部分にもなるので、この機会にマスターされるといいかもしれません。そこさえマスターしてしまえば、レスポンシブ対応のお洒落なHTMLメールが簡単に送れるようになるので、ぜひトライして頂ければと思います!

 

ちなみに、弊社が開発販売する「配配メール」では、本記事でご紹介した作業を行う必要がなく、HTMLメールを誰でもカンタンに作成・配信できます。無料トライアルも可能ですので、ご興味のある方はぜひ、下記リンクよりお問い合わせください。

関連ページ:視覚的に訴えかけるメールをHTMLメールで配信ー配配メール

 

 

メール配信のお悩み配配メールで解決!無料資料をプレゼント
The following two tabs change content below.

メルラボ編集部

「Mail Marketing Lab(メルラボ)」編集部。メールマーケティングの効果を上げるためのさまざまな情報を発信します。
  • このエントリーをはてなブックマークに追加

関連するおすすめ記事

  • 配配メールバナー