サポートページ aero-right 行間

ドラッグ&ドロップエディタでブロック間の空白や区切り線を追加する方法

メールコンテンツの各セクションに空白や区切り線を挿入したり、ブロックや画像周囲の余白を調整したりすることで読みやすくスッキリしたメルマガデザインに仕上がります。 目次: 区切り線/スペースブロックを挿入する方法 ブロック周囲の余白を調整する方法 テキストブロックを使って空白を作成する方法 区切り線/スペースブロックを挿入する方法 区切り線/スペースブロックは、簡単に区切り線や余白を作りメールやランディングページを作成するのに大変便利な機能です。ブロックを挿入する方法は以下の通りです。 1. 左のブロックから「区切り線/スペースブロック」を選択し、挿入したいセクションにドラッグ&ドロップします。挿入後、左側に区切り線の設定画面が表示されます。 2. 区切り線はデフォルトでグレーの線が表示されますが、必要に応じて線のデザインや色、太さなどを変更することができます。また区切り線ブロックの背景色、上幅、下幅、及び左右の行間も変更可能です。 3. ブロックメニューの「保存&閉じる」をクリックして完了です。   <区切り線ブロックの詳細設定> 背景色 画面左の円をクリックし、色彩パレットから色を選択します。カラーコード(hex値)を使用する場合は、ボックス内にコードを入力してください。 幅 0〜99pxの範囲で、上幅と下幅を設定できます。 行間 緑のポインターをスライドし、0〜20pxの範囲で左右の行間を調整します。   線の種類 区切り線のデザインを選択し、幅の変更も可能です。色彩パレットから色を選択します。カラーコード(hex値)を使用する場合は、ボックス内にコードを入力してください。   区切り線の設定画面に戻るには、メール内に挿入された区切り線/スペースブロックをクリックすると左に設定画面が表示されます。 <おすすめのご利用方法> 区切り線は余白としても使用することができます。線の幅を0pxにし、無色にすることで綺麗ですっきりとしたデザインになります。 なお、カスタム区切り線の画像を使いたい場合は、区切り線/スペースブロックではなく、画像ブロックを使用します。 挿入した画像ブロックをクリックし、カスタム区切り線の画像をメールにドラッグ&ドロップします。 画像の挿入方法については以下のFAQをご参照ください。 関連FAQ:画像をメールに掲載する方法 また、メールのデザインにコラムを3つ使用している場合は、コラムに区切り線を挿入することができます。 ヘッダーとサブヘッダーの間に区切り線を使用すると、より読みやすくなります。また、各セクションの終わりやメールの最後に区切り線を使うこともできます。 ただし、メールコンテンツが一番重要ですので、区切り線を太くしすぎたり濃い色を使いすぎたりしないように注意しましょう。 トップに戻る ブロック周囲の余白を調整する方法 ブロック周りの余白を調整するには以下の手順に従ってください: 1. 調整したいブロックをクリックします。(ここでは例として画像ブロックを使用) 2. 左メニューの設定タブを選択します。 3. サイドの空白枠、または上下の空白枠の緑色のつまみを動かして調整を行います。 4. 「保存&閉じる」をクリックして完了です。 トップに戻る テキストブロックを使って空白を作成する方法 余白を作りたい場合は、メール本文にテキストブロックを挿入し、デフォルトの文章を削除するだけです。以下の手順に従ってください。 1. スペースを作りたい場所に「テキストブロック」をドロップします。 2. デフォルトで挿入されているテキストを削除します。 3. 画面左の設定タブより、サイドの空白枠、または上下の空白枠の緑色のつまみを動かしスペースの調整を行なってください。 4. 「保存&閉じる」をクリックして完了です。 また、Benchmark Emailでは無料テンプレートをたくさんご用意しております。簡単にクリエイティブなメールを作成することができます。テンプレートについては以下のFAQをご覧ください。 関連FAQ:Benchmark Emailのテンプレートを使ってメールを作成する方法 ドラッグ&ドロップエディタについてご不明な点がございましたら、こちらよりサポートへご連絡下さいませ。     >>「メール作成:編集操作」のまとめページに戻る

ドラッグ&ドロップエディタ よくある質問 8月 19, 2021

ドラッグ&ドロップエディタのコードを編集する際のテクニック集

ドラッグ&ドロップエディタにおいてHTMLコードを部分的に編集し、デザインの変更などを行う方法を解説しています。 「該当するブロックのコードを参照する」方法は以下のFAQにて確認しておいて下さい。 FAQ:ドラッグ&ドロップエディタで作成したメールのHTMLコードを参照できますか?   目次  リンクの色を変更する方法/リンクの下線を表示しない方法/アンカーリンクを付け加える方法  フォントの色を変更する方法/リンクの色を変更する方法  複数の画像を並行設置する方法   カスタムHTMLを利用する際に知っておくべきこと  HTMLを使ってメール内にコンタクトの名前を表示させる方法  自分で編集した項目名をメール編集中に使う方法  フィールド項目に登録されているURLを利用して、項目名にハイパーリンクを挿入させる方法  受信者ごとに異なる内容が表示されるメールを作成する方法  箇条書きテキストの色の変更方法  メールの編集がうまくいかない場合  行間の幅を調整する方法  テキストを上付き、下付きに変更する方法  特別な文字やシンボルを使用する方法  段落ごとに文字列を「右に揃える」「左に揃える」「中央に揃える」方法   リンクの色を変更する方法/リンクの下線を表示しない方法/アンカーリンクを付け加える方法 リンクの色を変更する方法 アップデートしたいURLを入力してください。 HTMLコードの<a href>タグをフォントタグで囲むか、タグのスタイル属性を変更してください。 色(#FF0000=red)、変更を行うと以下のようになります。 <font color=red><a href="xyz">mycompanyname.com</a></font> <a href>タグの中にスタイル属性を挿入する場合、以下のようになります <a href="xyz" style="color:#FF0000">mycompanyname.com</a> 保存、もしくは更新をクリック リンクの下線を表示しない方法 該当するリンクが含まれるブロックのHTMLコードを参照する。 先程の入力したURLが表示されているテキストを探してください。 以下例となります, http://www.benchmarkemail.com/ExtPricing. <a href="http://www.benchmarkemail.com/ExtPricing">Benchmark Email Pricing Plans</a> "text-decoration:none"をタグの最後に加えてください。 下記のようになります。 <a href="http://www.benchmarkemail.com/ExtPricing" style="text-decoration:none!important;">Benchmark Email Pricing Plans</a> 保存&閉じるをクリックします。 アンカーリンクを付け加える方法 アンカーを設置し表示したいブロックのHTMLコードを参照します。 Name要素をアンカーとして付け加えましょう。以下は一例です。 <a name="disc">This Week's Discounts</a> 保存&閉じるをクリックします。 ブロック編集が終了したら保存をクリックします。 次に、アンカーリンクを設置したいブロックのHTMLコードを参照します。 タグに#と先ほど設定した名前を加えて、以下例のようにアンカーリンクを作成します: <a href="#disc">discounts</a> 保存&閉じるをクリック。 ブロックの編集が終了したら保存をクリック。 すべての編集が終了したら画面上部の更新ボタンをクリックして保存してください。プレビュー画面を表示し、挿入したコードが機能しているのか確認を行ってください。 トップに戻る フォントの色を変更する方法/リンクの色を変更する方法   フォントの色を変更する方法 色を変更するブロックのHTMLコードを参照します。 変更を行う文章を探し、希望の色番号を入力してください。 以下の例では、「メール編集機能について」という文章の色を#fc6462と指定します。 <span style="color:#fc6462;">メール編集機能について</span>   リンクの色を変更する方法 ブロックのHTMLコードを参照します。 編集を行いたいURLを探してください。 タグ、色コードが入力されているスタイル属性に変更を加えましょう。 例:以下サンプル内の色コード(FF0000、red)を希望する色の名前に差し替える、または16進コードを入力してください。 mycompanyname.com 上記のコードをスタイルタグで囲います: <font color=red><a href="xyz" style="color:#FF0000">mycompanyname.com</a></font> もしくは以下のように挿入してください: <a href="xyz"><font color=red>mycompanyname.com</font></a> 「保存&閉じる」をクリックします。 ブロックの「保存」をクリックします。 トップに戻る 複数の画像を並行設置する方法 編集するテキストブロックをクリックし、編集可能な状態にします。 画面上部の編集メニューから、HTMLコード確認アイコンを選択してください。 下記のコードをコピーし、すでに表示されているコードに上書きしてください。 (この作業はブロック内のコンテンツに上書きされます。) <table width="100%"> <tr> <td> image 1 </td> <td> image 2 </td> <td> image 3 </td> </tr> </table> <td> image # </td>のコードが複数あることからお分かりいただけるかもしれませんが、これらのコードは3つの画像を挿入する枠の役割をします。 目的によって数を増やす、減らすを行ってください。 「保存&閉じる」ボタンをクリックします。 以下のようにimage1、image2、image3とセクションが用意されます。 Image1をクリックしハイライトしてください。 編集オプションより画像挿入アイコンをクリックします。 画像ギャラリーより任意の画像を選択してください。 挿入をクリックします。 必要に応じて画像のサイズを変更してください。(テンプレート内の最大幅は600となっております) image 2 とimage 3も上記の6から11までのステップを繰り返し行い、画像を挿入してください。 画像をそれぞれ選択し、中央寄せボタンを押してください。 保存をクリックして完了です。 トップに戻る カスタムHTMLを利用する際に知っておくべきこと コンテンツを挿入する場合、Spaceタグで行を空けるのではなくTableタグを利用してください。 メーラー、メールソフトではインライン記述以外のCSSが無効となってしまいます。このため、Benchmark Emailではメール内のCSSに関してはインラインのみのコーディングを行っていただいております。 MSワードなどの外部ソースからのテキスト、画像の参照は行わなず、直接ペーストも行わないでください。 代わりにNotepadへペーストし、そこから編集画面に入力してください。 メールの一番良いバランスはテキスト60%、画像40%となります。 不必要なタグの重複は削除してください。 スクリプト言語の書き込みはやめてください。 <p>タグの使用は控え、代替として<br>を使ってレイアウトの調整を行ってください。 迷惑メールと判断されるリスクが高いため、背景に画像を使用するのは控えてください。 600x800内でメールのデザインは行ってください。 トップに戻る HTMLを使ってメール内にコンタクトの名前を表示させる方法 デフォルトのパーソナライズ機能やグリーティング機能を使うのが難しい、条件に合わないなどといった場合はHTMLを使いましょう。 編集を始めるブロックを選択し、グリーティング用の言葉や個別の挨拶を入力してください。 画面上部の編集メニューから、HTMLボタンを選択してください。 グリーティングテキストを選択します。 次のコードを貼り付けしてください: [contact_attribute:firstname] 「保存&閉じる」ボタンをクリックします。 このコードは呼び起こすデータ(Firstname)などの情報がない限り表示されません。 コード[contact_attribute:firstname]の後ろにコンマ,を入力してください。 あとはほかのテキストを入力して完了となります。 「保存」ボタンをクリックします。 トップに戻る 自分で編集した項目名をメール編集に使う方法 パーソナライズ機能以外ではHTMLを編集することで代替が可能となります: 編集を行いたいブロックを選択します。 すでに入力されているデフォルトのテキストを削除します。 任意のテキストを入力してください。 ブロックのHTMLコードを参照して下さい。 テキストの前にカーソルを合わせ、表示したいコンタクト情報を入力してください。 テキストから一文字分離し、次のコードをコピー&ペーストしてください: [contact_attribute:FIELDLABEL] [contact_attribute:FIELDLABEL]内のFIEDLLABELを任意のフィールド項目名に変更してください。 (法人名、役職名、携帯電話など) 「保存&閉じる」ボタンをクリックします。 このコードは受信先で呼び起こすデータ(Firstname)などの情報がない限り表示されません。 先程のコード[contact_attribute:firstname]の後ろにコンマ,を入力し一文字間をあけてください。 残りの文章を入力してください。 「保存」ボタンをクリックします。 トップに戻る フィールド項目に登録されているURLを利用して、項目名にハイパーリンクを挿入させる方法 フィールド項目を挿入するブロックを選択します。 テキストを入力してください。 ブロックのHTMLコードを参照して下さい。 先程入力したテキスト後ろにカーソルを合わせて下さい。 最後の文字から一字開けて、以下のコードを挿入してください。(赤字に該当するフィールド項目名を入力してください): <a href="[contact_attribute:field name]" target="_blank"> [contact_attribute:field name] </a> 最初のfieldnameをURLが入力されているフィールド項目名に変更してください。 次のfieldnameをテキストとして表示される内容が登録されているフィールド項目名に変更してください。 トップに戻る 受信者ごとに異なる内容が表示されるメールを作成する方法 同じリスト内の購読者に異なった内容のメールを送信したい場合は、条件別コンテンツ表示タグを利用することで可能になります。例えば、関東にお住いの方には東京のイベ

テンプレート&メールエディタ 9月 15, 2021

ドラッグ&ドロップエディタでフォント・文字サイズ・行間を調整する方法は?

Benchmark Emailでは、ドラッグ&ドロップエディタで簡単に文字の編集をすることができます。フォントや色、文字のサイズを変更したり、行間の調整を行うことが可能です。 目次: フォント・色・文字サイズを変更する方法 行間を調整する方法 改行する方法 ブロックごとに文字列を「右に揃える」「左に揃える」「中央に揃える」方法 段落ごとに文字列を調整する方法     フォント・色・文字サイズを変更する方法 1. 編集したいブロックをクリックし、赤枠の(編集可能な)状態にします。 2. 編集を行いたいテキストを選択(ハイライト)します。 3. 画面上部の編集オプションにてテキストのフォーマット変更を行います。   <色を変更する方法> アイコンをクリック後、ご希望の色を選択し、「保存」ボタンをクリックします。   <フォントを変更する方法> フォントのドロップダウンメニューをクリックし、ご希望のフォントを選択します。   <文字のサイズを変更する方法> 数字のドロップダウンボックスをクリックし、お好きな文字のサイズを選択します。 なお、太字、イタリック、下線、取り消し線などをご利用になる際は、ステップ1〜3まで行って、画面上部に表示される各アイコンをクリックして編集をしてください。   <フォントについて> お好みのフォントでメールの作成は可能ですが、配信先で同じように表示されるには配信先の端末において同じフォントがインストールされている必要があります。なお、Benchmark Emailで採用しているフォントは以下の通りです: Hiragino Kaku Gothic Pro / MS Gothic / MS Mincho / Osaka / Arial / Arial Black / Arial Narrow / Baskerville / Comic Sans MS / Courier New / Garamond / Georgia / Helvetica / Impact / Lucia Grande / Palatino / Papyrus / Tahoma / Times New Roman / Trebuchet MS / Verdana / 標楷體 / 新細明體 / Sim Hei 注意1:新しいフォントはすべての端末において使用が保証されているものではありません。もし選択されたフォントがインストールされていない場合は、すでにインストール済みのフォントが代わりに表示されます。 注意2:画像やロゴ上のテキストについては、画像ファイルとしてそのまま表示されます。   トップに戻る     行間を調整する方法 エディタにて行間を調節したいテキストをハイライトし、画面左の「コンテンツ」タブ内、行間のドロップダウンメニューよりお好みの幅を選択します。   トップに戻る     改行する方法 段落内で改行を行いたい場合はShift+Enterを使用して下さい。 Return/Enterキーは新たな段落をスタートすることになり、改行とは表示が異なります。 ※HTMLコード上ではReturn/Enterキーは<p></p>に、Shift+Enterキーは<br>に相当します。     トップに戻る     ブロックごとに文字列を「右に揃える」「左に揃える」「中央に揃える」方法 画面上部の編集メニューよりクリックし適当なオプションを選択してください。   トップに戻る     段落ごとに文字列を調整する方法 同じブロック内で段落ごとに文字列の位置を変更するには、HTMLコードの編集が必要となります。以下のFAQをご覧ください。 FAQ:ドラッグ&ドロップエディタのコードを編集する際のテクニック集 または、揃える段落ごとにブロックを挿入することをお勧めします。 トップに戻る     ご注意:テキストブロックを編集する際に以下のように右下にTinyMCEロゴが表示されますが、配信されるメールには表示されることはありませんのでご安心ください。TinyMCEはドラッグ&ドロップの動作をより早く優れたものにするため、弊社が利用している第三者企業です。   ご不明な点がございましたら、サポートチームまでお問い合わせください。     >>「メール作成:編集操作」のまとめページに戻る

テンプレート&メールエディタ メール配信 9月 10, 2021