「HTMLメールコーディング」を編集中

[[画像:Htmlmail_061027_200px.jpg|right]]
'''HTMLメール'''（えいちてぃーえむえるめーる、通称使徒）は、毎週金曜日に高島屋が配信しているメール。<br>

ツール　→　[http://192.168.200.60:16080/kds_tko/osone/html/index.php HTMLメール作成君]　※不具合、修正箇所あれば報告お願いします。<br>
Works上での置き場所は「001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\HTMLメール\[日付]」です。<br>
<br>
過去配信分　→　[[タカシマヤHTMLメール配信一覧]]<br>

・毎週金曜の定例配信以外にも、母の日やバレンタインデーなどイベント時に配信されることも。<br>
・基本的には、定型レイアウトだが、「お知らせ」の有無や位置変更、下のバナーがなかったりmap使用だったりといくつかのバリエーションがあり。<br>
・また、通常スケジュールで配信される以外のものはまったく違うデザインだったりもする。<br>
・非定型レイアウトのものや修正などは手作業で行う必要があるので部品の構成やコーディングのやり方は把握しておく必要があり。<br>
<br>

<div id="manual">
==部品の構成と仕組み==
配信用のHTMLファイル(index_mail.html)とそれを見ることができない人のためのサイト置き用HTMLファイル(index.html)、アクセス解析をするためのリダイレクト用HTMLファイル、同一フォルダ内に置く画像ファイルから構成される。<br>
リダイレクト用HTMLファイルは上部バナー用(banner.html)、下部バナー用(banner2.html)、ピックアップアイテム用(detail01～.html）から構成される。<br>
全てのHTMLファイルと画像ファイルを高島屋本サーバ上(/link/mail/YYmmdd/)以下、たとえば2006年10月27日配信分であれば(/link/mail/061027/)以下に置く。実際の配信は高島屋さんがやります。<br>
==コーディングの際の注意事項==
配信用のHTMLファイルとサイト置き用のHTMLファイルで画像・リンクのパスの書き方が違ってくるので注意。<br>
またWebメール(Hotmail、Yahooメール)でレイアウトが乱れるので、CSSプロパティを使用することはは推奨できない。<br>
またHTMLタグに関しても一部制限がある。JavaScript、外部CSS読み込みは当然不可。<br>
<div class="section">
===画像・ページリンクのパスについて===
画像・ページリンクのパスについては以下のように指定してください。<br>
<strong>なおページリンクについては必ずtarget="_blank"で指定すること</strong><br>
<br>
<dl>
<dt>サイト置き用HTMLファイル</dt>
<dd>index.html<br>
画像に関しては同一フォルダ内への相対パス<br>
ページリンクに関しては絶対パス（http://www.takashimaya.co.jp/link/mail/YYmmdd/～.jpg）　で記述。<dd>
</dl>
<dl>
<dt>配信用HTMLファイル</dt>
<dd>index_mail.html<br>
画像、リンク共に絶対パスで記述。<dd>
</dl>
</div>
</div>
<div class="section">
===推奨タグ・プロパティ===
・<strong>tableガチ組みで　paddingではなく　sp.gifを使用</strong>　←これが基本になります。<br>
・webメール（hotmail）でレイアウトが崩れるのでsp.gifのみのTDに　line-height:1px;font-size:1px;　を指定する。<br>
・背景色、borderはstyleでtableに指定。CSSだとIEのwebメールで消えます。<br>
・fontの色はfont colorで指定。spanやCSSではIEwebメールで消えます。<br>
・リンクが指定されている画像には、imgタグにborder="0"を入れること。（入れないとGmailで画像に青線が付きます。）
</div>
<div class="section">
===使用不可のHTMLタグ・属性===
・外部CSSへのリンク(<link rel="stylesheet" href="～">）<br>
・em（崩れる）<br>
・span（IEwebメールに効かない）<br>
・p,h○,ul,li,dl,dt,dd,ol（webメールでpaddingがとられてしまうため）<br>
・（webメール配信用については）<head></head>タグ(CSSの記述は全て<body></body>内に記述)<br>
（ただし、Gmailは<body></body>以下に記述しても効かない。またタグについているid名、class名も自動的に取り除くためインラインCSSでないとだめ。）<br>
・bodyタグの属性すべて（bodyタグ自体がwebメールで取り除かれるため）<br>
</div>
<div class="section">
===使用不可のcssプロパティ===
・margin(Hotmailですべて無視される：代わりにpaddingを使用)<br>
・フォントサイズの相対指定（ピクセル指定でないとウェブメールで表示が乱れる）<br>
・float及びclear(代わりにtableタグを使用)<br>
・background:url()による背景画像の指定。tableタグのbackground属性を使ったほうが無難。<br>
・cssでの背景・線・文字色の指定。（Hotmailで背景色が消えるためtableタグのbgcolor属性、font属性を使う）<br>
その他の情報は[http://www.xavierfrenette.com/articles/css-support-in-webmail/ CSSのサポート情報：Hotmail, Yahoo! Mail and Gmail](英文)を参考にして下さい。<br>
</div>
<div class="section">
===手作業でのコーディング===
季節特集ものなど、HTMLメール作成君では太刀打ちできないようなやつがたまに来ます。<br>
これは手作業でコーディングすることになります。<br>
<div class="section">
===index.html===
1）他の日付のフォルダから必要な画像ファイルを持ってくる（タカシマヤのロゴなど）<br>
<div class="html-source">
<pre>
<td valign="top">※価格は2008年5月23日現在のものであり、消費税を含む総額にて表示しております。</td>
</pre>
</div>
日付のところを更新日に変える。<br>
2）URLリンクは絶対パス、画像は相対パスに<br>
3）IE・hotmailでの表示に注意。<br>
</div>
<div class="section">
===index_mail.html===
・解析のため、通販の部分に<strong>＜index_mail.htmlのみ＞</strong><br>
<div class="html-source">
<pre>
<td class="sp"><img src="http://search.shop.takashimaya.co.jp/img/sp.gif?mail=080808" width="1" height="12" border="0" alt="" title=""></td>
</pre>
</div>
mail=[日付6桁]の部分を更新する（08/08/01号より実施）
</div>
</div>
<div class="section">
===リダイレクト用のHTMLファイルについて===
アクセス解析をするためのHTMLファイルです。<br>
配信用HTMLファイル、サイト置き用HTMLファイル中の全てのリンクは、一度このページを迂回した後にそれぞれのリンクに飛びます。<br>
URLを記述する場所が3ヵ所、リダイレクト先のページタイトルを記述する場所が2ヵ所あるので注意。<br>
あとindex.html、index_mail.htmlの該当箇所のalt、title属性の変更も忘れずに。<br>
<br>
ツールを使用するとdetail01～09まで作成されます。<br>
detail○○を変更して、足りないところは作ってください。<br>
番号は上から順につけます。<strong>追加があったら番号順になるように直します。</strong><br>
<div class="html-source">
<pre>
<!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/valentinesday/index.html">
<title>2007 タカシマヤのバレンタインデー</title>
<script type="text/javascript">
<!--
location.href = "http://www.takashimaya.co.jp/shopping/valentinesday/index.html";
//-->
</script>
</head>
<body>
自動で飛ばない場合は<a href="http://www.takashimaya.co.jp/shopping/valentinesday/index.html">2007 タカシマヤのバレンタインデー</a>へ。
</body>
</html>
</pre>
</div>
</div>
==HTMLメール作成君使用方法==
1）画像はあらかじめ書き出しておいてください。画像ファイル名はPSDにスライスが残っていると思うのでそれをそのまま使えばOKです。<br>
「お知らせ」などはスライスしませんが、「今週のいちおし」は背景色が変わるのでスライスします。（ttl_recommend.gif）<br>
<br>
2）表示されているフォームにデータを入力して下さい。<br>
URLの指示はフォルダ内にExcelファイルがあってそこに書いてあります。<br>
<strong>“メールコピー”のファイルが正しいそうなので、そちらを参照します。</strong><br>
メールコピーが複数ある場合は更新日時の新しいほうです。<br>
ただし間違いもあるので不明な点は必ず確認してください。<br>
<br>
※メールコピーとPSDファイルの間で相違がある場合は指示書を見直す、または担当に確認してください。<br>
※ツールに入力したtest、demoサーバーのURLは本番URLに自動で直してくれます。<br>
※PSDから文章をコピペする時に文章の頭と尻尾が抜け落ちやすいので、よく確認して下さい。<br>
<br>
3）2ページ目で指定されたURLにアクセスしてtitleタグの中身を拾ってきます。<br>
そのままでは長すぎるので<strong>「商品一覧」「タカシマヤオンラインショッピング」は消します。</strong><br>
通販の商品は“【タカシマヤ通信販売】商品名”　がalt,titleになります。<br>
※ピックアップの画像のalt属性とtitle属性の内容は共通のものにしています。<br>
<br>
4）すべての作業が終わると生成したHTMLファイルのダウンロードのページが開きます。<br>
その中にindex.html（サイト置き用）、index_mail.html（配信用）、banner.html（上部バナーリダイレクト用）、banner2.html（下部バナーリダイレクト用）、detail01～.html（各商品リダイレクト用）が入っています。<br>
<br>
<br>
＞＞以降はエディタでの作業になります。<br>
<br>
<br>
<div class="section">
===リダイレクトページの更新===
リダイレクトページ→ banner～.html、detail01～.html<br>
<br>
1）detailの番号修正、または追加<br>
2）<title>～</title>内が空の場合はHTMLメール作成君2ページ目に入力したのと同じalt,titleを入れます。<br>
　商品の場合はブランド＋商品名など<br>
3）新規作成の場合は他のページにならってURLを3箇所、title,alt、ファイル名を修正する。<br>
※index.html、index_mail.htmlにおいての<strong>全てのリンク（画像、テキスト共に）にリダイレクトページを用意する。</strong><br>
直接リンクはしません。<br>
</div>
<div class="section">
===外部サイトへのリンク（08/01/中旬～実施）===
※キャンペーンなど、外部サイトへのリンク指定があるときがあります。<br>
用意するもの：<br>
<table border="0">
<tr>
<td>【HTMLメール】</td>
<td>　→/link/mail/yymmdd/aff_html01.html</td>
</tr>
<tr>
<td>【テキストメール】</td>
<td>　→/link/mail/yymmdd/aff_text01.html</td>
</tr>
</table>
以上同じ内容でファイル名が違うリダイレクトページを２つ用意します。<br>
index.html、index_mail.html内の該当リンクにはaff_html01.htmlへのリンクを貼ります。<br>
aff_text01.htmlについてはテキストメール（＝当コーディングチームは担当してません）なので、作成したら同じディレクトリに入れておきます。<br>
</div>
<div class="section">
===index.htmlの更新===
1）「お知らせ」の位置が定型じゃない場合は、適宜移動する。<br>
　一行のみTDタグでくくってあります。複数行の場合はBR,TRまたはTDを増やして整形してください。<br>
<div class="html-source">
<pre>
<!--information-->
<h3><img src="ttl_information.gif" width="522" height="20" border="0" alt="お知らせ" title=""></h3>
<table width="522" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>【会員限定キャンペーン】</td>
</tr>
<tr>
<td>・<a href="" target="_blank">お買上げキャンペーン！</a></td>
</tr>
</table>
<!--/information/-->
</pre>
</div>
2）空タグがあれば消す。<br>
3）更新したリダイレクトページの番号に合わせ、リンクを修正。<br>
4）リンク先URLは絶対パスにする。画像は相対でOK。<br>
5）「カスタマーセンターからのお知らせ」なども変わっている場合があるので、全体的によく確認する。<br>
6）各ブラウザ・リンクチェック（IEは特に注意）
</div>
<div class="section">
===index_mail.htmlの更新===
1）ツールで作成されたものを修正　or　完成したindex.htmlをコピー＆ペースト<br>
2）metaタグのcharset属性を「iso-2022-jp」に変更。<br>
　※HTMLファイル自体のエンコーディングはShift_JISから変更しないこと<br>
<pre class="html-source">
<meta http-equiv="Content-Type" content="text/html;charset=iso-2022-jp">
</pre>
3）<style type="text/css"></style>のCSS指定をまるごと<body>開始タグ直後に移動<br>
4）style終了直下に追加　「HTML形式が表示されない環境の方は～」のエリアのリンクパス変更(配信日の日付に)<br>
<div class="html-source">
<pre>
<table width="522" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="header">
<tr>
<td class="sp"><img src="http://www.takashimaya.co.jp/link/mail/080516/sp.gif" width="1" height="10" border="0" alt="" title=""></td>
</tr>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="header">
<tr>
<td class="sp"><img src="http://www.takashimaya.co.jp/link/mail/080516/sp.gif" width="8" height="1" border="0" alt="" title=""></td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="header">
<tr>
<td valign="top">
<a href="http://www.takashimaya.co.jp/link/mail/080516/index.html" target="_blank">●HTML形式が表示されない環境の方はこちらからご確認ください。</a>
</td>
</tr>
<tr>
<td valign="top"><a href="http://www.takashimaya.co.jp/shopping/guide/member/mail/index.html" target="_blank">●HTMLメールが正しく表示されない方はこちらから＜HTML形式メールについて＞をお読みください。</a></td>
</tr>
</table>
</td>
<td class="sp"><img src="http://www.takashimaya.co.jp/link/mail/080516/sp.gif" width="8" height="1" border="0" alt="" title=""></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="sp"><img src="http://www.takashimaya.co.jp/link/mail/080516/sp.gif" width="1" height="10" border="0" alt="" title=""></td>
</tr>
</table>
</pre>
</div>
5）タブ、改行コードのみを削除<br>
6）画像パスを絶対パスに変更<br>
7）今回のファイルを全て本サーバーにアップする<br>
8）ツール：「HTMLメール配信チェッカー」にindex_mail.htmlのソースをペースト、Outlook、Hotmail、Yahoo mailで検証<br>
<br>
</div>
あとは提出後、何度か修正があったりします。<br>
更新する箇所が多いとミスしがちになりますが、index.htmlとindex_mail.htmlの両方を更新し、souce、サーバーに上げるのを忘れないこと<br>
[[コーディング]]
[[案件別マニュアル]]