メール編集に利用できるコンテンツ

メールを編集する上で、本文に追加できるコンテンツの操作方法をそれぞれ解説します。

テキスト

通常のテキストを入力するためのブロックです。テンプレートに予め含まれているほか、新しく追加することもできます。

予め含まれているテキストブロックの上でクリックすると、テキスト設定用のウィンドウが開きます。ここで必要に応じてテキストを修飾します。

選択したテキストを太字にする、文字色を変えるなど基本的な操作のほかには、以下が可能です。

図1:テキスト設定用のウィンドウ
図2:新規追加は画面右側から

見出しに変更する

テキストブロックは、デフォルトではすべて段落として設定されています。ある一文を見出しへ変更するには、該当の一文にカーソルを持って行き、設定ウィンドウにある「Paragraph」と書かれたドロップダウンリストをクリックして「Heading」を選びます(図3~4参照)

図3:Paragraph から Heading に変更してみよう
図4:カーソルのある文章が見出しに変わる

引用文・転載文として表示する

地のテキストと、引用・転載のテキストの表示方法を変えることができます。

引用してきたテキストへカーソルを移動させたら、テキスト設定ウィンドウのダブルクォーテーションのアイコンをクリックしてみましょう。

該当のテキストの左側に、縦方向のラインが入ります。

図5:引用文としたいテキストにカーソルを合わせ
ダブルクォーテーションのアイコンをクリック
図6:縦のラインが入り、引用文の表示方法に変わった

データを差し込む

読者の姓名やその日の日付を差し込むことができます。テンプレートにデフォルトで入っているテキストの冒頭を見てみましょう。このような表示があります。

[subscriber:firstname | default:subscriber],

これは、読者データから名を差し込む設定です。

テキスト設定ウィンドウの M とついたアイコンをクリックすると、差し込み用のコードを選ぶウィンドウが新たに開きます。必要な情報をクリックして追加します。

たとえば「メールアドレス」を選択すると、図9のようなコードが挿入されます。
購読者がメールを受け取った時、このコードが購読者のメールアドレスに置き換えられて表示されます。

図7:Mのアイコンをクリック
図8:差し込みたい内容を選ぶ
図9:「メールアドレス」を差し込む場合のコードが挿入された

画像

画像を追加するには、画像ブロックを使います。メール本文に追加するとメディアライブラリが開くので、画像の選択、またはアップロードを行いましょう。

画像の設定は、既に見てきたヘッダーのロゴ編集方法をご参照ください。

図10:画像ブロックの追加はここから
図11:必要な情報を入力して「完了」ボタンをクリック

ボタン

別のページにジャンプするためのボタンを設置することができます。
テンプレートにはサンプルのボタンが既に入っているので、こちらを編集してみましょう。これまでのブロック同様に、さらに追加することも可能です。

ボタンをクリックすると、画面右側にボタンに関する設定項目が表示されます。必要に応じて編集し、最後に下部の「完了」ボタンをクリックしましょう。

図12:必要項目を調整したら「完了」ボタンをお忘れなく

ラベル
ボタン上に表示されるテキストです。

リンク
ボタンをクリックした際のジャンプ先となるURLを設定します。

アラインメント
ボタンの位置をどこにするかを決めます。

テキスト
テキストの色、フォントの種類や大きさを設定します。

背景
ボタンの背景色を決めます。


ボタンを縁取る線の色と太さを決めます。

丸い角
ボタンの角をどれだけ丸くするかを設定します。

幅、高さ
ボタンの大きさを決めます。

全てのボタンにスタイルを適用する」ボタン:
メール上に複数のボタンがある場合、このボタンをクリックすると設定を揃えることができます。

ディバイダー

仕切り線を入れたいときに利用します。

ディバイダーを追加したら、追加されたブロックをクリックしてみましょう。画面右側にディバイダーに関する設定項目が表示されます。必要に応じて編集し「完了」ボタンをクリックします。

線の種類
実線、点線などから選びます。

仕切りの高さ
線の太さを決めます。

仕切りの色
線の色を決めます。

背景
線の背景色(ディバイダーブロックの背景色)を選びます。

すべての仕切りに適用」ボタン:
本文中に複数の仕切り線があった場合、このボタンをクリックすることでスタイルを揃えることができます。

図13:「ディバイダー」ブロック
図14:ディバイダーの設定項目

スペーサー

今回のメールマガジンに限らず、記事に余白を入れたい場合、改行だけ入れても反映されません。余白を入れるには「スペーサー」を使います。

スペーサーを追加したら、追加した場所をクリックしてみましょう。スペーサーを囲む枠に、高さを調節するボタンが表示されます(図16)ボタンをドラッグ&ドロップで動かし、高さを調節しましょう。

図15:「スペーサー」ブロック
図16:スペーサーの高さを調節する

ソーシャル

Twitter や Facebook といった SNS のアカウントを持っている場合、この「ソーシャル」というブロックを使ってアイコン付きのリンクを張ることができます。

ソーシャルのブロックを追加したら、追加した場所をクリックしてみましょう。画面右側にソーシャルに関する設定項目が表示されますので、必要に応じて設定していきます。

アラインメント
アイコンを並べる位置を設定します。

図17:「ソーシャル」ブロックの設定項目

設定するSNS:
デフォルトでは Facebook、Twitter が設定されています。アカウントがある場合はそれぞれ「リンク」欄に URL を指定します。

この2種類のほかにも以下のようなものが設定できます。

  • Google Plus
  • YouTube
  • Instagram
  • Pinterest
  • LinkedIn
  • ウェブサイト
  • メール

追加する場合は「別のソーシャルネットワークを追加する」ボタンをクリックします(図18)ドロップダウンから希望の内容を選びましょう。

不要なものがある場合は、それぞれの設定欄の右上にあるゴミ箱のアイコンをクリックして削除します。

アイコンの順番を変更するには、設定欄をドラッグ&ドロップで入れ替えましょう。

スタイル
アイコンのイメージを選択します。

設定が終わったら、最下部にある「完了」ボタンをクリックします。

図18:他のSNSを追加するには
「別のソーシャルネットワークを追加する」をクリック
図19:新しい設定欄が追加された
図20:ドロップダウンで任意のSNSを選ぶ
図21:設定終了後は「完了」ボタンのクリックをお忘れなく

投稿

「投稿」ブロックを使うと、サイト上に載せたお知らせや、製品情報を引用して載せることができます。

投稿ブロックを追加すると、画面右側に投稿に関する設定項目が表示されます。載せたい内容を選んで挿入します。


図22:「投稿」ブロック
図23:載せたい内容を選んで挿入しよう

お知らせ・技術関連情報を載せる

検索対象を「投稿」「発行済み」として載せたい記事を検索します。検索結果が下に表示されるので、該当の記事にチェックを入れて挿入します(図24)一度に複数の記事を選択することも可能です。

図24:投稿記事を選んで挿入

製品情報を載せる

検索対象を「製品情報」「発行済み」として載せたい製品情報を検索します。製品カテゴリーや製品タグを指定して検索することもできます(図25)

該当の製品情報にチェックを入れて挿入します。一度に複数の製品を選択して挿入することも可能です。

製品情報を載せる際、デフォルトでは抜粋文を載せることができません(2021年1月現在)

製品タイトルの下にテキストを追加して、抜粋文やメルマガでのアピール用コメントを適宜記載してご利用ください(図27)

図25:製品情報の検索例
図26:該当製品を選んで挿入する
図27:製品にテキストを追加しておこう

中級者向け:列を追加する

メルマガの配信、コンテンツの編集に慣れてきたら、メルマガの体裁を少し変更してみるのもいいかもしれません。

これまで編集してきたメルマガは、すべてのコンテンツが1列で構成されています。これを2列にしたり、1列の行と2列の行を組み合わせることもできます。

列を増やすには、画面右側の設定欄から「」を選択します。

列をどのようなレイアウトにするか選択肢が表示されるので、任意の選択肢を選び、ドラッグ&ドロップでメール本文に追加します。

図30では「2列」を追加しました。
それぞれの列に、これまでご紹介したコンテンツのブロックをドラッグ&ドロップで追加して編集します。

読者が見やすい体裁にすることを忘れずに編集しましょう。

図28:コンテンツと同様に「列」を選ぶ
図29:列のレイアウトの選択肢が表示される
図31:左の列にはテキストブロック、
右の列には画像ブロックを追加した例

中級者向け:スタイルの変更

先ほど見た「列」の下に「スタイル」という設定項目があります。ここではメルマガ全体に対する書式設定を行います。

図32:「スタイル」の設定項目

テキスト、見出し1~3
通常の段落や見出しで利用するフォントの種類、大きさ、文字色を決めます。

リンク
リンクを張った箇所のテキストの色、リンクに下線をつけるかどうかを決めます。下線は、つける場合にチェックを入れます。

テキストラインの高さ
段落における行の高さを決めます。行間をどのくらい空けるかと言い換えることもできます。

見出しラインの高さ
テキストライン同様に、見出しについても行の高さを決めることができます。

コンテンツの背景
メルマガに追加したコンテンツ(ヘッダー部、フッター部を除く)の背景色を設定します。

グローバルな背景
メルマガ本文の外の背景色を設定します。