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

2008年1月15日 (火) 22:08時点における版

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

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

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

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

定型レイアウトのものに関しては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～06.html）から構成される。
全てのHTMLファイルと画像ファイルを高島屋本サーバ上(/link/mail/YYmmdd/)以下、たとえば2006年10月27日配信分であれば(/link/mail/061027/)以下に置く。実際の配信は高島屋さんがやるのでこちらの作業はこれで終了。

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

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

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

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

配信用HTMLファイル

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

サイト置き用HTMLファイル

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

使用不可の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に注意。

リダイレクト用の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）画像はあらかじめ書き出しておいてください。画像ファイル名は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の更新

1）「お知らせ」の位置が定型じゃない場合は、適宜移動する。
　リストタグでくくる。・がいくつもある場合は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）ピックアップに、いちおしスウィーツやe-cosmeなど右側にリンクがある場合、

<td valign="top">
	<h5>◆リード</h5>
	<p><a href="detail～.html" target="_blank">商品名</a></p>
	<p class="desc">コピー。</p>
	<p class="link"><a href="detail～.html" target="_blank">→いちおしスウィーツへ</a></p>
</td>

と追加する。（クラス名：link）
4）更新したリダイレクトページの番号に合わせ、リンクを修正。
5）リンク先URLは絶対パスにする。画像は相対でOK。
6）ページ一番下、コピーライトが新しくなりました。

<p>Copyright（C）Takashimaya Co., Ltd.無断転載を禁じます。</p>

HTMLメール作成君で作成するとは前の形のままなので、↑新しいものに書き換えます。
7）「カスタマーセンターからのお知らせ」なども変わっている場合があるので、全体的によく確認する。
8）各ブラウザ・リンクチェック（IEは特に注意）

index_mail.htmlの更新

1）完成した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、サーバーに上げるのを忘れないこと

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

2008年1月15日 (火) 22:08時点における版

目次

部品の構成と仕組み

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

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

配信用HTMLファイル

サイト置き用HTMLファイル

使用不可のHTMLタグ・属性

使用不可のcssプロパティ

手作業でのコーディング

index.html

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

HTMLメール作成君使用方法

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

index.htmlの更新

index_mail.htmlの更新

案内メニュー

@@ 1行目: / 1行目: @@
-'''HTMLメール'''（えいちてぃーえむえるめーる）は、毎週金曜日に高島屋が配信しているメール。<br>
+'''HTMLメール'''（えいちてぃーえむえるめーる、通称使徒）は、毎週金曜日に高島屋が配信しているメール。<br>
+<br>
 過去配信分の一覧は[[タカシマヤHTMLメール配信一覧]]を参照。<br>
 [[画像:Htmlmail_061027_200px.jpg|right]]
 お歳暮、バレンタインデーなどの際にはそれ以外のスケジュールで配信されることもあり。<br>
 <br>
-基本的には、定型レイアウト（右のキャプチャ画像参照）だが、上部の緑で囲まれたあいさつ文がなかったり、下のバナーがなかったりといくつかのバリエーションがあり。また、通常スケジュールで配信される以外のものはまったく違うデザインだったりもする。
+基本的には、定型レイアウト（右のキャプチャ画像参照）だが、上部の緑で囲まれたあいさつ文がなかったり、下のバナーがなかったりといくつかのバリエーションがあり。<br>
+また、通常スケジュールで配信される以外のものはまったく違うデザインだったりもする。
 <br>
 <br>
-定型レイアウトのものに関しては[http://192.168.200.60:16080/kds_tko/akama/html/index.php HTMLメール作成君]を使って作成。ただし非定型レイアウトのものや修正などは手作業で行う必要があるので部品の構成やコーディングのやり方は把握しておく必要があり。
+定型レイアウトのものに関しては[http://192.168.200.60:16080/kds_tko/akama/html/index.php HTMLメール作成君]を使って作成。<br>
+ただし非定型レイアウトのものや修正などは手作業で行う必要があるので部品の構成やコーディングのやり方は把握しておく必要があり。<br>
-Works上での置き場所は「001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\HTMLメール」です。
+<br>
+Works上での置き場所は「001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\HTMLメール」です。<br>
+<br>
 <div id="manual">
 ==部品の構成と仕組み==
 配信用のHTMLファイル(index_mail.html)とそれを見ることができない人のためのサイト置き用HTMLファイル(index.html)、アクセス解析をするためのリダイレクト用HTMLファイル、同一フォルダ内に置く画像ファイルから構成される。<br>
 リダイレクト用HTMLファイルは上部バナー用(banner.html)、下部バナー用(banner2.html)、ピックアップアイテム用(detail01～06.html）から構成される。<br>
-全てのHTMLファイルと画像ファイルを高島屋本サーバ上(/link/mail/YYmmdd/)以下、たとえば2006年10月27日配信分であれば(/link/mail/061027/)以下に置く。実際の配信は高島屋さんがやるのでこちらの作業はこれで終了。
+全てのHTMLファイルと画像ファイルを高島屋本サーバ上(/link/mail/YYmmdd/)以下、たとえば2006年10月27日配信分であれば(/link/mail/061027/)以下に置く。実際の配信は高島屋さんがやるのでこちらの作業はこれで終了。<br>
-<br>
 <br>
 ==コーディングの際の注意事項==
@@ 25行目: / 27行目: @@
 ===画像・ページリンクのパスについて===
 画像・ページリンクのパスについては以下のように指定してください。
-<strong>なおページリンクについては必ずtarget="_blank"で指定すること</strong>。
+<strong>なおページリンクについては必ずtarget="_blank"で指定すること</strong>
 <div class="section">
 ====配信用HTMLファイル====
+画像は絶対パス(http://www.takashimaya.co.jp/link/mail/YYmmdd/～.jpg）で<br>
+ページリンクに関しても絶対パスで記述。<br>
+<br>
+====サイト置き用HTMLファイル====
 画像に関しては同一フォルダ内への相対パス<br>
-ページリンクに関しては絶対パスで記述。
+ページリンクに関しては絶対パスで記述。<br>
-====サイト置き用HTMLファイル====
-画像は絶対パス(http://www.takashimaya.co.jp/link/mail/YYmmdd/～.jpg）で<br>
-ページリンクも絶対パスで記述すること。
 </div>
 </div>
 <div class="section">
 ===使用不可のHTMLタグ・属性===
-*外部CSSへのリンク(<link rel="stylesheet" href="～">）
+*外部CSSへのリンク(<link rel="stylesheet" href="～">）<br>
-*strong、emタグ(CSSでスタイルを指定してもボールド、イタリック体などになる)
+*strong、emタグ(CSSでスタイルを指定してもボールド、イタリック体などになる)<br>
 *<head></head>タグ(CSSの記述は全て<body></body>内に記述)<br>
-（ただし、Gmailは<body></body>以下に記述しても効かない。またタグについているid名、class名も自動的に取り除くためインラインCSSでないとだめ。）
+（ただし、Gmailは<body></body>以下に記述しても効かない。またタグについているid名、class名も自動的に取り除くためインラインCSSでないとだめ。）<br>
-*bodyタグの属性すべて（bodyタグ自体がwebメールで取り除かれるため）
+*bodyタグの属性すべて（bodyタグ自体がwebメールで取り除かれるため）<br>
 </div>
 <div class="section">
 ===使用不可のcssプロパティ===
-*margin(Hotmailですべて無視される：代わりにpaddingを使用)
+*margin(Hotmailですべて無視される：代わりにpaddingを使用)<br>
-*フォントサイズの相対指定（ピクセル指定でないとウェブメールで表示が乱れる）
+*フォントサイズの相対指定（ピクセル指定でないとウェブメールで表示が乱れる）<br>
-*float及びclear(代わりにtableタグを使用)
+*float及びclear(代わりにtableタグを使用)<br>
-*background:url()による背景画像の指定。tableタグのbackground属性を使ったほうが無難。
+*background:url()による背景画像の指定。tableタグのbackground属性を使ったほうが無難。<br>
-*tableタグに対してcssでの背景色の指定。（Hotmailで背景色が消えるためtableタグのbgcolor属性を使う）
+*tableタグに対してcssでの背景色の指定。（Hotmailで背景色が消えるためtableタグのbgcolor属性を使う）<br>
-その他の情報は[http://www.xavierfrenette.com/articles/css-support-in-webmail/ CSSのサポート情報：Hotmail, Yahoo! Mail and Gmail](英文)を参考にして下さい。
+その他の情報は[http://www.xavierfrenette.com/articles/css-support-in-webmail/ CSSのサポート情報：Hotmail, Yahoo! Mail and Gmail](英文)を参考にして下さい。<br>
+</div>
+<div class="section">
 ===手作業でのコーディング===
-）フォルダ名を「日付6桁」に変更<br>
+季節ものなど、HTMLメール作成君では太刀打ちできないようなやつがたまに来ます。<br>
-）index.htmlをコピー → index_mail.htmlとする<br>
+これは手作業でコーディングすることになります。<br>
-■index.html に対して行うコト<br>
+<div class="section">
-）
+===index.html===
+）他の日付のフォルダから必要な画像ファイルを持ってくる（タカシマヤのロゴなど）<br>
 <div class="html-source">
 <pre>
-<ul>
+<div id="storeInfo">
-<li><a href="" target="_blank">●HTML形式が表示されない環境の方はこちらからご確認ください。</a></li>
+	<h3><span>■</span>タカシマヤ各店の情報</h3>
-<li><a href="" target="_blank">●HTMLメールが正しく表示されない方はこちらから＜HTMLメールのご案内＞をお読みください。</a></li>
+	<p class="event">全国のタカシマヤ各店のイベントや催しなど、<a href="http://www.takashimaya.co.jp/store/index.html" target="_blank">最寄りの店舗情報はこちらから</a></p>
-</ul>
+	<ul>
+		<li>※品数に限りがございますので、売切れの節はご容赦ください。</li>
+		<li>※価格は20○ 年○月○日現在のものであり、消費税を含む総額にて表示しております。</li>
+		<li>※予告なしに内容の変更をする場合がございます。あらかじめご了承ください。</li>
+	</ul>
+</div>
 </pre>
 </div>
-を削除
+日付のところを更新日に変える。<br>
-<br>
+）URLリンクは絶対パス、画像は相対パスに<br>
-■index_mail.html に対して行うコト<br>
+）TABLEレイアウトの場合は特にIEに注意。<br>
+</div>
-）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>
-）<style type="text/css"></style>のCSS指定を<body>開始タグ直後に移動<br>
-）「HTML形式が表示されない環境の方は～」のエリアのリンクパス変更(配信日の日付に)<br>
-）タブ、改行コードのみを削除<br>
-）画像パスを絶対パスに変更<br>
-）本サーバにアップ<br>
-）index_mail.htmlのソースを、HotmailとYahoo mailで検証
 </div>
 <div class="section">
 ===リダイレクト用のHTMLファイルについて===
 アクセス解析をするためのHTMLファイルです。<br>
-配信用HTMLファイル、サイト置き用HTMLファイル中のリンクをクリックすると、
+配信用HTMLファイル、サイト置き用HTMLファイル中のリンクをクリックすると、一度このページを迂回した後にそれぞれのリンクに飛びます。<br>
-一度このページを迂回した後にそれぞれのリンクに飛びます。<br>
+ただしこのリダイレクト用HTMLファイルを使うのは上部バナー、下部バナー、基本構造は全て同じ。<br>
-ただしこのリダイレクト用HTMLファイルを使うのは上部バナー、下部バナー、
+このHTMLファイルに関してはJavaScriptとmetaタグで指定URLにリダイレクトします。<br>
-基本構造は全て同じ。<br>
+URLを記述する場所が3ヵ所、リダイレクト先のページタイトルを記述する場所が2ヵ所あるので注意。<br>
-このHTMLファイルに関してはJavaScriptとmetaタグで指定URLに
+あとindex.html、index_mail.htmlの該当箇所のalt、title属性の変更も忘れずに。<br>
-リダイレクトします。URLを記述する場所が3ヵ所、リダイレクト先のページタイトルを記述する場所が2ヵ所あるので注意。<br>
-あとindex.html、index_mail.htmlの該当箇所のalt、title属性の変更も忘れずに。
 <div class="html-source">
 <pre>
@@ 121行目: / 116行目: @@
 </div>
-==HTMLメール作成君の使用方法==
+==HTMLメール作成君使用方法==
-.表示されているフォームにデータを入力して下さい。<br>
+）画像はあらかじめ書き出しておいてください。画像ファイル名はPSDにスライスが残っていると思うのでそれをそのまま使えばOKです。<br>
+「お知らせ」などはスライスしませんが、「今週のいちおし」は背景色が変わるのでスライスします。（ttl_recommend.gif）<br>
+<br>
+）表示されているフォームにデータを入力して下さい。<br>
 URLの指示はフォルダ内にExcelファイルがあってそこに書いてあります。<br>
 ただしよく間違っているので必ず一度確認してください。<br>
-ページが見つからないっていう他に全然違うページに飛んでるっていう罠もあるので注意。
+<em>（test、demoサーバーのURLを入力しても自動で直してくれるので大丈夫です。ただ要確認です）</em><br>
-.ボタンを押して2ページ目に進み、同じように入力してください。
+ページが見つからないっていう他に全然違うページに飛んでるっていう罠もあるので注意。<br>
+※PSDから文章をコピペする時に文章の頭と尻尾が抜け落ちやすいので、よく確認して下さい。<br>
+）2ページ目で指定されたURLにアクセスしてtitleタグの中身を拾ってきます。<br>
+そのままでは長すぎるので適当な長さにカットして使ってください。<br>
+ブランド名などの場合はジャンル名も入れたほうが良いです。<br>
+通販の商品は“【タカシマヤ通信販売】商品名”　がalt,titleになります。<br>
+※ピックアップの画像のalt属性とtitle属性の内容は共通のものにしています。<br>
+<br>
+）すべての作業が終わると生成したHTMLファイルのダウンロードのページが開きます。<br>
+その中にindex.html（サイト置き用）、index_mail.html（配信用）、banner.html（上部バナーリダイレクト用）、banner2.html（下部バナーリダイレクト用）、detail01～.html（各商品リダイレクト用）が入っています。<br>
+<br>
+<br>
+＞＞以降はエディタでの作業になります。<br>
+<br>
+<br>
-※リンク先にdemo.kds-service.comドメインが含まれていた場合自動的にtakashimaya.co.jpドメインに変換されます。
+<div class="section">
+===リダイレクトページの更新===
+リダイレクトページ→ banner～.html、detail01～.html<br>
+お知らせ部分などにテキストリンクがたまにありますが、それは基本的に直接リンクでリダイレクトページは作りません。<br>
+<br>
+）detailの番号が変わる場合があるので、その時はファイル名修正<br>
+）<title>～</title>内が空の場合はHTMLメール作成君2ページ目に入力したのと同じalt,titleを入れます。<br>
+　商品の場合はブランド＋商品名など<br>
+）新規作成の場合は他のページにならってURLを3箇所、title,alt、ファイル名を修正する。
+</div>
-※PSDから文章をコピペする時に文章の頭と尻尾が抜け落ちやすいので、よく確認して下さい。
+<div class="section">
+===index.htmlの更新===
+）「お知らせ」の位置が定型じゃない場合は、適宜移動する。<br>
+　リストタグでくくる。・がいくつもある場合はliを増やす。<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">
+	<ul>
+		<li>【会員限定キャンペーン】</li>
+		<li>・<a href="" target="_blank">お買上げキャンペーン！</a></li>
+	</ul>
+</div>
+<!--/information/-->
+</pre>
+</div>
+）空pタグや空divがあれば消す。<br>
+）ピックアップに、いちおしスウィーツやe-cosmeなど右側にリンクがある場合、<br>
+<div class="html-source">
+<pre>
+<td valign="top">
+	<h5>◆リード</h5>
+	<p><a href="detail～.html" target="_blank">商品名</a></p>
+	<p class="desc">コピー。</p>
+	<p class="link"><a href="detail～.html" target="_blank">→いちおしスウィーツへ</a></p>
+</td>
+</pre>
+</div>
+と追加する。（クラス名：link）<br>
+）更新したリダイレクトページの番号に合わせ、リンクを修正。<br>
+）リンク先URLは絶対パスにする。画像は相対でOK。<br>
+）ページ一番下、コピーライトが新しくなりました。<br>
+<div class="html-source">
+<pre>
+<p>Copyright（C）Takashimaya Co., Ltd.無断転載を禁じます。</p>
+</pre>
+</div>
+HTMLメール作成君で作成するとは前の形のままなので、↑新しいものに書き換えます。<br>
+）「カスタマーセンターからのお知らせ」なども変わっている場合があるので、全体的によく確認する。<br>
+）各ブラウザ・リンクチェック（IEは特に注意）
+</div>
-※ピックアップの画像のalt属性とtitle属性の内容は共通のものにしています。
+<div class="section">
-ページ目で指定されたURLにアクセスしてtitleタグの中身を拾ってきます。
+===index_mail.htmlの更新===
-そのままでは長すぎるので適当な長さにカットして使ってください。
+）完成したindex.htmlをコピー＆ペースト<br>
+）metaタグのcharset属性を「iso-2022-jp」に変更。<br>
-ピックアップアイテムの画像の場合はそれをalt・title属性とします。
+　※HTMLファイル自体のエンコーディングはShift_JISから変更しないこと<br>
-その他の画像についてはalt属性のみ別途指定してください。
+<pre class="html-source">
+<meta http-equiv="Content-Type" content="text/html;charset=iso-2022-jp">
-すべての作業が終わると生成したHTMLファイルのダウンロードのページが開きます。
+</pre>
-その中にindex.html（サイト置き用）、index_mail.html（配信用）、banner.html（上部バナーリダイレクト用）、 banner2.html（下部バナーリダイレクト用）、detail01～06.html（ピックアップアイテム リダイレクト用）が入っています。
+）<style type="text/css"></style>のCSS指定をまるごと<body>開始タグ直後に移動<br>
+）div id="header"内に以下を追加<br>
-画像はあらかじめ書き出しておいてください。画像ファイル名はPSDにスライスが残っていると思うのでそれをそのまま使えばOKです。
+<div class="html-source">
+<pre>
-デザインが大きく変更になった際には、使用しているテンプレートを変更する必要があります。
+<ul>
+<li><a href="" target="_blank">●HTML形式が表示されない環境の方はこちらからご確認ください。</a></li>
-/kds_tko/akama/html/template/ディレクトリ以下に4種類のテンプレートが入っているのでそれをいじってください。
+<li><a href="" target="_blank">●HTMLメールが正しく表示されない方はこちらから＜HTMLメールのご案内＞をお読みください。</a></li>
+</ul>
+</pre>
+</div>
+「HTML形式が表示されない環境の方は～」のエリアのリンクパス変更(配信日の日付に)<br>
+）タブ、改行コードのみを削除<br>
+）画像パスを絶対パスに変更<br>
+）今回のファイルを全て本サーバーにアップする<br>
+）ツール：「HTMLメール配信チェッカー」にindex_mail.htmlのソースをペースト、Outlook、Hotmail、Yahoo mailで検証
+</div>
+<br>
+<br>
+あとは提出後、何度か修正があったりします。<br>
+更新する箇所が多いとミスしがちになりますが、<br>
+index.htmlとindex_mail.htmlの両方を更新し、souce、サーバーに上げるのを忘れないこと<br>
+<br>
 </div>
 [[category:こーでぃんぐ|コーディング]]
 [[category:あんけんべつまにゅある|案件別マニュアル]]

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

2008年1月15日 (火) 22:08時点における版

部品の構成と仕組み

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

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

配信用HTMLファイル

サイト置き用HTMLファイル

使用不可のHTMLタグ・属性

使用不可のcssプロパティ

手作業でのコーディング

index.html

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

HTMLメール作成君使用方法

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

index.htmlの更新

index_mail.htmlの更新

案内メニュー

検索