ドラッグ&ドロップエディタブロック
エディターブロックとは、ドラッグ&ドロップエディターで利用できる様々なブロックのことだ。この参考記事には、メッセージングで使用できる様々な種類のコンテンツを表す一連のタイルが含まれている。
メールエディタブロックを使う
メールメッセージの編集ブロックは、コンテンツセクションの下にある。エディターブロックを使うには、ドラッグ&ドロップ・エディターでエディターブロックを列の中にドラッグする。カラム幅に自動調整される。各エディターブロックは、埋め込みのきめ細かなコントロールなど、独自の設定を持っています。
これらのエディターブロックをメールで使用しカスタマイズする方法の詳細については、「その他のカスタマイズ」を参照せよ。
また、任意のURLにカスタム属性を追加することもできる。これは、,ButtonImage , またはText エディターブロック内で可能だ。
種類
次の表は、ユーザーが各エディターブロックタイプをどのように使用できるかについて説明しています。
| 名前 | 説明 |
|---|---|
| タイトル | メール内のヘッダーにテキストを追加する。 |
| パラグラフ | メッセージにテキストを入力する。ツールバーは、フォントやテキスト編集機能をサポートする。 |
| リスト | 箇条書きリストを追加する。 |
| ボタン | 標準ボタンを追加する。このブロックのプロパティでは、リンクを簡単に編集・設定できる。 |
| 区切り線 | 実線、点線、または破線を挿入し、間隔を調整します。 |
| スペーサー | 他のブロックの間にスペース(パディング)を追加する。 |
| 画像 | メディアライブラリーから画像を挿入する。 |
| 動画 | 動画コンテンツへのリンクを作成する。 |
| ソーシャル | ソーシャルメディアプラットフォームのアイコンを挿入します。ブランド固有のアイコン用にカスタム画像をアップロードできる。 |
| アイコン | アイコンを挿入する。カスタム画像をアップロードできる。Brazeは画像がアップロードされるまで、大きめのプレースホルダーアイコンを使用する。 |
| HTML | 生のHTMLを挿入する。Liquid(コネクテッドコンテンツや条件文など)に推奨される。 |
| メニュー | デザインするメッセージに合わせたフレキシブルなメニューを作成する。 |
プロパティ
各エディターブロックのプロパティの詳細は以下の表に記載されている。
タイトル
Title エディターブロックのプロパティの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| タイトル | 見出しのスタイルを選択する。 |
| フォントファミリ | これはタイトルのフォントスタイルである。 |
| フォントの太さ | これはフォントの全体的な太さです。 |
| 文字サイズ | テキストのサイズを決定する。 |
| テキストの色 | タイトルの色を変更する。 |
| リンクの色 | リンクの色を変更する。 |
| 整列 | タイトルを左寄せ、中央揃え、または右寄せにする。 |
| ライン高さ | テキストの行間の距離を変更する。 |
| 行間 | 各文字間の距離を変更する。 |
| 文字の向き | デフォルトでは左から右へ表示されるが、右から左へ表示するように編集できる。 |
パラグラフ
Paragraph エディターブロックのプロパティの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| フォントファミリ | これは段落テキストのフォントスタイルである。 |
| フォントの太さ | これはフォントの全体的な太さです。 |
| 文字サイズ | テキストのサイズを決定する。 |
| テキストの色 | タイトルの色を変更する。 |
| リンクの色 | リンクの色を変更する。 |
| 整列 | タイトルを左寄せ、中央揃え、または右寄せにする。 |
| 段落の間隔 | 段落間のスペースを変更する。 |
| ライン高さ | テキストの行間の距離を変更する。 |
| 文字間隔 | 各文字間の距離を変更する。 |
| 文字の向き | デフォルトでは左から右へ表示されるが、右から左へ表示するように編集できる。 |
リスト
List エディターブロックのプロパティの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| リストのタイプ | これがリストの種類だ。箇条書きまたは番号リストが可能です。 |
| リストスタイルの種類 | リストのスタイルを決定する。 |
| リストの開始 | リストの開始番号を決定する。 |
| フォントファミリ | これは段落テキストのフォントスタイルである。 |
| フォントの太さ | これはフォントの全体的な太さです。 |
| 文字サイズ | テキストのサイズを決定する。 |
| テキストの色 | タイトルの色を変更する。 |
| リンクの色 | リンクの色を変更する。 |
| 整列 | タイトルを左寄せ、中央揃え、または右寄せにする。 |
| リスト項目の間隔 | リスト項目間のスペースを変更する。 |
| リスト項目のインデント | リスト項目のインデントを変更する。 |
| ライン高さ | テキストの行間の距離を変更する。 |
| 文字間隔 | 各文字間の距離を変更する。 |
| 文字の向き | デフォルトでは左から右へ表示されるが、右から左へ表示するように編集できる。 |
区切り線
Divider エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| 透明だ | 有効にすると、’line’ と ‘width’ オプションは削除される。 |
| LINE | 点線、斑点、実線など、さまざまな線形式。さらに、区切り線の太さや色も変更できます。 |
| 幅 | 区切り線の幅を 5 刻みで調整します。 |
| 整列 | 線を左、中央、右向きのいずれかに移動する。 |
スペーサー
Spacer エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| 高さ | スペーサーブロックの高さを調整します。デフォルトは60pxである。 |
画像
Image エディター・ブロックの詳細については、以下の表を参照のこと。ダイナミックな画像(Liquidやコネクテッドコンテンツを含む画像)では、自動幅設定を使用するためにフォールバック画像を設定しなければならない。画像仕様については、当社のメール画像仕様を参照のこと。
| プロパティ | 説明 |
|---|---|
| 自動幅 | 画像の幅をピクセル単位で変更します。 |
| 整列 | 画像をブロックの左、中央、右のいずれかに揃える。 |
| Liquid を含む画像 | Liquidロジックを使って、同じコンテンツブロック内でダイナミックに異なる画像を設定しろ。 |
| URL | 画像がホストされている場所のアドレスを使って画像を設定します。 |
| 代替テキスト | 画像に表示されている情報をユーザーに提供する画像の短い説明。これはスクリーンリーダーのアクセシビリティや、画像が読み込めない場合に不可欠だ。 |
| 角が丸い画像, 写真 | 四隅を角丸にして画像をレンダリングします。デフォルトでは、画像は四隅が直角の状態でレンダリングされます。 |
| アクション (Action) | ユーザーが画像をクリックするとアクションがトリガーされます。 |
| ブロックオプション | 画像ブロックの周りにパディングを設定します。 |
Auto Width の場合、画像の自動リサイズは、画像の幅とレイアウト内の利用可能なスペースの組み合わせに基づいて、画像に最適なサイズを選ぶ:
- 利用可能なスペースより広い画像は100%の幅に設定され、モバイルではこの比率を維持し、デバイスの表示幅全体を使用する。
- 利用可能なスペースより小さい画像は、歪み効果やぼやけた写真を避けるために、画像の自然なサイズを使用する。
動画
Video エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| URL | ビデオのURL。なお、YouTubeとVimeoのみ対応している。 |
| タイトル | 動画のメタデータから自動生成されるが、カスタマイズすることもできる。 |
| 再生アイコンスタイル | ビデオ画像の上部にある再生ボタンのさまざまなオプションを含む。 |
| 再生アイコンの色 | 再生ボタンのライトまたはダークを選択するオプション。 |
| 再生アイコンのサイズ | 再生ボタンのピクセルサイズを選択する。固定範囲は50pxから80pxまで(5px刻み)。 |
Vimeoでホストされている動画は、公開に設定されている場合のみ機能する。Vimeo内で利用可能な他のすべてのセキュリティ設定(たとえば、「Hide fromVimeo.com 」)は、このコンテンツブロックではサポートされていない別のリンク形式を生成する。この種のリンクはビルダーによって変更されるため、Brazeはサムネイルを生成できない。
ソーシャル
Social エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| アイコンコレクションを選択する | アイコンコレクションのスタイルを設定する。 |
| アイコンコレクションを設定する | 各ソーシャル・アイコンのURLを設定する。タイトルと代替テキストを編集するためのMore optionsトグルを含む。 |
| 整列 | ソーシャルアイコンを左寄せ、中央寄せ、または右寄せに移動する。 |
| アイコンの間隔 | 各ソーシャルアイコンの間隔を決める。 |
アイコン
Icons エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| フォントファミリ | これは段落テキストのフォントスタイルである。 |
| フォントの太さ | これはフォントの全体的な太さです。 |
| 文字サイズ | テキストのサイズを決定する。 |
| テキストの色 | タイトルの色を変更する。 |
| リンクの色 | リンクの色を変更する。 |
| 整列 | アイコンを左向き、中央向き、または右向きに移動する。 |
| 文字間隔 | 各文字間の距離を変更する。 |
| アイコンサイズ | アイコンのサイズを決定する。 |
| アイコンの間隔 | アイコンのスペースを変更する。 |
| アイコンの余白 | アイコンのパディングを変更する。 |
HTML
HTML エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 記述 |
|---|---|
| HTMLエディタ | 生のHTMLを入力する。 |
メニュー
Menu エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| メニュー項目を設定する | メニュー項目を追加する。 |
| フォントファミリー | メニューに使用するスタイル。 |
| 文字サイズ | メニューのサイズ。 |
| 文字色 | メニューの色を変更する。 |
| リンクの色 | メニューテキストの色を変更する。 |
| 整列 | メニューを左寄せ、中央寄せ、または右寄せに配置する。 |
| 文字間隔 | 各文字間の距離を変更する。 |
| レイアウト | レイアウトを横方向か縦方向に決定します。 |
| 区切り記号 | メニューオプションの間に文字を追加する。 |
| モバイルメニュー | モバイル・デバイスで表示する際のアイコンのサイズ、色、アイコンの種類を変更するオプションを含む。 |
| アイテムの詰め物 | + または - ボタンを使用するか、特定の数値を入力して、埋め込みを変更します。 |
| すべての面 | アイテムのパディングが無効な場合、一貫したパディング値を設定する。 |
アクション
メッセージ内のボタン、リンク、または画像をユーザーがタップした際に発生するアクションを設定できる。アクションをパーソナライズするためにもLiquidを使える。各エディタブロックのアクションの詳細は、次の表に示されています。
ボタン
Button エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| リンクタイプ | ボタンをクリックした際のアクションを決定し、適切なプロトコルを設定する。 |
| URL | ダイナミックなページは、開いているWebページのリンクタイプに基づいている。 |
| 宛先、件名、本文 | 「メール送信」リンクタイプの場合、この設定はユーザーがボタンを選択した際に下書きメールに表示される受信者メールアドレス、件名、および本文を設定するものである。 |
| 電話 | 「電話をかける」および「SMSを送信」リンクタイプの場合、この設定はボタンを選択した際にユーザーが電話をかけたりメッセージを送信したりする電話番号を指定する。 |
| メッセージ | SMS送信リンクタイプの場合、この設定はユーザーがボタンを選択した際に下書きSMSメッセージに表示される内容を決定する。 |
| ボタンオプション | 各種ボタンのオプションを設定する。例えばフォント、幅、色などだ。 |
| ボタンホバー | ユーザーがマウスやトラックパッドを使ってボタンの上にカーソルを置いたときのボタンのスタイルです。これには、ボタンの背景色、文字色、境界線のスタイルなどが含まれます。 |
GitHub でこのページを編集