こんにちは、チチヤスヨーグルトばっかり食べているともよーんです。
（パッケージのチー坊のかわいさにやられました。）

今回はHTMLメールコーディングのoutlook2007へ背景画像を適応させる方法をご紹介します。
そうです、outlookは背景画像のプロパティが一切効かないのです。

どうしたものかと色々調べていましたらこんな解決法に出会いました。
「vmlという言語で画像を描画し、コンテンツを上に乗せて背景画像のように見せかける。」

さて、具体的な方法を紹介します。
まず、vmlを使うための下準備。htmlタグに次のように宣言を追加。
xmlns:v="urn:schemas-microsoft-com:vml"

次に、cssに1行追加。この二つでおまじないは完了。
v:* { behavior: url(#default#VML); display: inline-block; }

そして、body内への記述例です。
v:rectで画像を描画して、v:shapeで書いた文字列をcssのpositionプロパティを使ってその画像の上にぐいっと乗せます。

 

  



  

   

    

    
テキストテキスト
   
  


  
 

条件分分岐タグの中のmsoとは、micro soft officeの略だそうで、outlookの時にのみ適応、という意味かと思われます。
ポイントは、背景画像を適応させるエリアの一番外枠の幅・高さと画像のそれらをきっちり合わせることです。
隙間があけば連続してタイル状に埋められてしまいます。1pxのずれも許されません。すきあらばrepeatされます。
中の要素も他のメーラーでの表示と差がでないようにがっちりtableで組んでしまうとよいでしょう。
あとはひたすら調整・確認です。実験しながら、中の要素の位置をpositionで調整します。

■今回私が実験用に使ったメーラーはこちら
htmlベタ書きでメール本文を作成できます。
Gaucho Version 1.8

■技術の参考サイト
Applying background images to you email email newsletters

ところで、vmlって何なのでしょうか？
というわけで次回はvmlについて詳しくご紹介します。
ではでは！