「HTMLメールコーディング」の版間の差分
編集の要約なし |
細編集の要約なし |
||
| 7行目: | 7行目: | ||
<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> | |||
==部品の構成と仕組み== | ==部品の構成と仕組み== | ||
配信用のHTMLファイル(index_mail.html)とそれを見ることができない人のためのサイト置き用HTMLファイル(index.html)、アクセス解析をするためのリダイレクト用HTMLファイル、同一フォルダ内に置く画像ファイルから構成される。<br> | 配信用のHTMLファイル(index_mail.html)とそれを見ることができない人のためのサイト置き用HTMLファイル(index.html)、アクセス解析をするためのリダイレクト用HTMLファイル、同一フォルダ内に置く画像ファイルから構成される。<br> | ||
リダイレクト用HTMLファイルは上部バナー用(banner.html)、下部バナー用(banner2.html)、ピックアップアイテム用(detail01～06.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> | |||
==コーディングの際の注意事項== | |||
配信用のHTMLファイルとサイト置き用のHTMLファイルで画像・リンクのパスの書き方が違ってくるので注意。<br> | |||
またWebメール(Hotmail、Yahooメール)などでCSSをフルに使ったレイアウトが乱れるので、 | |||
一部のプロパティを使うことができない。またHTMLタグに関しても一部制限がある。JavaScriptは当然不可。 | |||
===画像・ページリンクのパスについて=== | |||
画像・ページリンクのパスについては以下のように指定してください。 | |||
<strong>なおページリンクについては必ずtarget=_blankで指定すること</strong>。 | |||
====配信用HTMLファイル==== | |||
画像に関しては同一フォルダ内への相対パス<br> | |||
ページリンクに関しては絶対パスで記述。 | |||
====サイト置き用HTMLファイル==== | |||
画像は絶対パス(http://www.takashimaya.co.jp/link/mail/YYmmdd/～.jpg）で<br> | |||
ページリンクも絶対パスで記述すること。 | |||
===使用不可のHTMLタグ=== | ===使用不可のHTMLタグ=== | ||
*外部CSSへのリンク(<link rel="stylesheet" href="～"> | *外部CSSへのリンク(<link rel="stylesheet" href="～"> | ||
*emタグ(CSSでスタイルを指定してもイタリック体などになる) | *emタグ(CSSでスタイルを指定してもイタリック体などになる) | ||
*<head></head>タグ(CSSの記述は全て<body></body>内に記述) | *<head></head>タグ(CSSの記述は全て<body></body>内に記述) | ||
===使用不可のcssプロパティ=== | ===使用不可のcssプロパティ=== | ||
*margin(Hotmailですべて無視される：代わりにpaddingを使用) | *margin(Hotmailですべて無視される：代わりにpaddingを使用) | ||
*float及びclear(代わりにtableタグを使用) | *float及びclear(代わりにtableタグを使用) | ||
その他の情報は[http://www.xavierfrenette.com/articles/css-support-in-webmail/ CSSのサポート情報：Hotmail, Yahoo! Mail and Gmail](英文)を参考にして下さい。 | |||
===手作業でのコーディング=== | |||
■HTMLメール：最終工程 | |||
banner.html等のパスが絶対パスになっていることを確認 | |||
・index.html（サーバ置き用：ブラウザ閲覧用）<br> | |||
・index_mail.html（配信用）<br> | |||
の2ファイルを用意する作業を、下記手順に沿って行う。 | |||
<br> | |||
1）フォルダ名を「日付6桁」に変更<br> | |||
2）index.htmlをコピー → index_mail.htmlとする<br> | |||
■index.html に対して行うコト<br> | |||
3）<pre><ul class="top"></pre>を削除 ※ページ上部の「HTML形式が表示されない環境の方は～」のエリア<br> | |||
■index_mail.html に対して行うコト<br> | |||
4）文字コードを「iso-2022-jp」に変更<br> | |||
<pre><meta http-equiv="Content-Type" content="text/html;charset=iso-2022-jp"></pre><br> | |||
5）<style>のCSS指定を<body>配下に記述<br> | |||
6）「HTML形式が表示されない環境の方は～」のエリアのリンクパス変更<br> | |||
7）タブ、改行コードのみを削除<br> | |||
8）画像パスを絶対パスに変更<br> | |||
9）本サーバにアップ<br> | |||
10）index_mail.htmlのソースを、HotmailとYahoo mailで検証 | |||
<br> | <br> | ||
<br> | |||
==HTMLメール作成君の使用方法== | |||
1.表示されているフォームにデータを入力して下さい。<br> | |||
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種類のテンプレートが入っているのでそれをいじってください。 | |||
[[category:こーでぃんぐ|コーディング]] | |||
[[category:あんけんべつまにゅある|案件別マニュアル]] | |||
2007年2月5日 (月) 12:30時点における版
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="～">
- emタグ(CSSでスタイルを指定してもイタリック体などになる)
- <head></head>タグ(CSSの記述は全て<body></body>内に記述)
使用不可のcssプロパティ
- margin(Hotmailですべて無視される：代わりにpaddingを使用)
- float及びclear(代わりにtableタグを使用)
その他の情報はCSSのサポート情報：Hotmail, Yahoo! Mail and Gmail(英文)を参考にして下さい。
手作業でのコーディング
■HTMLメール：最終工程
banner.html等のパスが絶対パスになっていることを確認
・index.html（サーバ置き用：ブラウザ閲覧用）
・index_mail.html（配信用）
の2ファイルを用意する作業を、下記手順に沿って行う。
1）フォルダ名を「日付6桁」に変更
2）index.htmlをコピー → index_mail.htmlとする
■index.html に対して行うコト
3）
<ul class="top">
を削除 ※ページ上部の「HTML形式が表示されない環境の方は～」のエリア
■index_mail.html に対して行うコト
4）文字コードを「iso-2022-jp」に変更
<meta http-equiv="Content-Type" content="text/html;charset=iso-2022-jp">
5）<style>のCSS指定を<body>配下に記述
6）「HTML形式が表示されない環境の方は～」のエリアのリンクパス変更
7）タブ、改行コードのみを削除
8）画像パスを絶対パスに変更
9）本サーバにアップ
10）index_mail.htmlのソースを、HotmailとYahoo mailで検証
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種類のテンプレートが入っているのでそれをいじってください。