メルマガ内のスニペットのレスポンシブについて | Community
Skip to main content
Level 1
August 31, 2018

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

  • August 31, 2018
  • 1 reply
  • 169 views

お世話になっております。TS工建の田中と申します。

標題の件について、ご質問があり、ご連絡させていただきました。

以前、メルマガ本文内の出し分けについては、

スニペットを活用する方法をご教示いただきました。

メルマガ本文に外部データを条件に応じて出し分けする方法

実際に、スニペットを作成し、

バナーの出し分けを実行してみたところ、うまくいきました。

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

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

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

設定の仕方などの問題もあるかもしれませんが、こちら解消の方法はございませんでしょうか?

※なお、設定の際は、既存テンプレートのSkeltonを利用し、モジュールのTextからスニペット置換を利用しております。

 Textしかスニペット置換がないですが、こちらは問題なかったでしょうか?

宜しくお願い申し上げます。

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Taishi_Yamada
Level 6
August 31, 2018

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

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

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

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

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

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

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

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

・操作手順

Snippetの編集をします。

1)画像を挿入ボタンを押す

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

3)HTML Source Editorを開く。

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

4)HTMLソースを編集して<span>を挿入。

恐らく画像1つを入れただけであれば、<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コーディングを解説した書籍も市販されてないですし。(何年か前の本ですが1冊だけあったと記憶してます)

とはいえ、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

田中_佑騎1
September 3, 2018

山田さん

先日のご回答につづき、本件のご回答ありがとうございます!

早速、ご教示いただいた内容で対応したところ、無事動きました!

おまけもありがとうございます。

おかげさまで、メルマガの運用工程も効率化が進められます。

引き続き、よろしくお願いいたします!

田中