メルマガ内のスニペットのレスポンシブについて

@田中 佑騎 さん、こんにちは

当社はMarketoが用意している標準のEmail Templateを利用してないのですが、丁度、Starterとして用意されているTemplateのコードを眺めていたので、ご質問の点について探ってみました。(Skeletonのコードを読んでみた）。

>>ただ、バナーがレスポンシブ化されず、PC向けのサイズのままとなっております。

>>なお、ためしに、テキストベースのスニペットを利用した際はレスポンシブ化されております。

>>（また、スニペットを利用せず、メルマガ内にバナーを直接貼り付けた場合はレスポンシブ化されます）

そうですね。確かにこの現象は再現します。そして、Skeletonのコードを見ても、そうなる作りになってますね。なので挙動としては正しいです。

解決策ですが、恐らく最もわかりやすい手段は下記の通りだと思います。今回の場合、Skeletonのコードは一切触れずに、Snippetの編集だけで対策することにしています。

Email本体のコードを修正するには、しっかりコード全体を把握した上でないと、色々とリスクが伴うので。。。。それに、Snippet側だけの編集にするだけで編集そものもの最低限で済ませられます。

・操作手順

Snippetの編集をします。

１）画像を挿入ボタンを押す

２）挿入時、"Dimensions"の「高さ」の部分を空欄にする。
（恐らく自動的に画像の高さが数値で入りますが、それを消します）

３）HTML Source Editorを開く。

”HTML”ボタンを押して、HTML Source Editorを開きます。

４）HTMLソースを編集して<span>を挿入。

恐らく画像１つを入れただけであれば、<p>と<img......>があると思います。

その<p>と<img....>の間に

<span class="m_free-image">

と書き足してください。

さらに、..../>と</p>の間に

</span>

を書き足してください。

↓のような感じです。

これでSnippetを保存/Approveします。

あとは、SkeletonのTextの部分でSnippetを選んでくれればOKです。これでMobileでも画像の幅・高さが調整されて表示されると思います。

ただ、私もPreviewでしか動作をみていないので、実際にSample Emailを送信して動作を確認してみてください。

（実際送ってみたらおかしい。。。というは、よくある話なので・・・）。

○（おまけ）コードの技術的な解説

Emailなので、まず。。。。

からスタートですね。この時点で、恐らく普段、Webを担当してコードを書かれている人に相談しても、とても嫌な顔をされると思います。

全くモダンではない旧式のコード。XHTMLで始まるなんて。。。。そして、それに続く読みづらくて仕方がないtableによるレイアウト。

これだけで今どきのHTML(うーん、いまだと例えばHTML5にCSSでgridなレイアウトをしたり、またはbootstrap 4とかですかねぇ。。。）を読み書きしている人たちからすると、全くモチベーションが上がらないでしょうし、下手したらtableレイアウトを知らない人たちも結構いるかもしれませんねぇ。。。。（table以前に、frameとかの時代とか色々ありましたねぇ。。。。遠い目です）。もはや、この手のHTMLコーディングを解説した書籍も市販されてないですし。（何年か前の本ですが１冊だけあったと記憶してます）

とはいえ、Emailでは旧式コードで書かないと表示されない環境が多いので致し方ないところです。それと、LPと違ってJavaScriptを使えない（使うべきではない）というのも特徴ですね。

と、一旦そこを乗り切って、

前半の方のstyleで、↓のようにmediaで小さいスクリーンのときの振る舞いが書かれてます。

今回は画像なのでimgですが、

↓imgについて宣言してるところが、このくらいしかないんですね。classが m_free-image の中のimgに対して横幅を狭める指定をしてます。

↓で、さらに読み進めていくと、353行目が、imageを貼り付けるための領域として用意されている"module"になるのですが、ここではclassに先程のm_free-imageが適用されてます。なので、"Image"と名前がついているModuleに画像を挿入すると、レスポンシブな感じで画面幅に合わせて画像の幅も狭くなるような仕組みが適用されます。「Imageに画像をいれたときは問題なく画像幅が変化する。」というのは、このためです。

↓さらにその先、374行目に、次は"Text"のmoduleを宣言しているところが登場します。Snippetを置く領域として利用しようとしているModuleがこれです。ところが、このModuleには、classとして m_free-imageが適用されていません。なおこの<table>の下に、更に色々とtr, td, さらにtable。。などなど続きますが、どこにもm_free-imageは入っていません。そのため、<img>に対して幅を調整する仕組みが適用されないのです。MarketoのEmail Editor 2.0では、Snippetを適用できるのは、"Rich Text"として定義されているか、もしくは"Snippet"として宣言されているかに限られ、Imageとして宣言されているModuleにはSnippetを適用できないため、SkeletonのTemplateのままで利用するには、Rich Textの領域にSnippetを適用するしかできないのですが、このままではMobile時の画像サイズの自動調整がききません。

↓ということで、Snippetそのもののコードに<span class="m_free-image">を書いて、m_free-imageの動きを適用できるようにしてあげます。

そして、さらに画像を差し込むときに「高さ」をナシにしているのは、高さの値を書いていると、height="数字"という部分がimgの中に残ってしまいます。これをリセットするような処置がされないので、heightがautoになるように、高さの値をナシにしています。これをしないと、幅は狭まるが、高さは元のママという画像になってしまいます。

ちなみに、このsnippet。<p>が残ってしまうので、その<p>にからんで上下にmarginがついてしまいますが、そこはご愛嬌。。。。

また、そもそもTextの領域想定なので、これまた余計は余白が出たりする可能性もありますが、そこもご愛嬌。。。。

このあたりを完璧に仕上げたい。となると、あとはもうSkeletonのコードを編集して修正してあげることが必要となります。

今回はコードを極力触らない。というアプローチで解決を図りたかったので、このようにしています。

以上、ご参考までに。

（なお、HTML/CSS含め、私はコードを書くのが本職ではないので、予めご了承ください。）

-Yamada