免責事項：Zendeskは、説明の目的でのみこの記事を提供しています。Zendeskでは、コードのサポートや保証はいたしません。また、ZendeskはJavaScript、jQuery、またはCSSなど他社技術のサポートは提供できません。問題がある場合は以下のコメント欄に投稿するか、オンラインで解決法を検索してください。

選択したカスタムフォントは、洋服と同じようにスタイルの主張をします。先端的で刺激的なもの、オシャレで落ち着いたもの、あるいはふざけたもの「comic sans」など色々です。最終的には、フォントはそれを選択したユーザーがどんな人で何を伝えたいのかをことを示すことになります。今週の粋なヒントで、メールテンプレートのフォントを変更してメッセージがいかに変わるか見てみましょう。

Screen_Shot_2014-07-28_at_8.34.38_AM.png

( 図1: 古臭いありがちなフォント)

 


変更後

Screen_Shot_2014-07-28_at_8.32.51_AM.png

(図2：洗練されたフォント)

 

この目標を実現するには、メールHTMLテンプレート内にあるコンテンツプレースホルダを編集して、デフォルトスタイルの配置を検索し書き直します。これを行うには、現在の{{コンテンツ}} プレースホルダを以下のどれかと置き換えてください。

{% if content contains "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;" %}

{{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;" | replace: "font-size: 14px;", "font-size: 30px;" | replace: "color:#2b2e2f;", "color:#333300;"}}

{% else %}

{{content}} {% endif %}

このテンプレートに関する情報

  • このステートメントは、デフォルトコンテンツにLucida Sans Unicode,Lucida Grandeなどが含まれている場合に実行します。
  • 実行するとフォントファミリー、フォントサイズや色が置き換えられます。
  • 実行しない場合は、ELSE​​​に進みその時点でデフォルト{{content}}を送信します。
  • 起動するにはIFステートメントが正しい必要があります。
  • 置き換えのプロセスについては目的のスタイルの後にデフォルトスタイルを入力します（例 replace: "color:default;"、"color:desired;")

デフォルトに置き換えるにはまずデフォルトの{{content}} プレースホルダを探してください。最も簡単な方法は、テストメールを自分自身に送信することです。この例ではGmail を使って説明しているのでGmail アカウントを持っている場合はわかりやすいと思います。

注意：デフォルトコンテンツは、メールHTMLテンプレートに表示されるデフォルトとは限りません。

{content}}プレースホルダを検索し置き換えるには

  1. 回答可能なテストチケット作成します。「コメントアップデートをリクエスタに通知」というトリガをアクティブにするテストチケットに回答します。あなたのGmailアカウントはZendesk Supportインスタンスからメールを受信します。
  2. メールアプリで、「元を表示する」を検索します。Gmailのおける設定は次の通りです。

    Show_Original.png
  3. 元のテキストで、Zendesk Supportが{{content}}のデフォルトとして使用したスタイルテキストを検索します。これは少々手間がかかる検索ですが、チケットのレスポンスに使ったキーワードやフレーズを応用して検索してみてください。イメージ 的には以下のようになります。

    Defaults.png

    検索した文字列は黄色です。デフォルトスタイルは緑で強調されています。
  4. これで変えたいデフォルトのコンテンツスタイルがわかったので、メールHTMLテンプレートのコンテンツを目的のものと置き換えることができます。HTMLテンプレートでコンテンツマークアップを見つけ、元のコンテンツの代わりに新しいコンテンツテンプレートを貼り付けます。次のスクリーンショットと同じようなものになるはずです。

    Screen_Shot_2014-07-28_at_7.58.06_AM.png

    フォーマットに留意して、デフォルトスタイルを目的のスタイルに置き換えます。( 置き換える部分: "color:default;"、 "color:desired;")この時点で、ステップ３で検索した情報をステップ４のデフォルト位置へコピーし貼り付けるのが簡単でしょう。例ではフォントデフォルトが"Lucida Sans Unicode, Lucida Grande, Tahoma, Verdana, sans-serif"を含み目的のフォントスタイルへ置き換えます。こちらでテンプレートについて詳しく説明しましょう。

    これは現在のフォントをしゃれたHelvicataに置き換えます。

    | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;"

    これでフォントサイズがかなり読みやすいものになります。

    | replace: "font-size: 14px;", "font-size: 30px;"

    これでフォントの色は素敵な落ち着いた茶色に変更されます。

    | replace: "color:#2b2e2f;", "color:#333300;"

    全てまとめると以下のようになります。

    {{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;" | replace: "font-size: 14px;", "font-size: 30px;" | replace: "color:#2b2e2f;", "color:#333300;"}}

    そしてこの変更を実行するすべてのステートメントです。

    {% if content contains "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;" %}

    {{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;" | replace: "font-size: 14px;", "font-size: 30px;" | replace: "color:#2b2e2f;", "color:#333300;"}}

    {% else %}

    {{content}} {% endif %}

    コンテンツプレースホルダをこれに置き換えると、私のメールはZendesk Supportデフォルトメールテンプレートではなく自分がカスタマイズしたフォント、色やサイズになります。メールテンプレートやメッセージの外観を完全に管理できるようになりました。管理する自由と共に責任も大きくなります。Papyrusを使ったメールを数多く見たくはないですね。

Powered by Zendesk