相変わらずContact Form 7の深い沼にハマったままのヤマモトです。
HTMLの必要性
Contact Form 7でもらった問い合わせはメールでウェブサイトの所有者なり管理人に届くわけだが、その問い合わせメールを印刷して保管したいという話もチラホラあったりする。
いわゆるお問い合わせ的な内容なら「名前」「メールアドレス」「問い合わせ内容」くらいで項目数も少ないからテキストメールを普通に印刷すれば事足りるが、「会員登録」的な内容となると、「住所」「電話番号」に始まり以降そのサイト特有の項目がズラッと並んだりして、そもそもテキストメールでは視認性が悪いし印刷なんてしようものなら間延びしたものが数ページに渡って排出されて、見る気がおこらないトホホなものとなっちまうのよ。
と言うわけで、Contact Form 7からのメールをHTMLメールにして、視認性が良くかつ印刷しても「会員登録申込書」的に使えるものを目指すことに。
20年くらい前はHTMLメールなんて初心者か情弱が喜ぶだけの「百害あって一利なし」な代物だと思ってたのだが（笑）、気がつけばBtoC系の営業メールはほぼ全部HTMLになってるのな。
グーグル先生に相談したら、HTMLメールは令和の時代になってもなかなかの曲者で一筋縄では行かない模様。具体的にはメーラーごとに仕様がマチマチというだらしない理由だった。
ちなみにここから下はGmailでの話。グーグル先生によると日本で（ビジネス用途での調査だが）のメーラーシェアはGmailが38％でトップだそうな。次点はOutlookで35％。
HTMLメールへのCSSの当て方
CSS埋め込み形式でのGmail
上記サイトはとても参考になった。ほぼこれに基づいてHTMLメールのマークアップを施したところ、うまく行った。項目数が多くても大変見やすいレイアウトの会員登録申込書が出来上がった。
さて、では印刷した時にA4でどれくらいのページになるとか文字の大きさはどうかとか確認しようと印刷プレビューを見ると、、、、
な、なんじゃこりゃ～！
メーラーの本文表示と印刷プレビューがなんで違うデザインになっとるんじゃあ？
結局これはどういうことかと言うと、スタイルシート（CSS）が全部削除されてるのだ。
そもそもCSSの形式とは
この投稿を好んで読む人には釈迦に説法だろうが、そもそもスタイルシートには3種類の適用方法がある。
- 外部読み込み形式（CSS専用のファイルをリンクする方法）
- 埋め込み形式（HTMLドキュメントのhead内にまとめて配置する方法）
- インライン形式（HTMLドキュメントの各タグ内にいちいち記述する方法）
1が最も新しい形式で、3はCSSができた当初の最古の形式だ。今どきのウェブサイトは基本的に1の方式で作成するのだが、メーラーの場合は認識しないこともあるので、古めの2の方式が安全なんだとか。ということで、この会員登録申込書のHTMLメールは全部2の方式で書いたのだ。
するとどうだ、この体たらくヽ(`Д´)ﾉ
Gmailは、本文表示では2、つまり埋め込み形式に対応しているが、印刷の時はご丁寧にわざわざCSSを全部丁寧に削除なさる、という事のようだ。
何の意味があるのだ？
本文表示でもCSS無しになるならCSS解析機能が搭載されてないということで分かるのだが。。
CSSインライン形式でのGmail
でだ。試しに3のインライン形式にHTMLを修正してみた。一言で修正といったが、これめっちゃ大変なんだからな。入れ子入れ子の5重層くらいになってるテーブルの<table><tr><th><td>といった各タグにCSSをぜーーーーんぶ一個一個に書いていかにゃあならんのだからな。。
その結果。
うまく行った。
本文表示と同じデザインで印刷プレビューが見れた(*^^*)
結論
Gmailは、本文表示では埋め込み形式のCSSを認識できる。
しかし、印刷もするならインライン形式にすべし。埋め込み形式のCSSは印刷プレビューの時点で全部削除される！
ポチップ
コメント