[メルマガ]outlook2013以下でaタグにpaddingを効かせる方法

こんにちわこんばんわ、ちばです。

今日はこれとか

懐かしのテーブルコーディング時代


これとか

メルマガをらくらくコーディング! gulp-inline-css


に続いてメルマガのお話です。

aタグにpaddingが効かなかった件

メルマガコーディングをしているとボタンの扱いをどうするか悩むことがあると思います。

クリック範囲を広く取りたい、テキストは変更したいのでimgは使いたくない等です。

まぁそれだけであればaタグのdisplayをblockにしてpaddingを効かせればいいのですが、
displayを含めCSSをほとんどサポートしてないメーラーがあるのです。。。

そう。。。「outlook2013」です。。。

こちらのサイトに細かい対応状況が載っておりますが
https://www.campaignmonitor.com/css/

こんな状態です。

これじゃうまくaタグの上下にpaddingなんかつくわけない。。。

だがしかし、borderをつけることによって上下にpaddingが効くという事を知りました(原理はわかりません\(^o^)/)。

↓下記参考コード

  a {
    display: block; //モダンなメーラーではblockにできる
    padding: 9px 0; //borderがつくので合計10pxになるよう調整
    border: 1px solid #ccc;
    background: #ccc;
  }

これでtd以外にもpaddingを効かせることができるようになります。

まとめ

テンプレートとして使いまわす場合に、画像にするかしないかの差はすごく大きいと思います。

世のメルマガコーディングを頑張る人たちの助けに少しでもなれば嬉しいです。

Writer

chiba

ちば

北海道から上京してきました。
コーダー歴二年目入りましたヽ(゚∀。)ノ

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6303-9671

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。