「HTMLメールコーディング」の版間の差分

2008年5月7日 (水) 13:01時点における版

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

ツール　→　HTMLメール作成君　※不具合、修正箇所あれば報告お願いします。

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

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

部品の構成と仕組み

配信用の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、外部CSS読み込みは当然不可。

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

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

サイト置き用HTMLファイル

index.html: 画像に関しては同一フォルダ内への相対パス; ページリンクに関しては絶対パス(http://www.takashimaya.co.jp/link/mail/YYmmdd/～.jpg)で記述。

配信用HTMLファイル

index_mail.html: 画像、リンク共に絶対パスで記述。

推奨タグ・プロパティ

・tableガチ組みでpaddingではなくsp.gifを使用　←これが基本になります。
・webメール（hotmail）でレイアウトが崩れるのでsp.gifのみのTDに　line-height:1px;font-size:1px;　を指定する。
・borderはtableでもCSSでもどちらでも構いません。

使用不可のHTMLタグ・属性

・外部CSSへのリンク(<link rel="stylesheet" href="～">）
・ul,li,dl,dt,dd,ol（webメールでpaddingがとられてしまうため）
・（webメール配信用については）<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）IE・hotmailでの表示に注意。

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

アクセス解析をするためのHTMLファイルです。
配信用HTMLファイル、サイト置き用HTMLファイル中の全てのリンクは、一度このページを迂回した後にそれぞれのリンクに飛びます。
URLを記述する場所が3ヵ所、リダイレクト先のページタイトルを記述する場所が2ヵ所あるので注意。
あとindex.html、index_mail.htmlの該当箇所のalt、title属性の変更も忘れずに。

ツールを使用するとdetail01～09まで作成されます。
detail○○を変更して、足りないところは作ってください。

<!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ファイルがあってそこに書いてあります。
“メールコピー”のファイルが正しいそうなので、そちらを参照します。
ただし間違いもあるので必ず一度確認してください。

※メールコピーとPSDファイルの間で相違がある場合は指示書を見直す、または担当に確認してください。
※ツールにtest、demoサーバーのURLを入力しても自動で直してくれますが、念のためアップ前要確認です。
※PSDから文章をコピペする時に文章の頭と尻尾が抜け落ちやすいので、よく確認して下さい。

3）2ページ目で指定されたURLにアクセスしてtitleタグの中身を拾ってきます。
そのままでは長すぎるので適当な長さにカットして使ってください。
ブランド名などの場合はジャンル名も入れたほうが良いです。
「タカシマヤオンラインショッピング」はいらないです。
ギフトやバレンタインデーなどの場合の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）「お知らせ」の位置が定型じゃない場合は、適宜移動する。
　一行のみTDタグでくくってあります。複数行の場合はTRまたはTDを増やして整形してください。

<!--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/-->

2）空タグがあれば消す。
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）style終了直下に追加　「HTML形式が表示されない環境の方は～」のエリアのリンクパス変更(配信日の日付に)

<div id="header">
<ul>
<li><a href="http://www.takashimaya.co.jp/link/mail/080509/index.html" target="_blank">●HTML形式が表示されない環境の方はこちらからご確認ください。</a></li>
<li><a href="http://www.takashimaya.co.jp/shopping/guide/member/mail/index.html" target="_blank">●HTMLメールが正しく表示されない方はこちらから＜HTML形式メールについて＞をお読みください。</a></li>
</ul>
</div>

5）タブ、改行コードのみを削除
6）画像パスを絶対パスに変更
7）今回のファイルを全て本サーバーにアップする
8）ツール：「HTMLメール配信チェッカー」にindex_mail.htmlのソースをペースト、Outlook、Hotmail、Yahoo mailで検証

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

コーディング案件別マニュアル

@@ 1行目: / 1行目: @@
 '''HTMLメール'''（えいちてぃーえむえるめーる、通称使徒）は、毎週金曜日に高島屋が配信しているメール。<br>
+[[画像:Htmlmail_061027_200px.jpg|right]]
+ツール　→　[http://192.168.200.60:16080/kds_tko/osone/html/index.php HTMLメール作成君]　※不具合、修正箇所あれば報告お願いします。<br>
 <br>
-[[画像:Htmlmail_061027_200px.jpg|right]]
+Works上での置き場所は「001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\HTMLメール\[日付]」です。<br>
-ツール[http://192.168.200.60:16080/kds_tko/osone/html/index.php HTMLメール作成君]を使用。　※不具合、修正箇所あれば報告お願いします。<br>
 <br>
 過去配信分　→　[[タカシマヤHTMLメール配信一覧]]<br>
 ・毎週金曜の定例配信以外にも、母の日やバレンタインデーなどイベント時に配信されることも。<br>
-<br>
 ・基本的には、定型レイアウトだが、「お知らせ」の有無や位置変更、下のバナーがなかったりmap使用だったりといくつかのバリエーションがあり。<br>
-また、通常スケジュールで配信される以外のものはまったく違うデザインだったりもする。
+・また、通常スケジュールで配信される以外のものはまったく違うデザインだったりもする。<br>
-<br>
+・非定型レイアウトのものや修正などは手作業で行う必要があるので部品の構成やコーディングのやり方は把握しておく必要があり。<br>
-ただし非定型レイアウトのものや修正などは手作業で行う必要があるので部品の構成やコーディングのやり方は把握しておく必要があり。<br>
-<br>
-Works上での置き場所は「001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\HTMLメール\[日付]」です。<br>
-<br>
 <div id="manual">
 ==部品の構成と仕組み==
@@ 19行目: / 15行目: @@
 リダイレクト用HTMLファイルは上部バナー用(banner.html)、下部バナー用(banner2.html)、ピックアップアイテム用(detail01～.html）から構成される。<br>
 全てのHTMLファイルと画像ファイルを高島屋本サーバ上(/link/mail/YYmmdd/)以下、たとえば2006年10月27日配信分であれば(/link/mail/061027/)以下に置く。実際の配信は高島屋さんがやります。<br>
-<br>
 ==コーディングの際の注意事項==
 配信用のHTMLファイルとサイト置き用のHTMLファイルで画像・リンクのパスの書き方が違ってくるので注意。<br>
-またWebメール(Hotmail、Yahooメール)などでCSSをフルに使ったレイアウトが乱れるので、
+またWebメール(Hotmail、Yahooメール)でレイアウトが乱れるので、CSSプロパティを使用することはは推奨できない。<br>
-一部のプロパティを使うことができない。またHTMLタグに関しても一部制限がある。JavaScriptは当然不可。<br>
+またHTMLタグに関しても一部制限がある。JavaScript、外部CSS読み込みは当然不可。<br>
 <div class="section">
 ===画像・ページリンクのパスについて===
-画像・ページリンクのパスについては以下のように指定してください。
+画像・ページリンクのパスについては以下のように指定してください。<strong>なおページリンクについては必ずtarget="_blank"で指定すること</strong>
-<strong>なおページリンクについては必ずtarget="_blank"で指定すること</strong>
 <div class="section">
 ====サイト置き用HTMLファイル====
-index.html
+<dl>
-画像に関しては同一フォルダ内への相対パス<br>
+<dt>index.html</dt>
-ページリンクに関しては絶対パスで記述。
+<dd>画像に関しては同一フォルダ内への相対パス<dd>
-<br>
+<dd>ページリンクに関しては絶対パス(http://www.takashimaya.co.jp/link/mail/YYmmdd/～.jpg)で記述。<dd>
+</dl>
 ====配信用HTMLファイル====
-index_mail.html
+<dl>
-画像は絶対パス(http://www.takashimaya.co.jp/link/mail/YYmmdd/～.jpg）で<br>
+<dt>index_mail.html</dt>
-ページリンクに関しても絶対パスで記述。<br>
+<dd>画像、リンク共に絶対パスで記述。<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はtableでもCSSでもどちらでも構いません。
 </div>
 <div class="section">
 ===使用不可のHTMLタグ・属性===
 ・外部CSSへのリンク(<link rel="stylesheet" href="～">）<br>
-・strong、emタグ(CSSでスタイルを指定してもボールド、イタリック体などになる)<br>
+・ul,li,dl,dt,dd,ol（webメールでpaddingがとられてしまうため）<br>
 ・（webメール配信用については）<head></head>タグ(CSSの記述は全て<body></body>内に記述)<br>
 （ただし、Gmailは<body></body>以下に記述しても効かない。またタグについているid名、class名も自動的に取り除くためインラインCSSでないとだめ。）<br>
@@ 79行目: / 81行目: @@
 日付のところを更新日に変える。<br>
 ）URLリンクは絶対パス、画像は相対パスに<br>
-）TABLEレイアウトの場合は特にIE・hotmailでの表示に注意。<br>
+）IE・hotmailでの表示に注意。<br>
 </div>
 </div>
@@ 85行目: / 87行目: @@
 ===リダイレクト用のHTMLファイルについて===
 アクセス解析をするためのHTMLファイルです。<br>
-配信用HTMLファイル、サイト置き用HTMLファイル中のリンクをクリックすると、一度このページを迂回した後にそれぞれのリンクに飛びます。<br>
+配信用HTMLファイル、サイト置き用HTMLファイル中の全てのリンクは、一度このページを迂回した後にそれぞれのリンクに飛びます。<br>
-ただしこのリダイレクト用HTMLファイルを使うのは上部バナー、下部バナー、基本構造は全て同じ。<br>
-このHTMLファイルに関してはJavaScriptとmetaタグで指定URLにリダイレクトします。<br>
 URLを記述する場所が3ヵ所、リダイレクト先のページタイトルを記述する場所が2ヵ所あるので注意。<br>
 あとindex.html、index_mail.htmlの該当箇所のalt、title属性の変更も忘れずに。<br>
@@ 186行目: / 186行目: @@
 ===index.htmlの更新===
 ）「お知らせ」の位置が定型じゃない場合は、適宜移動する。<br>
-　一行のみリストタグでくくってあります。複数行の場合はulまたはliを増やして整形してください。<br>
+　一行のみTDタグでくくってあります。複数行の場合はTRまたはTDを増やして整形してください。<br>
 <div class="html-source">
 <pre>
 <!--information-->
 <h3><img src="ttl_information.gif" width="522" height="20" border="0" alt="お知らせ" title=""></h3>
-<div id="topInfo">
+<table width="522" border="0" cellpadding="0" cellspacing="0">
-<ul>
+<tr>
-<li>【会員限定キャンペーン】</li>
+<td>【会員限定キャンペーン】</td>
-<li>・<a href="" target="_blank">お買上げキャンペーン！</a></li>
+</tr>
-</ul>
+<tr>
-</div>
+<td>・<a href="" target="_blank">お買上げキャンペーン！</a></td>
+</tr>
+</table>
 <!--/information/-->
 </pre>
 </div>
-）空pタグや空divがあれば消す。<br>
+）空タグがあれば消す。<br>
 ）更新したリダイレクトページの番号に合わせ、リンクを修正。<br>
 ）リンク先URLは絶対パスにする。画像は相対でOK。<br>
@@ 216行目: / 218行目: @@
 </pre>
 ）<style type="text/css"></style>のCSS指定をまるごと<body>開始タグ直後に移動<br>
-）div id="header"内に以下を追加<br>
+）style終了直下に追加　「HTML形式が表示されない環境の方は～」のエリアのリンクパス変更(配信日の日付に)<br>
 <div class="html-source">
 <pre>
+<div id="header">
 <ul>
-<li><a href="" target="_blank">●HTML形式が表示されない環境の方はこちらからご確認ください。</a></li>
+<li><a href="http://www.takashimaya.co.jp/link/mail/080509/index.html" target="_blank">●HTML形式が表示されない環境の方はこちらからご確認ください。</a></li>
-<li><a href="" target="_blank">●HTMLメールが正しく表示されない方はこちらから＜HTMLメールのご案内＞をお読みください。</a></li>
+<li><a href="http://www.takashimaya.co.jp/shopping/guide/member/mail/index.html" target="_blank">●HTMLメールが正しく表示されない方はこちらから＜HTML形式メールについて＞をお読みください。</a></li>
 </ul>
+</div>
 </pre>
 </div>
-「HTML形式が表示されない環境の方は～」のエリアのリンクパス変更(配信日の日付に)<br>
 ）タブ、改行コードのみを削除<br>
 ）画像パスを絶対パスに変更<br>
@@ 236行目: / 239行目: @@
 index.htmlとindex_mail.htmlの両方を更新し、souce、サーバーに上げるのを忘れないこと<br>
 </div>
-==こまったときは==
-<dl>
-<dt>画像と画像の間にすき間が出来る（特にHotmail）</dt>
-<dd>imgのmargin,padding　を0に指定する。
-<br>vertical-align:top　を指定する。
-<br>line-heightの値変更はテキストが入る場合は非推奨。</dd>
-</dl>
-<br>
-…他、気づいたら更新。
 </div>
 [[コーディング]]
 [[案件別マニュアル]]

「HTMLメールコーディング」の版間の差分

2008年5月7日 (水) 13:01時点における版

目次

部品の構成と仕組み

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

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

サイト置き用HTMLファイル

配信用HTMLファイル

推奨タグ・プロパティ

使用不可のHTMLタグ・属性

使用不可のcssプロパティ

手作業でのコーディング

index.html

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

HTMLメール作成君使用方法

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

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

index.htmlの更新

index_mail.htmlの更新

案内メニュー

「HTMLメールコーディング」の版間の差分

2008年5月7日 (水) 13:01時点における版

部品の構成と仕組み

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

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

サイト置き用HTMLファイル

配信用HTMLファイル

推奨タグ・プロパティ

使用不可のHTMLタグ・属性

使用不可のcssプロパティ

手作業でのコーディング

index.html

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

HTMLメール作成君使用方法

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

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

index.htmlの更新

index_mail.htmlの更新

案内メニュー

検索