HTMLメールコーディング

提供：Wiki@KDS
2007年2月5日 (月) 17:08時点におけるAkama (トーク | 投稿記録)による版
ナビゲーションに移動 検索に移動

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

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

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

定型レイアウトのものに関してはHTMLメール作成君を使って作成。ただし非定型レイアウトのものや修正などは手作業で行う必要があるので部品の構成やコーディングのやり方は把握しておく必要があり。

部品の構成と仕組み

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

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

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

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

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

配信用HTMLファイル

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

サイト置き用HTMLファイル

画像は絶対パス(http://www.takashimaya.co.jp/link/mail/YYmmdd/～.jpg）で
ページリンクも絶対パスで記述すること。

使用不可のHTMLタグ

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

使用不可のcssプロパティ

  • margin(Hotmailですべて無視される：代わりにpaddingを使用)
  • float及びclear(代わりにtableタグを使用)

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


手作業でのコーディング

1）フォルダ名を「日付6桁」に変更
2）index.htmlをコピー → index_mail.htmlとする
■index.html に対して行うコト
3） 

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

を削除
■index_mail.html に対して行うコト

4）metaタグのcharset属性を「iso-2022-jp」に変更。
HTMLファイル自体のエンコーディングはShift_JISから変更しないこと

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

5）<style type="text/css"></style>のCSS指定を<body>開始タグ直後に移動
6）「HTML形式が表示されない環境の方は～」のエリアのリンクパス変更(配信日の日付に)
7）タブ、改行コードのみを削除
8）画像パスを絶対パスに変更
9）本サーバにアップ
10）index_mail.htmlのソースを、HotmailとYahoo mailで検証

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

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

<!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.表示されているフォームにデータを入力して下さい。
2.ボタンを押して2ページ目に進み、同じように入力してください。

※リンク先にdemo.kds-service.comドメインが含まれていた場合自動的にtakashimaya.co.jpドメインに変換されます。

※PSDから文章をコピペする時に文章の頭と尻尾が抜け落ちやすいので、よく確認して下さい。

※ピックアップの画像のalt属性とtitle属性の内容は共通のものにしています。 2ページ目で指定されたURLにアクセスしてtitleタグの中身を拾ってきます。 そのままでは長すぎるので適当な長さにカットして使ってください。

ピックアップアイテムの画像の場合はそれをalt・title属性とします。 その他の画像についてはalt属性のみ別途指定してください。

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

画像はあらかじめ書き出しておいてください。画像ファイル名はPSDにスライスが残っていると思うのでそれをそのまま使えばOKです。

デザインが大きく変更になった際には、使用しているテンプレートを変更する必要があります。

/kds_tko/akama/html/template/ディレクトリ以下に4種類のテンプレートが入っているのでそれをいじってください。

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