初めてでも失敗しないメルマガコーディング
最近メルマガばかりやっているので、メルマガについてのあれこれ基本的な部分を共有していきます。レスポンシブなメルマガもあるみたいですが、今のところはテーブルレイアウトなメルマガのお話キーワードは「全部画像にしてしまえ」です。
- ざっくりとこんなこと気にしてるよって話
- 最近、コーディング始めた人は知らない前提条件の話
- テーブルレイアウトってどーするの？
- <td>にテキストを入れる
- <td>に画像を入れる
- <td>にリンク画像を入れる
- 余白を作るとき
- ぶっちゃけ一番簡単でミスしない方法
- 最後にサンプルのコード
1.ざっくりとこんなこと気にしているよって話
まず、ざっくりこんな感じに作ってるよっていうメルマガのコードはこちら
- こんなふうに見えるはず。
コードをみるとわかるのですが、とりあえず書いていることはこんなもん
- <td>にはaliignとvalignは絶対いれてるよ
- <img>にはとりあえずborder=”0″入れてるよ
- 左右の余白なんかも画像にしてしまっているよ
- テキストは極力つかわないようにしているよ
2.最近、コーディング始めた人は知らない前提条件の話
- HTML4.01 transitional だよ
- JIS(ISO-2022-JP)だよ
- マージンやパディングはうまく使えないことがあるらしい
- そもそもCSSもあまり使わない
- jsなんて動かない
- 画像は絶対パスじゃなきゃダメ
- メールツールによって見た目が変わりやすい
メルマガってどうやら古いままらしいマージンとかも使えないわけではないらしいんだけど、ツールごとでうまく表示されるか保証できないんだってさ。
そこで、一番安定して表示できる可能性が高いからテーブルレイアウトをするんだとか。
※テーブルレイアウトってのはサンプルコードのように全部テーブルの中に要素を入れること
3. テーブルレイアウトってどーするの？
表で枠を作ってその中に画像をおくそうすると表が崩れない限り、画像がずれたりしない！レイアウト崩れが起きにくい先駆者の知恵なんです。
余白用のテーブルとコンテンツ用のテーブルにさらにテーブルを入れたりする。
<div>や<header>みたいな専用タグがなくなっただけで、感覚的には変わらないと思う。
ただただ行数が増えるのでミスしやすい上、出来上がった後のチェック漏れも起きやすいほど、同じタグの連続だから、コーディングになれた人ならまだしも、学生時代にやっていて基礎はあります！程度だとミスりやすい。
実際めっちゃミスった！
じゃあ、テーブルはわかったので、主に書くコードについてに移りまーす。
4. <td>にテキストを入れる
これはメールの最初や最後によく使う、必要なのはalign=“”とvalign=“”かな、こんな感じで書く
※とりあえず、なんかあったらやだから書く
フォントサイズや色を変えたい時はこう
<tr><td width="380" align="left" valign="top"><font color="#ffffff">こんなふう</font></td></tr>
<tr><td width="380" align="left" valign="top" style="size:13px;color:#ffffff;">こんなふう</td></tr><font>かstyle=“”、フォントサイズとかのよく使うcssが表示されないってことはあんまりない。letter-spacingとかは怪しいから確認できないなら色とサイズにとどめておこう。
もっと色々変えたいなら画像にしてしまえ（基本理念）
5. <td>に画像を入れる
メイン、むしろこいつしかほぼしない気をつけることは画像にサイズ指定をしてもメール側で画像の元々のサイズに戻されるからtdにもしっかりとサイズを入れる。なんかあったらやだから※画像で余白を作るときなどのためですが、他の場合でもなんかあったらやだから書く
こんな感じ
<tr><td height="62" align="center" valign="top">
<img src="img/titletext.gif" width="640" height="62" alt="画像を入れるよ！" border="0"></td></tr>特に忘れては行けないのはtdにheightをいれましょう。
画像のsrcは絶対パスにしようね。相対パスじゃメールから画像にアクセスできないよ。
画像が表示されなかった時のためのaltを忘れてはいけません。今の時代全員表示させるだろって思うでしょうが、私の通ったある大学の研究室ではリッチテキスト表示をオフにするのが必須でした。とりあえず、何かあったらやだから書く
6.<td>にリンク画像を入れる
遷移先へのボタンはリンク、aタグ使うときは特にborder=“0”をimgタグにしっかりと入れること
こんな感じ
<tr><td height="100" align="center" valign="top" ><a href="https://neguseweb.com/" target="_blank">
<img width="640" height="100" style="vertical-align:top;" src="https://samppppppppppppppppple.com/img/header.gif" alt="こんなふうにするよ" border="0"></a>
</td></tr> リンク先(href)は絶対パスにしようね。相対パスじゃメールからアクセスできないよ。
他にもaタグやimgタグに色々と書いているのを面倒くさがって抜かないように。何かあったらやだから書こうさらにいうなら、imgタグ全てにborder=“0”入れておけばいいんじゃないかな！何かあっ（ry
7. 余白を作るとき
余白をマージンではなく画像やテキストでやる方法がこんな感じ
<tr>
<td height="20" align="left" valign="top" style="font-size:0px; line-height:1;">& nbsp;</td>
</tr>
<tr>
<td width="40" align="left" valign="top" style="font-size:0px; line-height:1;"><img src="img/space.gif" width="1" height="1" border="0"></td>
</tr>※& nbsp;はこのままだとただのスペースになっちゃうからスペース入れてるよ
テキストと画像の2パターンの方法があるよ。
テキストは横幅を指定しても崩れることがあるから横の余白には使わないようにね。
テキストも画像も大切なのはtdタグにもたせたい余白をしっかりと記載することtdに高さや幅を指定しておかないと、元の画像のサイズになってしまって余白がなくなる。tdの中を空にしてもいいのでは？ってなりそうだけど、とりあえず何か入れておくこと。
8.ぶっちゃけ一番簡単でミスしない方法
色々といってきましたが、一番ミスしない方法はシンプルです。画像の枚数を減らして、余白も画像で含んでしまう方法です。
「見た目が良くないじゃん」「画像を保存された時に余白があるとカッコ悪い」って思いがない人はこうした方が安定すると思うよ。調子乗ってテキストで作ると改行箇所が狂ってしまったりでレイアウト崩れにもなるし、画像のみで作ってしまえばいい。
どうしても必要なら、レイアウトは慎重に、２カラムにしたり、横に画像を並べるとかは絶対ダメ！！揃えのみで改行がどうなってもいい箇所でやろう。※送る相手の名前の箇所とか、自分の会社の住所とか無難で見栄えが重要にならないところ。フォントとかもいじらなくていいところ
ぶっちゃけ一枚の画像を送るだけで済むなら一番いいのかもしれない。そう思いながらコーディングしてます。
09.最後にサンプルのコード（画像のパスは絶対パスになってないから要注意）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title></title>
</head>
<body bgcolor="#FFFFFF"link="#0033CC" style="font-size:12px; text-align:center;" topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0">
<table bgcolor="#333333" width="100%" border="0" cellpadding="0" cellspacing="0" style="padding:30px 0; border-collapse:separate;">
<tr>
<td align="center" valign="top">
<!--================== content start ==================-->
<!-- ▼ここから ヘッダー▼ -->
<table bgcolor="#ffffff" width="640" border="0" cellspacing="0" cellpadding="0">
<tr><td height="100" align="center" valign="top" ><a href="https://neguseweb.com/" target="_blank">
<img width="640" height="100" style="vertical-align:top;" src="img/header.gif" alt="ヘッダーだよーーーーん" border="0"></a>
</td></tr>
</table>
<!-- ▲ここまで ヘッダー▲ -->
<!-- ▼メイン▼ -->
<table bgcolor="#ffffff" width="640" border="0" cellspacing="0" cellpadding="0">
<!-- ▼メインビジュアル▼ -->
<td height="320" align="center" valign="top">
<img src="img/main.gif" width="640" height="320" alt="メインビジュアルあるといいよね" border="0"></td>
</tr>
<!-- ▲メインビジュアル▲ -->
<!-- ▼コンテンツ▼ -->
<tr>
<td height="91" align="center" valign="top">
<img src="img/title.gif" width="640" height="91" alt="今回のオススメの記事" border="0">
</td>
</tr>
<tr>
<td height="62" align="center" valign="top">
<img src="img/titletext.gif" width="640" height="62" alt="こんなふうにオススメを一覧で出してリンクにするといいよね テキストも画像にしてしまえばカンタン！" border="0"></td>
</tr>
<tr>
<td height="198" align="center" valign="top"><a href="" target="_blank">
<img src="img/btn01.gif" width="640" height="198" alt="リは" border="0"></a>
</td>
</tr>
<tr>
<td height="20" align="left" valign="top" style="font-size:10px; line-height:1;"> </td>
</tr>
<tr>
<td height="198" align="center" valign="top"><a href="" target="_blank">
<img src="img/btn02.gif" width="640" height="198" alt="" border="0"></a>
</td>
</tr>
<!-- ▲コンテンツ▲ -->
<!-- ▼フッター▼ -->
<tr>
<td>
<table bgcolor="#41a6ce" width="640" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40" align="left" valign="top" style="font-size:0px; line-height:1;">
<img src="img/space.gif" width="1" height="1" border="0"></td>
<td width="580" align="left" valign="top" style="font-size:16px; line-height:2;">
<table width="580" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" align="left" valign="top" style="font-size:10px; line-height:1;"> </td>
</tr>
<tr>
<td width="380" align="left" valign="top"><font color="#ffffff">ツイッターのフォローもよろしくね！<br />ツイッターアカウント</font><a href="https://twitter.com/neguseweb" target="_blank">こちら</a>
</td>
<td width="200" align="right" valign="top"><a href="https://neguseweb.com/" target="_blank">
<img src="img/footer_logo.gif" width="169" height="67"></a></td>
</tr>
<tr>
<td height="20" align="left" valign="top" style="font-size:10px; line-height:1;"> </td>
</tr>
</table>
</td>
<td width="40" align="left" valign="top" style="font-size:0px; line-height:1;">
<img src="img/space.gif" width="1" height="1" border="0"></td>
</tr>
</table>
</tr>
<!-- ▲ヘッダー▲ -->
</table>
</td>
</tr>
</table>
</body>
</html>