HTMLメールコーディング

提供：Wiki@KDS
2008年2月1日 (金) 17:28時点における192.168.200.234 (トーク)による版
ナビゲーションに移動 検索に移動

HTMLメール（えいちてぃーえむえるめーる、通称使徒）は、毎週金曜日に高島屋が配信しているメール。

過去配信分の一覧はタカシマヤHTMLメール配信一覧を参照。

お歳暮、バレンタインデーなどの際にはそれ以外のスケジュールで配信されることもあり。

基本的には、定型レイアウト（右のキャプチャ画像参照）だが、上部の緑で囲まれたあいさつ文がなかったり、下のバナーがなかったりといくつかのバリエーションがあり。
また、通常スケジュールで配信される以外のものはまったく違うデザインだったりもする。

＜08/02/01号よりレイアウト変更、それに伴いメール作成君も装い新たになりました↓＞
定型レイアウトのものに関してはHTMLメール作成君 改を使って作成。
ただし非定型レイアウトのものや修正などは手作業で行う必要があるので部品の構成やコーディングのやり方は把握しておく必要があり。

Works上での置き場所は「001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\HTMLメール」です。

部品の構成と仕組み

配信用のHTMLファイル(index_mail.html)とそれを見ることができない人のためのサイト置き用HTMLファイル(index.html)、アクセス解析をするためのリダイレクト用HTMLファイル、同一フォルダ内に置く画像ファイルから構成される。
リダイレクト用HTMLファイルは上部バナー用(banner.html)、下部バナー用(banner2.html)、ピックアップアイテム用(detail01～.html）から構成される。
全てのHTMLファイルと画像ファイルを高島屋本サーバ上(/link/mail/YYmmdd/)以下、たとえば2006年10月27日配信分であれば(/link/mail/061027/)以下に置く。実際の配信は高島屋さんがやります。

コーディングの際の注意事項

配信用のHTMLファイルとサイト置き用のHTMLファイルで画像・リンクのパスの書き方が違ってくるので注意。
またWebメール(Hotmail、Yahooメール)などでCSSをフルに使ったレイアウトが乱れるので、 一部のプロパティを使うことができない。またHTMLタグに関しても一部制限がある。JavaScriptは当然不可。

画像・ページリンクのパスについて

画像・ページリンクのパスについては以下のように指定してください。 なおページリンクについては必ずtarget="_blank"で指定すること

サイト置き用HTMLファイル

index.html 画像に関しては同一フォルダ内への相対パス
ページリンクに関しては絶対パスで記述。

配信用HTMLファイル

index_mail.html 画像は絶対パス(http://www.takashimaya.co.jp/link/mail/YYmmdd/～.jpg）で
ページリンクに関しても絶対パスで記述。

使用不可のHTMLタグ・属性

  • 外部CSSへのリンク(<link rel="stylesheet" href="～">）
  • strong、emタグ(CSSでスタイルを指定してもボールド、イタリック体などになる)
  • <head></head>タグ(CSSの記述は全て<body></body>内に記述)

（ただし、Gmailは<body></body>以下に記述しても効かない。またタグについているid名、class名も自動的に取り除くためインラインCSSでないとだめ。）

  • bodyタグの属性すべて（bodyタグ自体がwebメールで取り除かれるため）

使用不可のcssプロパティ

  • margin(Hotmailですべて無視される：代わりにpaddingを使用)
  • フォントサイズの相対指定（ピクセル指定でないとウェブメールで表示が乱れる）
  • float及びclear(代わりにtableタグを使用)
  • background:url()による背景画像の指定。tableタグのbackground属性を使ったほうが無難。
  • tableタグに対してcssでの背景色の指定。（Hotmailで背景色が消えるためtableタグのbgcolor属性を使う）

その他の情報はCSSのサポート情報：Hotmail, Yahoo! Mail and Gmail(英文)を参考にして下さい。

手作業でのコーディング

季節特集ものなど、HTMLメール作成君では太刀打ちできないようなやつがたまに来ます。
これは手作業でコーディングすることになります。

index.html

1）他の日付のフォルダから必要な画像ファイルを持ってくる（タカシマヤのロゴなど）

<div id="storeInfo">
	<h3><span>■</span>タカシマヤ各店の情報</h3>
	<p class="event">全国のタカシマヤ各店のイベントや催しなど、<a href="http://www.takashimaya.co.jp/store/index.html" target="_blank">最寄りの店舗情報はこちらから</a></p>
	<ul>
		<li>※品数に限りがございますので、売切れの節はご容赦ください。</li>
		<li>※価格は20○ 年○月○日現在のものであり、消費税を含む総額にて表示しております。</li>
		<li>※予告なしに内容の変更をする場合がございます。あらかじめご了承ください。</li>
	</ul>
</div>

日付のところを更新日に変える。
2）URLリンクは絶対パス、画像は相対パスに
3）TABLEレイアウトの場合は特にIE・hotmailでの表示に注意。

リダイレクト用のHTMLファイルについて

アクセス解析をするためのHTMLファイルです。
配信用HTMLファイル、サイト置き用HTMLファイル中のリンクをクリックすると、一度このページを迂回した後にそれぞれのリンクに飛びます。
ただしこのリダイレクト用HTMLファイルを使うのは上部バナー、下部バナー、基本構造は全て同じ。
このHTMLファイルに関してはJavaScriptとmetaタグで指定URLにリダイレクトします。
URLを記述する場所が3ヵ所、リダイレクト先のページタイトルを記述する場所が2ヵ所あるので注意。
あとindex.html、index_mail.htmlの該当箇所のalt、title属性の変更も忘れずに。

ツールを使用するとdetail1～14まで作成されます。

1、2 　→最新情報1,2へ
3、5、7、9 　→ピックアップ1～4へ
4、6、8、10 　→ピックアップ1～4の下リンクへ
11、12 　→通販おすすめ商品へ
13 　→いちおしタイトルへ
14 　→いちおし商品詳細へ

に対応しています。そぐわない場合は各自変更してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="Refresh" content="0;URL=http://www.takashimaya.co.jp/shopping/tvm/1097/index.html">
<title>2007 タカシマヤのバレンタインデー</title>
<script type="text/javascript">
<!--
location.href = "http://www.takashimaya.co.jp/shopping/tvm/1097/index.html";
//-->
</script>
</head>

<body>
	自動で飛ばない場合は<a href="http://www.takashimaya.co.jp/shopping/tvm/1097/index.html">2007 タカシマヤのバレンタインデー</a>へ。
</body>

</html>

HTMLメール作成君使用方法

1）画像はあらかじめ書き出しておいてください。画像ファイル名はPSDにスライスが残っていると思うのでそれをそのまま使えばOKです。
「お知らせ」などはスライスしませんが、「今週のいちおし」は背景色が変わるのでスライスします。（ttl_recommend.gif）

2）表示されているフォームにデータを入力して下さい。
URLの指示はフォルダ内にExcelファイルがあってそこに書いてあります。
“メールコピー”のファイルが正しいそうなので、そちらを参照します。
ただし間違いもあるので必ず一度確認してください。
（test、demoサーバーのURLを入力しても自動で直してくれるので大丈夫です。念のためアップ前要確認）
※PSDから文章をコピペする時に文章の頭と尻尾が抜け落ちやすいので、よく確認して下さい。

3）2ページ目で指定されたURLにアクセスしてtitleタグの中身を拾ってきます。
そのままでは長すぎるので適当な長さにカットして使ってください。
ブランド名などの場合はジャンル名も入れたほうが良いです。
通販の商品は“【タカシマヤ通信販売】商品名”　がalt,titleになります。
※ピックアップの画像のalt属性とtitle属性の内容は共通のものにしています。

4）すべての作業が終わると生成したHTMLファイルのダウンロードのページが開きます。
その中にindex.html（サイト置き用）、index_mail.html（配信用）、banner.html（上部バナーリダイレクト用）、banner2.html（下部バナーリダイレクト用）、detail01～.html（各商品リダイレクト用）が入っています。


＞＞以降はエディタでの作業になります。


リダイレクトページの更新

リダイレクトページ→ banner～.html、detail01～.html
お知らせ部分などにテキストリンクがたまにありますが、それは基本的に直接リンクでリダイレクトページは作りません。

1）detailの番号が変わる場合があるので、その時はファイル名修正

2）<title>～</title>内が空の場合はHTMLメール作成君2ページ目に入力したのと同じalt,titleを入れます。
　商品の場合はブランド＋商品名など
　
3）新規作成の場合は他のページにならってURLを3箇所、title,alt、ファイル名を修正する。

※index.html、index_mail.htmlにおいての全てのリンク（画像、テキスト共に）にリダイレクトページを用意する。
直接リンクはしません。

外部サイトへのリンク（08/01/中旬現在）

※キャンペーンなど、外部サイトへのリンク指定があるときがあります。
用意するもの：

【HTMLメール】 　→/link/mail/yymmdd/aff_html01.html
【テキストメール】 　→/link/mail/yymmdd/aff_text01.html

以上同じ内容でファイル名が違うリダイレクトページを２つ用意します。
index.html、index_mail.html内の該当リンクにはaff_html01.htmlへのリンクを貼ります。
aff_text01.htmlについてはテキストメール（＝当コーディングチームは担当してません）なので、作成したら同じディレクトリに入れておきます。

index.htmlの更新

1）「お知らせ」の位置が定型じゃない場合は、適宜移動する。
　一行のみリストタグでくくってあります。複数行の場合はulまたはliを増やして整形してください。

<!--information-->
<h3><img src="ttl_information.gif" width="522" height="20" border="0" alt="お知らせ" title=""></h3>
<div id="topInfo">
	<ul>
		<li>【会員限定キャンペーン】</li>
		<li>・<a href="" target="_blank">お買上げキャンペーン！</a></li>
	</ul>
</div>	
<!--/information/-->

2）空pタグや空divがあれば消す。
3）更新したリダイレクトページの番号に合わせ、リンクを修正。
4）リンク先URLは絶対パスにする。画像は相対でOK。
5）「カスタマーセンターからのお知らせ」なども変わっている場合があるので、全体的によく確認する。
6）各ブラウザ・リンクチェック（IEは特に注意）

index_mail.htmlの更新

1）ツールで作成されたものを修正　or　完成したindex.htmlをコピー＆ペースト
2）metaタグのcharset属性を「iso-2022-jp」に変更。
　※HTMLファイル自体のエンコーディングはShift_JISから変更しないこと

<meta http-equiv="Content-Type" content="text/html;charset=iso-2022-jp">

3）<style type="text/css"></style>のCSS指定をまるごと<body>開始タグ直後に移動
4）div id="header"内に以下を追加

<ul>
<li><a href="" target="_blank">●HTML形式が表示されない環境の方はこちらからご確認ください。</a></li>
<li><a href="" target="_blank">●HTMLメールが正しく表示されない方はこちらから＜HTMLメールのご案内＞をお読みください。</a></li>
</ul>

「HTML形式が表示されない環境の方は～」のエリアのリンクパス変更(配信日の日付に)
5）タブ、改行コードのみを削除
6）画像パスを絶対パスに変更
7）今回のファイルを全て本サーバーにアップする
8）ツール：「HTMLメール配信チェッカー」にindex_mail.htmlのソースをペースト、Outlook、Hotmail、Yahoo mailで検証



あとは提出後、何度か修正があったりします。
更新する箇所が多いとミスしがちになりますが、
index.htmlとindex_mail.htmlの両方を更新し、souce、サーバーに上げるのを忘れないこと

「https://wiki.kohga.tokyo/index.php?title=HTMLメールコーディング&oldid=2248」から取得