HTMLmail guideline responsive 20180312

(1)

日経

ID

ゲ

ングメ

ル

HTML

版

制作ガ

ラ

ン

2018

年

1 月

[0213]

(2)

1. ン

ン対応

HTML

メ

い

- p3

2. HTML

メ

基本

い

p4

3. 制作見本

-1

p5

4. 制作見本

-2

p6

5. 制作見本

-3

p7

6. 入稿時注意

p8

7. 査閲確認

p9

8. 選定

-1

p10

9. 選定

-2

p11

不具合

ン編

1. Case1.

黒外枠表示

い

p12

2. Case2.

画像左寄

p13, p14

3. Case3.

外枠小く

p15

4. Case4.

空白

発生

p16

5. Case5.

キ

左右

く

p17

6. Case6.

画像間白い

発生

p18, p19

7. Case7.

背景色機能

いい

p20, p21

8. Case8.

不要

発生

p22, p23

基本編

問い合わ先

p24

§

Appendex

(3)

1. スポン

イン対応メー

つい



スポン

イン対応関し

日経ID ンメ HTML版＠media Media Queries 使いンン対応い

為＠media 対応いいメンン対応出来予了承くい

＠media 対応いいメ場合ＰＣ環境意図表示不具合発生場合あ

実際 outlook(office365) ＰＣ環境閲覧際閲覧時ウう現象確認

他メ同様現象発生可能性あ予了承くい

※ @media メび横幅高色メ特性用い適用範囲制御目的ンン

対応必要構文

基本編

日経ID ンメ HTML版下記環境表示確認行い下記表示確認環境以外メ表示不具合発生場

合保証い了承くい PC環境 Webメ Internet Explorer/Chrome/Firefox 最新版表示確認

PC環境

Outlook(2016) Outlook(office365) Gmail

Thunderbird

※ナutョリリユィリffiマe3ケグイ関

ＰＣ環境閲覧時ウ現象確認い

ン環境

Android Mail iOS Mail

Gmail Android ＆ iOS

(4)

2.HTML

メー

基本ー

つい



HTML

メー

基本構成

HTMLメ制作際ウ制作くい

通常 div要素等用い文章作処理行いウ下記３要素中心利用作

 table要素

 tr要素

 td要素

※ミiv要素使用制作メ崩や不要発生う可能性高い推奨



スイ

記述方法

Media Queries 関 CSS head要素内指定箇所記述い原稿内キ装飾関わ CSS ンン記述くい

※ heボミ要素内 style要素書込一部メ再現事い為

外部 CSSやJavaScript等読込方法禁止

ンン CSS 記述下記記入例う各要素内 style属性書込形式

記入例

※CSS3 記述再現メ少い推奨



ン

ー

基本情報

ン原稿規定従い PC表示横幅640px固定

制作際使用内部ンンや画像 PC環境ウ必横幅640px以内収う設定くい

※横幅640px 超え場合外ンン出い

ンン対応場合ン設定いン変更や追加禁止

(5)

3. 制作見本

-1

当箇所

<tr>

main area

</td> </tr>



本番コンン

ー

記入箇所つい

制作いく際必ン内記載い下記 main area 箇所記述くい

指定箇所及び原稿内容関記述いう願いい

※指定箇所以外記述ン崩い

基本編



CSS

記入箇所つい

Media Queries 関 CSS <head>内指定箇所下記赤枠内記述くい ※上記以外箇所原稿ン関記述為

変更いう願い致原稿内キ等装飾関 CSS ン <body> 内 main area 内記述原稿各内容対

ンン記述くい

/* CLIENT-SPECIFIC STYLES */

body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */

<!– mainarea CSS start-->

<!– mainarea CSS end-->

記入例

(6)

4. 制作見本

-2

記入例

</table>



ー

セ

隙間を

限少くす

メセ余分空白付与いう現象発生い

うい現象限回避下記記入例参考うえ table要素属性記述くい

基本編



ー

イアウ

調整方法

tr要素 td要素 margin 効い必 padding 使用調整くい

メ margin : 0 auto; 再現い存在 padding 使用中央揃えう制作くい

当箇所

(7)

5. 制作見本

-3

記入例

</table>



ー

セ

隙間を

限少くす

メセ余分空白付与いう現象発生い

うい現象限回避下記記入例参考うえ table要素属性記述くい



発生す隙間を消す

上記う記述場合メ余分空白発生い

空白際対策 table要素やtr要素背景色設定い場合必 td要素背景色設定くい

※背景色白色無色場合背景色設定行う必要い

当箇所

<tr>

<td colspan="2" width="552" background-color="#9e1a32"><a href="http://www.nikkei.co.jp/nikkei/f-pace/index.html" target="_blank"><img

src="http://ps.nikkei.co.jp/mail/20170317/btn_ftype.jpg" alt="

細を見 " width="552" height="22" border="0"

/></a></td> </tr>

(8)

6. 入稿時注意

必入稿前複数メ表示確認願いい … ウ確認際問題い場合メ

ウ大く崩い場合多々い

入稿いい下記メ確認行後問題け配信進

受信確認 • Gmail

• Outlook(2016)

• Outlook(office365)

※ＰＣ環境閲覧時ウ現象確認い • Thunderbird

• Android Mail

• iOS10 Mail

• Gmail App Android ＆ iOS

※Weポメ Internet Explorer Chrome Firefox 最新版表示確認

 入稿際ンン入稿連絡書あわ送

付くい

…入稿連絡書件名やン数確認際必須忘送付くい



確認す内容

入稿いく前必下記項目確認くい

(9)

7. 査閲確認

文章内日付や曜日間違い

い確認い

広告内容ン先内容一致

い

確認

後事実関係齟齬あ場合

指摘い

ン先

ン

いい確認い

問い合わ先

電話番号記載

い場合

受付時間

●：●●－■：■■ ○○曜除くいう受付対応時間記載

い

確認い

い場合

指摘い

世界一日本一

No.1

他最大最小関

表現

い

ン先

出典調査機関表示

い

確

認い

不動産物件

JV

ン

ンャ

以外

広告主名明記

い

確認い

純広告扱い

明

誤字脱字間違言葉使い

指摘い



査閲す際確認す内容

査閲前述原稿仕様加え下記項目確認い該当箇所い必精査入稿くい

(10)

6. 選定

-1

内あ下記赤字部分配信日置換えくい

<td><p style="font-size:11px; line-height:140%; color:#666; margin-bottom:5px;">メールが正しく表示さない場合こちら <a

href="http://ps.nikkei.co.jp/mail/YYYYMMDD/" target="_blank" style="color:#666;">http://ps.nikkei.co.jp/mail/YYYYMMDD/</a></p></td>

※201ゲ年4月20日場合 20170420



選択

3種類い下記中選びくい

• tieup_black.html →

• tieup_blue.html →

• tieup_whit.html →



内記述変更

(11)

7. 選定

-2

内あ下記赤字部分配信日置換えくい一部抜粋

<script language="JavaScript" src="http://ps.nikkei.co.jp/common/js/SiteCatalystTag_PSstd_jis.js"></script>

var prop1 = "pscojp-HTMLmail-YYYYMMDD"; var prop2 = "pscojp-HTMLmail-YYYYMMDD"; </script>

src="http://parts.nikkei.co.jp/parts/SC2/ps/s_codeDSpscojp.js"></script> <script language="JavaScript"

src="http://parts.nikkei.co.jp/parts/SC2/s_cDS.js"></script> <script language="JavaScript">

<!--

if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'¥!-'+'-') //--></script>

<a href="http://www.omniture.com" title="Web Analytics"><img src="http://nikkei.112.2o7.net/b/ss/nikkeicojpdsmstallprod,nikkeicojpdspsprod/1/H.9--NS/0"

height="1" width="1" border="0" alt="" /></a> </noscript>

※201ゲ年4月20日場合 20170420



内記述変更

(12)

1.Case1.

黒外枠表示

い

修正前

修正後



事例内容

メ表示際画面中部下部け黒外枠表示



対応方法

table要素背景色指定い

右記う背景色指定い

※一番外側あ table要素背景色指定

内側あ要素背景色同

限い必背景色指定

うくい

修正前 修正後

(13)

2.Case2.

画像左寄せ

-1

修正前

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="color:#fff; background:#082749; font-size:12px; line-height:1.8;"> <td style="vertical-align:top;font-family:'HGGothicM', 'HGSゴシックM',

Arial;">

<p><img src="img/img1.jpg"

style="vertical-align:bottom;float:right;margin: 0 0 20px 20px;"><strong>日経自動車

イノベーション</strong><br>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</td> </table>



事例内容

日経自動車ノン部分本来キ左寄画像右寄画像左寄



対応方法

ウ手法使わキ画像並いウ構成変更い

修正前

(14)

2.Case2.

画像左寄せ

-2

修正後 修正後

<td style="vertical-align:top;font-family:'HGGothicM', 'HGSゴシックM',

Arial;">

<p><strong>日経自動車イノベーション</strong><br>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</td>

</td> </tr> </table>

(15)

3.Case3.

外枠小く

修正前 <td>

<a

href="http://www.nikkei.co.jp/nikkei/jp/ja/index/stay-in-touch/subscribe.html" target="_blank" style="display:block; color:#fff; background:#082749; padding:8px 20px; decoration:none; text-align:center;font-size:14px;">登録す </a>

</p> </td>



事例内容

右下登録箇所い紺色外枠小く



対応方法

p要素高横幅指定い表現い table要素構成変更高横幅指定い

ウ範囲指定い場合必 table要素 tr要素 td要素い指定くい

ン付いいン等可能限画像制作いう願いいメ仕様左右い不具合発生最小限抑え

修正後

<tr>

<a

href="http://www.nikkei.co.jp/nikkei/jp/ja/index/stay-in-touch/subscribe.html" target="_blank" style="display:block; color:#fff; background:#082749; padding:8px 20px; decoration:none; text-align:center;font-size:14px;">登録す </a></td>

</tr> </table>

(16)

4.Case4.

空白スペース発生

修正前

<a

href="http://www.nikkei.co.jp/nikkei/jp/ja/index/shopping-tools/services/latest-campaign/20160704.html" target="_blank"><img src="img/img_mv.jpg" style="vertical-align:bottom;width:100%;"></a> </td>



事例内容

今新型車種キい上部画像間空白



対応方法

td要素背景色指定い背景色指定い

※一番外側あ table要素背景色指定内側あ要素背景色同限い必背景色指定う願

いい

修正後

<a

href="http://www.nikkei.co.jp/nikkei/jp/ja/index/shopping-tools/services/latest-campaign/20160704.html" target="_blank"><img src="http://ps.nikkei.co.jp/mail/20160819/img_mv.jpg" style="vertical-align:bottom;width:100%;"></a>

</td>

白い帯状部分余分空白

(17)

5. Case5.

キス

左右スペース

く

修正前 <tr>

<p style="margin:0; font-size:12px">テキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</td> </tr>



事例内容

キ部分左右無い状態表示



対応方法

td要素内 style属性指定い padding 外側 table要素効いい padding 打消い必要 padding-bottom 指定い

※ルボミミiラg 不要指定行わいくい

修正後 <tr>

<p style="margin:0; font-size:12px;font-family:'HGGothicM', 'HGSゴシックM',

Arial;">テキストテキストテキストテキストテキストテキストテキストテキストテ

キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</td> </tr>

(18)

6.Case6.

画像間白いスペース発生

-1

修正前

︙

</div>



事例内容

ウ使わ画像配置い画像間隙間発生



対応方法

広い範囲 div要素指定いウ構成変更範囲小分け背景黒色必要部分背景色指定画像間

隙間修正い

※本件うウ使用いい状態不具合発生場合大元構成自体変えけく背景色使う予想箇所調整えう事前ウ使用制作くい

修正前

白い帯状部分余分空白

(19)

修正後

<tr>

<tr>

<td style="padding: 0;"><img

src="http://ps.nikkei.co.jp/mail/20160901/img02.jpg" style="width:600px;height:300px;" border="0" alt=""></td> </tr>

</tbody> </table>

︙

6.Case6.

画像間白いスペース発生

-2

修正後

(20)

7.Case7.

背景色機能しいい

-1

修正前

<tr><td><a href="http://www.nikkei.co.jp/" target="_blank"><img src="dlogo1.gif" alt="" /></a></td><td><a

href="http://www.nikkei.co.jp/" target="_blank"><img src="dlogo2.gif" alt="" /></a></td></tr>

</table>

<p style="color:#fff;font-size:75%;">テキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>



事例内容

画像配置い箇所背景色機能影響キ部分消え



対応方法

div要素使用背景色指定いウ構成変更 td要素背景色指定い

※ッTトデメ div要素 style属性効い場合あ推奨

修正前

(21)

修正後 <tr>

<a href="http://www.nikkei.co.jp/" target="_blank"><img

src="http://ps.nikkei.co.jp/mail/20161209/dlogo1.gif" alt="" style="border: 0px;display:block;" /></a></td><td><a href="http://www.nikkei.co.jp/" target="_blank"><img src="http://ps.nikkei.co.jp/mail/20161209/dlogo2.gif" alt="" style="border: 0px;display:block;" /></a>

</td> </tr> </table>

<p style="color:#fff;font-size:75%;">テキストテキストテキストテキストテキス

トテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</td> </tr>

7.Case7.

背景色機能しいい

-2

修正後

(22)

8.Case8.

不要スペース発生

-1



事例内容

赤いン箇所間不要



対応方法

修正下記工程順行い

1. 画像間隙間調整目的設置 spacer.gif 余分空白発生原因い記述削除い

2. Table要素背景色同赤色設定い

3. 本来白色あ赤色変化い

4. 新 table要素追加赤色部分白色戻

修正前

<tr>

<td colspan="2" width="552"><a

href="http://www.nikkei.co.jp/nikkei/f-pace/index.html" target="_blank"><img src="btn_ftype.jpg" alt=" 細を見 "

width="552" height="22" border="0" /></a></td> </tr>

<tr>

</tr>

︙

<tr>

</tr>

修正前

(23)

8.Case8.

不要スペース発生

-2

修正後

<tr>

<td colspan="2" width="552" background-color="#9e1a32"><a href="http://www.nikkei.co.jp/nikkei/f-pace/index.html" target="_blank"><img

src="http://ps.nikkei.co.jp/mail/20170317/btn_ftype.jpg" alt=" 細を見 "

width="552" height="22" border="0" /></a></td> </tr>

︙

</table> <table> <tr>

<td colspan="2" width="552" background-color="#fff"><img

src="http://ps.nikkei.co.jp/mail/20170317/spacer.gif" alt="" width="552" height="10" border="0" /></td>

</tr> </table>

削除

修正後

(24)

お問い合わせ先

他



メー

お問い合わせ先つい

E-mail: ds.html@nex.nikkei.co.jp



お電話

お問い合わせつい

TEL

：

03-6866-5568

平日

10 時～

18 時株式会社

ンン

※ ンン日本経済新聞社事業広告 ID 業務委託受け

(25)

ヘッ

とフッ

の選定

事業系

(26)

§

Appendix:

選定

-1



制作つい

事業系案件ン参考うえ制作いい

※横幅必 640px 制作くい



制作例

(27)

§

Appendix:

選定

-2

内あ下記赤字部分日本経済新聞社側記述変更不要

 部分記述

<td><p>メールが正しく表示さない場合こちら <a href="http://ps.nikkei.co.jp/mail/20170431/" target="_blank"

style="color:#666;">http://ps.nikkei.co.jp/mail/YYYYMMDD/</a></p></td>

 部分記述

<script language="JavaScript" src="http://ps.nikkei.co.jp/common/js/SiteCatalystTag_PSstd_jis.js"></script>

var prop1 = "pscojp-HTMLmail-YYYYMMDD"; var prop2 = "pscojp-HTMLmail-YYYYMMDD"; </script>

src="http://parts.nikkei.co.jp/parts/SC2/ps/s_codeDSpscojp.js"></script> <script language="JavaScript"

src="http://parts.nikkei.co.jp/parts/SC2/s_cDS.js"></script> <script language="JavaScript">

<!--

if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'¥!-'+'-') //--></script>

<a href="http://www.omniture.com" title="Web Analytics"><img src="http://nikkei.112.2o7.net/b/ss/nikkeicojpdsmstallprod,nikkeicojpdspsprod/1/H.9--NS/0"

height="1" width="1" border="0" alt="" /></a> </noscript>

HTMLmail guideline responsive 20180312

日経

ID

ゲ

ングメ

ル

HTML

版

制作ガ

ラ

ン

2018

年

1

月

[0213]

1.

ン

ン対応

HTML

メ

い

- p3

2. HTML

メ

基本

い

p4

3.

制作見本

-1

p5

4.

制作見本

-2

p6

5.

制作見本

-3

p7

6.

入稿時 注意

p8

7.

査閲確認

p9

8.

選定

-1

p10

9.

選定

-2

p11

目次

不具合

ン 編

1. Case1.

黒 外枠 表示

い

p12

2. Case2.

画像 左寄

p13, p14

3. Case3.

外枠 小 く

p15

4. Case4.

空白

発生

p16

5. Case5.

キ

左右

く

p17

6. Case6.

画像間 白い

発生

p18, p19

入稿時注意

ン編

黒外枠表示

画像左寄

外枠小く

画像間白い

背景色機能

いい

問い合わ先

イン対応関し

基本ー

スイ

本番コンン

記入箇所つい

記入箇所つい

限少くす