メールテンプレートのヘッダーカスタマイズ | Community
Skip to main content
かずみ_稲葉
かずみ_稲葉
July 4, 2019

メールテンプレートのヘッダーカスタマイズ

  • July 4, 2019
  • 2 replies
  • 123 views

メールテンプレートのヘッダー内のSNSボタンを変えたいのですが、どのように変えるのでしょうか。

下記テンプレートでできなければ、他のおすすめのテンプレートをご紹介くださると幸いです。

よろしくお願いいたします。#メール #テンプレート #SNSボタン

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

2 replies

Taishi_Yamada
Taishi_Yamada
Level 6
July 4, 2019

@かずみ 稲葉 さん、こんにちは、

質問投稿ありがとうございます。

ヘッダー内のSNSボタンを変えたいのですが、どのように変えるのでしょうか。

EmailのAsset（Templateではなくて、実際に作り出したEmailそのもの）の編集画面で、その部分を削除するような手段がない場合は、Email Templateを直接編集しなければなりません。確かにこの部分は、Link先のURLは変更できるものの、アイコンの並びをかえたりアイコンそのものを削る・変更するは出来ないようですね。

Email Templateを直接変種ですが、コード(htmlのソースコード)を直接編集しなければならないのと、Email用のhtmlなのでWebのhtlmより難易度高いところです（Webのhtmlに比べ、Emailのhtmlは５倍は複雑で確認も大変です）。一見、うまくいったようでも、実はメールを閲覧する環境によって崩れていた。。。。なんてことは多々あるので要注意なところなのです（「素人さんお断り！！！」。。。みたいな領域の１つとも言えます）。

なので安易に踏み込むと罠にはまりやすいのでご注意を・・・。

なのですが、ちょうど、いま、私の手元でEmail Templateを編集する作業をしていたので、ついでに該当のTemplateを見てみました。（たまたまタイミングが良かったです）

↓あとえばですが、こういうことですよね。これは元のアイコン（５つ）から、２つ削ってます。

質問が「ボタンを変えたい」ということなので、

１）アイコンを削除したい（下記のように）

２）アイコンを追加したい（６つ目を足したい）

３）アイコンを変更したい（別のデザインにかえたい）

とあると思うのですが、それぞれ行うことが違います。

とりあえず、一番単純である「１）」について説明をしてみますが、示した例のように、２つ削りたい場合です。

まず、新しく作るTemplateとして１つ「Email Template」のアセットを新規で作ってください。

そこに、MarketoのStarterとして用意されているTemplateのコードを貼り付けて（コピーして）修正して使います。

コードの修正箇所ですが、599行目あたりに、該当のコードがあります。

↓ちょっとわかりずらいですが、該当部分を画像で貼り付けます。色がついてるのは私のPCでの環境なので気にしないでください（コードの文字の色に意味はありません。編集しやすいよう見やすく色分けされてるだけです）

で、赤く線をひいたところ、具体的には"<!--と書かれているところから、 </a>と書かれているところまでが、１つのボタンを示すエリアになってますから、そこを削除すると、いらないアイコンを消すことができます。

(このリンクは<a>タグで書かれてるので、その<a>タグを削除しますが、Outlookの場合、アイコンの間がくっついて見えてしまうので、それを離すために半角スペース文字２つを埋め込んでます。それが、下記の緑色のコードのところです。）

また、「３）アイコンを変更したい（別のデザインにかえたい）」ということであれば、上記の部分で「<img alt="Youtube Icon" src="http://templates.marketo.net/event2/3ico-youtube.png" 」と書かれた部分がありますね。この部分のうち

・alt="Youtube Icon"を、alt="SNS Name" に変更

・src="http://templates.marketo.net/event2/3ico-youtube.png"を、予め別途用意しておいた.pngファイルのURLに変更。

たとえば、src="http://example.com/file/icon-newsns.png" みたいな感じで。。。（URLは適当です）。

とコードを書き換えてください。

あと、pngファイルを予め用意しなければなりませんが、pngファイルの状態は、今使われているアイコンを参考に同じようにpngファイルを生成してみてください。

実際の今つかわれているiconのURLを直接たたけば、その画像が確認できます。↓たとえばこれですね。

http://templates.marketo.net/event2/3ico-youtube.png

pngファイルですが、白で書かれていて背景は透明になってますね。

以上、ご参考までに。

-Yamada

かずみ_稲葉
かずみ_稲葉Author
July 5, 2019

山田様

ご丁寧にご回答下さりありがとうございます。

恐れ入りますが、あまり新規で作成したことがなく・・

下記の部分のやり方を詳細を教えていただけますしょうか。

-------

まず、新しく作るTemplateとして１つ「Email Template」のアセットを新規で作ってください。

そこに、MarketoのStarterとして用意されているTemplateのコードを貼り付けて（コピーして）修正して使います。

-------

恐れ入りますがよろしくお願いいたします。

    Taishi_Yamada
    Taishi_Yamada
    Level 6
    July 5, 2019

    @かずみ 稲葉 さん、こんにちは、

    恐れ入りますが、あまり新規で作成したことがなく・・

    下記の部分のやり方を詳細を教えていただけますしょうか。

    了解です。

    実はいくつかの手段（手順）はあるのですが、今回の場合で一番カンタンな流れをご紹介します。

    １）普通にEmail Assetを、該当のTemplateを選んで１つ新規作成する。

    （New Email → Templateから今回のTemplateである”Lemon"を選択 → Email Assetの新規作成が完了）

    ２）作ったEmail AssetをEditする（編集画面を開く）

    ３）編集画面から、Email Actions >> Save as Template を選んで、新しく「Template」を作る。FolderやNameは、分かりやすいところのFolderを選び、また、Nameも分かりやすいものを付けてください。ここのFolderやNameは、後から変更することも可能です。

    ４）作成されたTemplateを、Design Studioから開く。上記の例でいうえば、Design Studio >> Email >> Templateのフォルダの下に、"JP - TEST - Limon Template"という名前のTemplateが出来上がっています。

    この手順で、MarketoのStarter Template(標準で用意されているTemplate）を、改造するためのTemplateを作ることができます。あとは、その作ったTemplateの改造をすすめるだけですね。

    ただ、一番最初に、手順５）として、

    ５）新たに作られたTemplateのコードを、別途、PC上で保存しておく。（オリジナルを保管しておくため）

    をオススメします。よく分からなくなったときに、また最初の状態から始めるためです。

    ↓４）で作られたTemplateの編集画面を開くと、こんな感じになると思います。いきなりコードが出てきてビックリするかもしれませんが、そういうものです。で、このコードを全部コピーして保存しておきます。

    より具体的には、Windowsなら、まず編集画面にマウスカーソルをあてておいて「CTRL+A」で全選択して、「CTRL+C」でコピーし、それを、別のアプリケーション（たとえばWindowsのメモ帳）に「CRTL+V」で貼り付ける。で、メモ帳で、そのテキストファイルを保存しておく。という流れですね。

    なお、実際のコードの編集作業は、このマルケトの画面上で行うのは非現実的です。見ての通り、実は１行が長いと画面に表示されません。また編集作業をするには、ちょっと編集に必要な機能が貧弱すぎます。なので、別のアプリケーション（＝エディタ）でコード修正作業をして、その編集したコードを、このマルケトの編集画面に全部はりつける（いまあるものを一旦けして、代わりに修正したコードを全部はる）。みたいな流れが現実的ですね。

    ちなみに「え。。。エディタって、何でしょうか？」ということであれば、それもまた追加でコメントしますのでお知らせください。

    -Yamada

    Taishi_Yamada
    Taishi_Yamada
    Level 6
    July 4, 2019

    そういえば、マルケトの公式サポートは、Email Templateの修正に対して、どこまでサポートしてもらえるんですかね？（Templateの修正は、サポート対象外かなと勝手に想像はしてましたが、もしかしてサポートしてくれる部分もあるのだろうか・・・。）

    Terms & ConditionsAccessibility statement

    Loading footer...