ドラッグアンドドロップエディターのブロック
エディタブロックs は、ドラッグアンドドロップエディタ で使用できるさまざまなブロックです。この参照記事には、メッセージで使用できるさまざまな種類のコンテンツを表す一連のタイルが含まれています。
メールエディターブロックの使用
エディタブロックs は、メール のContent にあります。エディターブロックを使うには、ドラッグ&ドロップ・エディターでエディターブロックを列の中にドラッグする。カラム幅に自動調整される。各エディターブロックは、埋め込みのきめ細かなコントロールなど、独自の設定を持っています。
メールでこれらのエディタブロックs を使用およびカスタマイズする方法の詳細については、他のカスタマイズを参照してください。
Image、Button、またはText エディタブロックs 内の任意のURL にカスタム属性s を追加することもできます。
種類
次の表は、ユーザーが各エディターブロックタイプをどのように使用できるかについて説明しています。
| 名前 | 説明 |
|---|---|
| タイトル | メール内のヘッダーの文字を追加します。 |
| パラグラフ | メッセージにテキストを入力する。ツールバーは、フォントやテキスト編集機能をサポートする。 |
| リスト | 箇条書きリストを追加する。 |
| ボタン | 標準ボタンを追加する。このブロックのプロパティでは、リンクを簡単に編集・設定できる。 |
| 区切り線 | 実線、点線、または破線を挿入し、間隔を調整します。 |
| スペーサー | 他のブロックの間にスペース(パディング)を追加する。 |
| 画像 | メディアライブラリーから”画像を挿入します。 |
| 動画 | 動画コンテンツへのリンクを作成する。 |
| ソーシャル | ソーシャルメディアプラットフォームのアイコンを挿入します。ブランド固有のアイコンのカスタム”画像をアップロードできます。 |
| アイコン | アイコンを挿入する。カスタム”画像s をアップロードできます。Brazeでは、”画像をアップロードするまで、大きめのプレースホルダアイコンが使用されます。 |
| HTML | 生のHTMLを挿入する。Connected Content や条件文など、Liquid に推奨されます。 |
| メニュー | デザインするメッセージに合わせたフレキシブルなメニューを作成する。 |
プロパティ
各エディターブロックのプロパティの詳細は以下の表に記載されている。
タイトル
Title エディターブロックのプロパティの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| タイトル | 見出しのスタイルを選択する。 |
| フォントファミリ | これはタイトルのフォントスタイルである。 |
| フォントの太さ | これはフォントの全体的な太さです。 |
| 文字サイズ | テキストのサイズを決定する。 |
| テキストの色 | タイトルの色を変更する。 |
| リンクの色 | リンクの色を変更する。 |
| 整列 | タイトルを左、中央、または右方向に移動します。 |
| ライン高さ | テキストの行間の距離を変更する。 |
| 行間隔 | 各文字間の距離を変更する。 |
| 文字の向き | デフォルトは左から右ですが、right-to-leftに編集できます。 |
パラグラフ
Paragraph エディターブロックのプロパティの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| フォントファミリ | これは段落テキストのフォントスタイルである。 |
| フォントの太さ | これはフォントの全体的な太さです。 |
| 文字サイズ | テキストのサイズを決定する。 |
| テキストの色 | タイトルの色を変更する。 |
| リンクの色 | リンクの色を変更する。 |
| 整列 | タイトルを左、中央、または右方向に移動します。 |
| 段落間隔 | 段落間のスペースを変更する。 |
| ライン高さ | テキストの行間の距離を変更する。 |
| 文字間隔 | 各文字間の距離を変更する。 |
| 文字の向き | デフォルトは左から右ですが、right-to-leftに編集できます。 |
リスト
List エディターブロックのプロパティの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| リストのタイプ | これがリストの種類だ。箇条書きまたは番号リストが可能です。 |
| リストスタイルの種類 | リストのスタイルを決定する。 |
| リスト開始元 | リストの開始番号を決定する。 |
| フォントファミリ | これは段落テキストのフォントスタイルである。 |
| フォントの太さ | これはフォントの全体的な太さです。 |
| 文字サイズ | テキストのサイズを決定する。 |
| テキストの色 | タイトルの色を変更する。 |
| リンクの色 | リンクの色を変更する。 |
| 整列 | タイトルを左、中央、または右方向に移動します。 |
| リスト項目の間隔 | リスト項目間のスペースを変更する。 |
| リスト項目インデント | リスト項目のインデントを変更する。 |
| ライン高さ | テキストの行間の距離を変更する。 |
| 文字間隔 | 各文字間の距離を変更する。 |
| 文字の向き | デフォルトは左から右ですが、right-to-leftに編集できます。 |
区切り線
Divider エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| 透明 | 有効にすると、’line’ と ‘width’ オプションは削除される。 |
| LINE | 点線、斑点、実線など、さまざまな線形式。さらに、区切り線の太さや色も変更できます。 |
| 幅 | 区切り線の幅を 5 刻みで調整します。 |
| 整列 | 線を左、中央、右向きのいずれかに移動する。 |
スペーサー
Spacer エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| 高さ | スペーサーブロックの高さを調整します。デフォルトは60pxである。 |
画像
Image エディター・ブロックの詳細については、以下の表を参照のこと。ダイナミック画像 (Liquid 使用画像) については、自動幅設定を使用するためのフォールバック画像を設定する必要があります。”画像仕様については、メール “画像仕様を参照してください。
| プロパティ | 説明 |
|---|---|
| 自動幅 | 画像の幅をピクセル単位で変更します。 |
| 整列 | 画像をブロックの左、中央、右のいずれかに揃える。 |
| Liquid を含む画像 | Liquidロジックを使用して、同じブロックの内容内で異なる”画像sをダイナミックなします。 |
| 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 を使用してアクションs をカスタマイズすることもできます。各エディタブロックのアクションの詳細は、次の表に示されています。
ボタン
Button エディター・ブロックの詳細については、以下の表を参照のこと。
| プロパティ | 説明 |
|---|---|
| リンクタイプ | ボタンをクリックしたときのアクションを決定し、アプリの適切なプロトコルを設定します。 |
| URL | ウェブページを開くリンクタイプに基づくダイナミック。 |
| 宛先、件名、本文 | 送信メールリンクタイプの場合、ユーザーがボタンを選択したときに下書き メールに入力される受信者のメールアドレス、件名、および内容を設定します。 |
| 電話 | Make call and Send SMS link typeの場合、ユーザーがボタン選択時に呼び出す電話番号またはテキストを設定します。 |
| メッセージ | SMSリンクタイプの場合、ユーザーがボタンを選択したときに下書き SMSメッセージに入力される内容を設定します。 |
| ボタンオプション | フォント、幅、色など、さまざまなボタンオプションを設定します。 |
| ボタンホバー | ユーザーがマウスやトラックパッドを使ってボタンの上にカーソルを置いたときのボタンのスタイルです。これには、ボタンの背景色、文字色、境界線のスタイルなどが含まれます。 |
GitHub でこのページを編集