サポートページ aero-right ドラッグ&ドロップ

画像にリンクをつける方法

画像をクリックすると、ウェブページに遷移するように設定することができます。メール編集画面で、画像にリンクを挿入するだけです。手順は以下の通りです: 画像にリンク(URL)を挿入する方法 1. リンクを挿入したい画像をクリックし、左側の編集オプションから「リンクURL」をクリックします。 2. リンクURLの部分に遷移先のURLを記入し「挿入」ボタンをクリックします。ウェブサイトへのリンクの他、メールアドレス、電話番号へのリンクの挿入も可能です。 3. 画面上部のリンクアイコンが青くなっていれば無事リンク設定が完了したサインとなります。右隣のアイコンクリックでリンク設定の解除も可能です。 画像にPDFファイルをリンクする方法 1. メール作成画面にて画像をブロックに挿入します。画像ブロック、画像+キャプションブロックなどお好きなブロックを利用してください。その後画面左の編集オプションから「リンクURL」をクリックします。 2.  リンクの挿入ポップアップウィンドウが表示されたら、左下の「ファイルを添付」をクリックします。 3. ドキュメントライブラリウィンドウが開きます。すでにアップロードしてあるファイルを挿入する場合、目的のファイルの「挿入」ボタンをクリックします。新しくアップロードする場合にはウィンドウ上の「ファイルを追加」をクリックし、アップロードしてから「挿入」ボタンをクリックします。 ご不明な点がございましたら、サポートまでご連絡くださいませ。   >>「メール作成:編集操作」のまとめページに戻る

ドラッグ&ドロップエディタ 画像ギャラリー 2月 16, 2021

メールのセクション機能と各ブロックの説明

メール編集中に新しいセクションの追加やブロックの位置を変更することが可能です。セクション機能を使って新しいカラムを追加したり、ブロックを使用して画像、テキスト、またはボタンなどのコンテンツを挿入することができます。ドラッグ&ドロップエディタで簡単に素早くメールを編集し、購読者にとって魅力的なデザインに仕上げましょう! 目次: セクション  NEW 全体のスタイル ブロック セクション機能を活用したメルマガデザイン例 NEW 用語集(ブロックの設定タブについて) トラブルシューティング メール全体、セクションごと、ブロックごとに背景色を変えることはできますか? ブロックごとに背景画像を設定できますか? 複数のカラムを横並びに挿入した時にカラムに出来てしまう空白を埋めるには?       セクション   セクションは編集画面でメールを構成するのに使用します。コンテンツを分けたり、コンテンツブロックの箱として機能します。メールを編集しながら新しいセクションの追加や削除、または移動などが可能です。セクション毎に編集ができます。   セクションのご利用方法:上記画像の番号順にご説明します。 ① +プラスアイコン:5種類の異なったセクションが表示されますので、任意のセクションを選択します。メールに挿入するセクションの数に制限はありません。利用可能なセクションは以下の通りです。 1カラム 2カラム 3カラム 左サイドバー2コラム 右サイドバー2コラム ② 鉛筆アイコン:画面左にセクション設定が表示されます。全体またはカラム毎に背景色やボーダー(枠線)を選択することができます。 ブロックの外側をクリックすると、画面左にセクション設定を表示することができます。 各コンテンツブロックの編集はブロック設定で行うことが可能です。 ③上下の矢印アイコン:セクションの並べ替えが可能です。 プレヘッダーとフッターセクション以外は自由に上下の移動が可能です。ただし、プレヘッダーの上とフッターの下に他のセクションを移動することはできません。 購読リンクが挿入されているフッターブロックはメール内どこでも移動が可能ですが、購読者が配信停止や購読設定を変更しやすくするため、見つけやすいフッターセクションに配置することをお勧めしております。 ④ ゴミ箱アイコン:セクションを削除することができます。一度削除しますと、ブロックやデザインなど追加したコンテンツは全て削除され、元に戻すことはできませんのでご注意ください。完全に削除される前に確認のため、以下のポップアップ画面が表示されるようになっております。   トップに戻る     全体のスタイル   全体のスタイルよりメール全体の配色を選択することができます。また、背景色やボーダー(枠線)を追加することも可能です。 ①カラー設定 27種類の組み合わせからテーマに合ったお好きな配色をお選びください。選択した配色でセクションやブロックの色が指定されますが、変更することが可能です。 ②背景色 背景色をクリックすると左に円が表示されます。それをクリックし、カラーパレット(カラーバー)上でお好みの色をクリック、あるいはカラーコード(hex値)をボックス内に入力して背景色を1色お選びください。また、セクションやブロック毎に背景色を選択することも可能です。 ③背景設定 背景設定でフルサイズメール、または背景別メールを選択することができます。フルサイズメールには追加のスタイルオプションはございません。 背景別メールのオプションでは、以下を追加または変更することが可能です:  ボーダー(枠線) ボーダーの色(枠線の色)  ボーダーのサイズ(枠線の太さ) 角丸調整 プレヘッダー/フッターを含む ④カラム名表示・非表示ボタン 「カラム名表示」ボタンをクリックすると、メール内の全てのセクションを確認することができます。初期設定では非表示になっていますが、このボタンで表示・非表示の切り替えが可能です。また、全体のスタイルタブからブロックをクリックすると、ブロックの編集をすることができます。   トップに戻る   ブロック   セクションとは異なり、ブロックはデザイン要素や機能としてメールのコンテンツを挿入し、表示するのに使われます。例えば、ブロックにテキスト、画像、またはボタンを挿入することができます。各ブロックで異なったデザインの設定が可能です。 メールにブロックを挿入するには、任意のブロックをクリックしてセクションにドラッグします。 メールエディタでご利用可能なブロックは以下の通りです。 画像ブロック/画像カードブロック 画像キャプションブロック テキストブロック 動画ブロック 区切り線/スペースブロック ボタンブロック ソーシャルメディア/ソーシャルシェアブロック ナビゲーションバー パーミッションリマインダー eコマースブロック NEW     画像ブロック/画像カードブロック   Benchmark Emailアカウントの画像ギャラリーにすでにアップロードしている画像や、新たに画像をアップロードした上で、メール内に挿入する事が出来ます。 詳しくはこちら 画像ブロックはメール内に画像を挿入し、画像カードブロックは挿入した画像のすぐ近くに文章(テキスト)を入力する事が可能です。  左の写真は画像ブロック、右は画像カードブロックです。 どちらを使うべき? 「画像ブロック」はシンプルに画像のみを挿入したい場合に、 「画像カードブロック」は画像と一緒に説明を入れたい場合にお使いになれます。 「画像カードブロック」は、画像の場所を動かすと入力した説明文も一緒に移動するようになっています。 画像カードブロックの挿入方法についてはこちら、画像ブロックの挿入方法についてはこちらをご参照ください。 関連FAQ: 画像のサイズや色を編集する方法 画像ギャラリー/アップロード出来る画像について 画像URLの取得方法 画像ギャラリー内のストックフォトとは? 画像の削除方法   ブロック一覧メニューへ戻る   画像キャプションブロック   「画像キャプションブロック」は画像内にテキストを入れることが可能となり、画像カードブロックとの違いは、画像キャプションブロックにおいては入力するテキストの枠がなく、お好みでテキストの入力枠を編集する事が可能です。  下記、左側に「画像キャプションブロック」を、右側に「画像カードブロック」を設置しています。 画像キャプションブロックの挿入方法についてはこちらをご参照ください。   ブロック一覧メニューへ戻る   テキストブロック   テキストブロック/テキストボックスブロック メールにテキストブロックを挿入し、文字を入力することが出来ます。テキストを挿入したいところに、テキストブロックをドラッグしてください。初期設定の文章が埋め込まれていますので、ブロックをクリックし希望する文章に入れ替えます。 テキストブロック:メールレイアウトにテキストボックスが追加されます。 テキストボックスブロック:テキストボックスの周りにフレームが追加されます。 画像+テキスト: 画像にテキストを追加したい場合は、画像カードブロックまたは画像キャプションブロックをお使いください。 テキストブロックを使用する上で下記の注意点をご確認ください。 コピー&ペースト コピー&ペーストしたテキストをメールに挿入したい場合は、「テキスト形式で貼り付け」機能  を利用することをお勧めします。 通常のコピー&ペーストで文章を貼り付けるとコピー元の形式が反映されてしまい、以下のような問題が発生する場合があります。 レイアウトが崩れてしまう 思った通りの行間が反映されない ハイパーリンクを設定した際にテキストリンクのカラーが変更できない コピー&ペーストした文章をテキスト形式で貼付ける方法: テキストブロックをクリック 上部のメニューバーに表示される貼り付けアイコン をクリック(スクリーンのサイズによっては表示されないので、メニューのプルダウンメニューから選択してください) ポップアップ画面に表示されるボックス内にテキストを貼り付け、「挿入」ボタンをクリック 左パネル下の「保存&閉じる」ボタンをクリックして完了です。   ソースコード ソースコードを入力したい場合には、テキストボックス上でコードアイコン をクリックし、挿入してください。 もしコードアイコンがエディタ上に見つからない場合は、ツールバー右上の「メニュー」をクリックしてください。     ブロック一覧メニューへ戻る    テキストブロックの編集方法 テキストブロックをクリックすると、画面左に編集オプションが表示されます。 設定タブでは、背景色、サイド・上下の空白枠、テキストボックスブロックではボーダー(外枠)を設定することができます。 コンテンツタブでは、行間を調整したり、必要に応じてコラム数を変更できます。 他のテキストエディタと同様に、ここでも基本的なフォーマットを編集するツールをご用意しております。画面上部の編集バー(太字、斜線、下線、取り消し線、文字の色やサイズ)でお好きなフォーマットに変更してください。 配置オプション(左寄せ・中央寄せ・右寄せなど)を使用したり、段落番号または箇条書きを追加したりすることもできます。  また、リンクの挿入やアンカー、画像、動画、ドキュメントファイルを追加することができます。   このようなテキストブロックを使ってメールをパーソナライズ化することができます。詳しくは以下のFAQをご覧ください。 FAQ:購読者毎の情報をメールや件名に差し込む方法(パーソナライズ機能) ご利用可能なフォントについては、以下のFAQでご確認ください。 FAQ:ドラッグ&ドロップエディタでフォント・文字サイズ・行間を調整する方法は? また、ランディングページでグーグルフォントをお使いになりたい場合は以下のFAQをご覧ください。 FAQ:ランディングページのテキスト編集 テキストブロックにリンクを挿入することもできます。詳しくは以下のFAQをご覧ください。 FAQ:メールにリンクを挿入する方法 ランディングページ内のテキストついての詳細は、以下のFAQをご参照ください。 FAQ:ランディングページの作成方法について     ご注意:テキストブロックを編集する際に以下のように右下にTinyMCEロゴが表示されますが、配信されるメールには表示されることはありませんのでご安心ください。TinyMCEはドラッグ&ドロップの動作をより早く優れたものにするため、弊社が利用している第三者企業です。       ブロック一覧メニューへ戻る   動画ブロック   動画はとても効果的な視覚ツールです。動画をメールに挿入することで、商品の良さや特徴、他社の競合製品よりも優れている点を直感的に伝えてくれます。 アカウントの動画ギャラリーにビデオをアップロードする方法や、メールへの挿入方法についてはこちらをご参照ください。   ブロック一覧メニューへ戻る   区切り線/スペースブロック   区切り線/スペースブロックを使って、メールの各セクション、またはブロックとの間に余白を作ることができます。ブロックタブより「区切り線ブロック」を選択し余白を入れたい所にドラッグ&ドロップするだけで、より読みやすくすっきりしたデザインになります。 区切り線/スペースブロックについての詳細は、以下のFAQをご参照ください。 FAQ:ドラッグ&ドロップエディタでブロック間の空

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

自分でデザインしたHTMLメールを送れますか?

はい、送れます。Benchmark Emailではドラッグ&ドロップ、テキスト版、HTMLコードの3種類のエディターをご用意しております。メールを作成する際にHTMLコードエディターを選択することで、ご自身でデザインされたHTMLコードを簡単に挿入することができます。 以下の手順は、すでにご自身のHTMLメールテンプレートを作成されていることを前提としております。使用したすべての画像がURLとして参照されることをご確認ください。 自分でデザインしたHTMLメールを作成する方法 1. アカウントにログインし、左のダッシュボードメニューよりメール>メールを選択します。 2. 右上の「メール作成」ボタンをクリックし、通常メール配信を選択し、「次へ」ボタンをクリックします。 3. エディター選択ページでHTMLコードを選択し、「次へ」ボタンをクリックします。 4. メール名を入力します。こちらは管理用で購読者には表示されません。 5. メール名を入力後はメール編集画面に遷移します。すぐHTMLコードのエディターでメールを作成することができます。 6. 画面左に表示される Email Content と記載された箇所に、作成したコードを入力します。HTMLコードにすでにボディやHTMLタグを使用している場合は、エディターからタグを削除してください。 7. 右側の画面でリアルタイムにデザインを確認することが可能です。 8. HTMLコードの編集が全て完了しましたら、画面右下の「保存」または「保存&次へ」ボタンをクリックします。 「保存」ボタンをクリックすると、メールが保存され、後で編集をすることができます。 「保存&次へ」ボタンをクリックすると、メールチェックリストのページに遷移します。各項目を入力する際は、次の項目に移動する前に必ず「保存」をクリックしてください。 メール名を入力後はすぐにメール編集画面に遷移します。チェックリストの画面から再度編集ページに移動するには、チェックリストの本文&デザインから「メール編集」ボタンをクリックしてください。   HTMLコードのツールバーについて テーマスタイル:一番左のドロップダウンメニューよりコードエディターのテーマスタイルを変更することができます。 挿入機能:グリーティング(挨拶文)やパーソナライズタグを挿入することができます。コンタクト詳細タグを使用する前に、必ずコンタクトリストにフィールド項目が追加されているかご確認ください。 テキストメール:HTMLメール内の全てのテキストが表示されます。ここで“X”と表示されている場合は、テキスト版とHTML版が同期化されていないことを意味します。同期化していないとメールの配信または配信予定の設定を行うことはできません。同期化するには以下の手順に従ってください。 「テキストメール」ボタンをクリック 「HTML版とテキスト版の内容を同期」ボタンをクリック ポップアップ画面で変更内容を確認し、「次へ」ボタンをクリック 左の「HTMLメール」ボタンをクリック これでメールの配信設定および配信をすることができます。 画像ギャラリー: 既存の画像を挿入または新しい画像をアップロードします。画像を選択した際、URLがメールのコードに挿入されます。必ず適切な画像タグ(例:<img>)を追加してください。 コード閲覧:初期設定では、左にコード編集、右にHTMLメールの表示と分割表示になっています。コードを編集しながらどのようにメールで表示されるかを確認することができます。分割表示を解除しコード編集画面のみ表示させたい場合に、こちらのアイコンをクリックしてください。   設定オプションについて 画面左下にある「設定」ボタンをクリックします。フッタータブをクリックし、使用したい実際の事業所・オフィス所在地を変更したり、購読リンクを選択することができます。 コンテンツタブでは、パーミッションリマインダーやウェブページ表示のリンクを追加・削除することが可能です。(パーミッションリマインダーを追加するとGDPRに遵守したメールとなります。) その他のオプションについて 右下に表示されるプレビューオプションをクリックすると、配信する前にメールがどのように表示されるかご確認いただけます。 また、テストのドロップダウンメニューは「テストメールの送信」「スパムチェック」「印刷プレビュー」「コンタクトを指定して表示」などがあり、「受信テスター」ではさまざまな受信箱でメールがどのように表示されるかをテストすることができます。 メールを配信する前に、受信者側でメールがどのように見えるかを確認する方法やテストメールの送り方に関しては、以下のFAQをご参照ください。 FAQ:送信前にメールを確認したいのですが、どのような方法がありますか? FAQ:テストメールの送り方について また、配信予定のメールが各メーラー(メールサービス)の受信箱でどのように表示されるかを確認したい場合は、受信テスター(有料)をご利用ください。詳しくは以下のFAQをご覧ください。 FAQ:受信テスターの目的と作成方法について 重要:コード編集画面内でコードを検索したい場合は、ショートカットキーをご利用ください。(Windows: Cmdキー+ F / Mac: Ctrlキー+F)   注意点: *画像やリンクなどを指定する時は、絶対パスを使用してください。 ・絶対パスとは、URLでページを指定して、目的地(情報)がどこにあるのかを伝えます。リンク先のURLをhttp://〜省略することなく全て記述する方法です。以下のような絶対パスの指定方法であることを確認してください。 <a href="http://www.mysite.com/myfolder/index.htm">Click here for more info</a> ・相対パスとは、今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを伝えます。リンク先のURLを現在地から目的の位置までの道筋にある要素を順に並べて記述する方法です。画像やリンクなどを指定する際は、相対パスは使用しないでください。 <a href="myfolder/index.htm">Click here for more info</a> *Div/Layerを用いての位置調整は、ほとんどのメーラーで非対応となっているためBenchmark Emailでは推奨しておりません。 以下のようなコーディングは無効になりますので、ご注意ください。 <div style="position:absolute; left:10px; top:10px; float:left;"> Hello </div> 画像や文字の配置を調整するにはテーブルタグをご利用ください。   トップに戻る   ご不明な点がございましたら、サポートまでお知らせください。     >>「メール作成:編集操作」のまとめページに戻る

テンプレート&メールエディタ メール配信 1月 12, 2022