目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

スタイルで気を付けたい点*htmlメルマガ*

このエントリーをはてなブックマークに追加

こんにちは銀ねこです!
かなり遅ればせながら今年もよろしくお願いいたします!
去年の末はWindowsストアアプリを作ってよい経験が書き止めておきたいことが色々あったのですが、書きそびれてます。
まとまった時間が欲しい笑

とりあえずは最近ハマったことがあるので、今回はそれを忘れないうちに書いておきたいっ。

HTMLメルマガ作成時のハマりがちな罠と解決法についてメモしておきます!

HTMLメルマガのおさらい

実は以前HTMLのメルマガについてちょこっと書いたせいか、うちのブログに「HTMLメルマガ」検索した結果たどり着いた方が結構いらっしゃるみたいです。あまりHTMLメルマガについて書いてなくてごめんなさい…m-_-m。

HTMLメルマガは画像を差し込んだりできるので、テキストよりもより商品をアピールできるなど効果があります。
以前見かけた資料でも読み手からすると、やっぱりHTMLメルマガの方が読むというアンケート結果も。

興味のある方はぜひチャレンジしてほしいですね。

HTMLメルマガの作り方

HTMLメルマガを作るとき、タグはp、img、font、div、table、spanなどごく基本的なものしか使えないと思った方が良いです。どんなツールでメルマガ打つかにもよりますが、見出しタグ(f1など)などは使用できない事が多いです。


1.テーブルレイアウト…どのメーラーでもレイアウトを崩さないためにテーブルでがちがちに組むことをお勧めします。

2.インラインスタイル…CSSファイルは外部に置けないのはもちろん、<head>内に書けないと思っておいた方が良いです。フォントサイズや背景などは面倒ですがすべてインラインで書きます。
しかもレイアウトを崩さないようにできるだけすべてピクセル単位で設定してあげるとさらに◎

3.イメージは必ず代替文字を入れる…メーラーが画像表示しない設定になってたり、画像がエラーで読み込みされないことを想定して代替文字(alt)を入れます。たとえば、alt="ほっこりモヘアセーター ¥1990"など入れておくと画像が表示できなくても「ほっこりモヘアセーター ¥1990」は表示されるので何とか相手には伝わります。

▼例えばこんな感じ



HTMLメルマガサンプル

やっと本題。imgタグの初期値にハマりました

普通ページを作るとき、余白など初期値があるのでとっても邪魔になります。なのでまずは初期値をリセット、そして新たにCSSを上書きしていきます。
HTMLメルマガはインラインでしか組めないので、気を付けなければならないのにここにうっかりはまりました…。

上記みたいに「q」みたいにローマ字小文字でベースラインからはみ出す余白のことをディセンダーというらしいです。
なぜか知りませんがこのディセンダー、imgタグにも適用されているらしいです。おかげさまで イメージタグの下に変な余白ができてしまい、余白を削除するのにしばらくハマってしまいました。

ページを作るときは初期値はリセットして作るので、こういったときはなかなか気づきにくいです。
解決方法はvertical-alignをmiddleに設定するだけ。これで余分な余白は削除されます。




まとめ

こんなことでハマってしまうので初期値はタグごとにある程度知っとかないと少し反省しました。
特にHTMLメルマガを書くときはタグの初期値に気を付けましょう。

スポンサーサイト
  1. 2014/02/11(火) 11:17:47|
  2. メルマガ
  3. | トラックバック:0
  4. | コメント:0
<<IE8より前のブラウザでレスポンシブらせる時のメモ | ホーム | 1年を締めくくる言葉>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://gatoprateado.blog.fc2.com/tb.php/76-af3c2fd7
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。