めんどいからあんまりやらないでいいと思う。
要点
- <body>内を作るイメージでいい
- style要素で書いておけば問題ない、<style>で入れても消える
- 使えないスタイルは勝手に消える（box-shadowとか）
- 画像はサーバーにアップして絶対パスで指定する
- 包括的なstyleの初期化は諦めることも肝心
classが使えないから装飾がめっちゃだるい。
css出始めの頃みたいな、凝ると要素内の記述がすごいことになる。
やる
CF7のメールタブの下の方の「HTML 形式のメールを使用する」にチェックを入れる。
全体に背景色を付けたい場合
<body>をいじれないので、その中でラッピングする感じ。
<div style="background: #eee; padding: 40px 0;">
<div style="width: calc(100% - 40px); max-width: 600px; margin: 40px auto; background: #fff; border-radius: 8px;">
中身
</div>
</div>せっかく色を付けてもスマホとかのダークモードとかで上書きされて勝手に調整される。
とりあえずGmailではそう。
なので、「何が何でもこれで見せたい」を考えてる人にはしんどいかもしれない。
テキストエリアの処理
HTMLメール状態で困るのがテキストエリア。
通常のテキストメールだとCF7側で改行タグを自動で入れてくれるんだけど、HTMLメールだと何もしてくれない。
ソースコード的には改行されてるけど表示的に改行されてない状態で出力される。
だから<br>を挿入したいけど触りようがないし、nl2br()とかを使いたいならfunctions.phpとかからアプローチしなきゃいけない。
なので、<pre>を使う。
<pre>はタグ内の文字列の状態をそのまま出してくれるから、<br>を使わなくても改行できる。
<pre style="white-space: pre-wrap;">[sample_txtarea]</pre>ところで、初期状態の<pre>はブラウザ幅に依存しない。
記載内容に依存して<pre>の幅が決まるので、長文とかが入ってるとぶち抜いてしまう。
だからstyleでwhite-spaceを追加して対応する。
多分正攻法ではないのであまり推奨したくない。
つまるところ
<div>もいけるけど、ベースは<table>で組むのが良さげな気がする。
2000年代のLPみたいなね。
他所のDM見てもそんな感じ。
凝るほど損する感じがあるから、大体でやりましょう。
コメント