Skip to content

スタイリング例

これは、ヘッダー、タブ、コードブロックなど、Braze Docs でページがスタイル設定される方法です。

ヘッダーテスト

H1バナー

H1テキスト

Lorem ipsum dolor sit amet, consectetur adipiscing elit.レクタステンポアのSedネクトトータ。Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。

H2バナー

H2テキスト

Lorem ipsum dolor sit amet, consectetur adipiscing elit.レクタステンポアのSedネクトトータ。Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。

H3バナー

H3テキスト

Lorem ipsum dolor sit amet, consectetur adipiscing elit.レクタステンポアのSedネクトトータ。Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。

H4バナー

H4テキスト

Lorem ipsum dolor sit amet, consectetur adipiscing elit.レクタステンポアのSedネクトトータ。Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。

H5バナー

H5テキスト

Lorem ipsum dolor sit amet, consectetur adipiscing elit.レクタステンポアのSedネクトトータ。Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。

H6バナー

H6 テキスト

Lorem ipsum dolor sit amet, consectetur adipiscing elit.レクタステンポアのSedネクトトータ。Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。

```

H1バナー

H2バナー

H3バナー

H4バナー

H5バナー
H6バナー

```

カスタムヘッダーアンカー

ヘッダーにアンカーを追加するには、ヘッダーがある行の末尾に次のコードを追加します。anchor-text をこの見出しのアンカーに置き換えます。小文字を使用し、単語間にハイフンを入れます。

```

見出しテキスト

```

番号記号# の後にカスタムアンカーが続く標準リンクを作成することで、カスタムアンカーを使用してヘッダーにリンクできます。

1

Here is my [link](#anchor-text)

フォントテスト

標準テキスト

テキストを強調する

太字

大胆な強調

～～打撃～～

``` 標準テキスト

テキストを強調する

太字

大胆な強調

～～打撃～～ ```

見積テスト

引用文

インラインクォート

Lorem ipsum dolor sit amet, consectetur adipiscing elit.レクタステンポアのSedネクトトータ。

チャンクを引用

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor.

```

引用文

Lorem ipsum dolor sit amet, consectetur adipiscing elit.レクタステンポアのSedネクトトータ。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. ```

テーブルテスト

インスタンス| ダッシュボードURL | REST エンドポイント ———– |—————- | ——————– US-01 | https://dashboard.braze.comまたは
https://dashboard-01.braze.com | https://rest.iad-01.braze.com 米国 米国 米国 米国 米国 米国 米国 EU-01 | https://dashboard.braze.euまたは
https://dashboard-01.braze.eu | https://rest.fra-01.braze.eu

1
2
3
4
5
6
7
8
9
10
11
12
13

Instance    | Dashboard URL   | REST Endpoint
----------- |---------------- | --------------------
US-01 | `https://dashboard.braze.com` or<br> `https://dashboard-01.braze.com` | `https://rest.iad-01.braze.com`
US-02 | `https://dashboard-02.braze.com` | `https://rest.iad-02.braze.com`
US-03 | `https://dashboard-03.braze.com` | `https://rest.iad-03.braze.com`
US-04 | `https://dashboard-04.braze.com` | `https://rest.iad-04.braze.com`
US-05 | `https://dashboard-05.braze.com` | `https://rest.iad-05.braze.com`
US-06 | `https://dashboard-06.braze.com` | `https://rest.iad-06.braze.com`
US-07 | `https://dashboard-07.braze.com` | `https://rest.iad-07.braze.com`
US-08 | `https://dashboard-08.braze.com` | `https://rest.iad-08.braze.com`
EU-01 | `https://dashboard.braze.eu` or<br> `https://dashboard-01.braze.eu` | `https://rest.fra-01.braze.eu`
EU-02 | `https://dashboard-02.braze.eu` | `https://rest.fra-02.braze.eu`
{: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3}

列ごとのテーブルのワードブレークのリセット

word-break をデフォルトスタイルにリセットする必要があるテーブル列の場合、Markdown オプションを使用して、.reset-td-br-1、.reset-td-br-2、.reset-td-br-3、.reset-td-br-4、.reset-td-br-4 を使用してテーブルにクラスを追加し、列に対応する# を最大4 にします。

使用

``` | イベント名| フィードタイプ| 説明| カスタム属性 | ———————————— | ———————- | —————————————————————————————– | ————————————————————————————- | | UNBROKENWORDTHATISVERYLONGUNBROKENWORDTHATISVERYLONG | Unbound Feed | メールがユーザのメールサーバに正常に配信されました。| campaign_id、canvas_step_id、canvas_id、canvas_variation_id | | UNBROKENHIGHLIGHTTHATISVERYLONGUNBROKENHIGHLIGHTTHATISVERYLONG | Unbound Feed | ユーザーがメールを開きました。| campaign_id、canvas_step_id、canvas_id、canvas_variation_id | | アプリ内メッセージ印象| プラットフォーム固有のフィード| アプリ内メッセージを表示したユーザ。| app_id、campaign_id、canvas_step_id、canvas_id、canvas_variation_id |

```

イベント名 フィードタイプ 説明 カスタム属性
UNBROKENWORDTHATISVERYLONGUNBROKENWORDTHATISVERYLONG Unbound Feed メールがユーザのメールサーバに正常に配信されました。 campaign_id、canvas_step_id、canvas_id、canvas_variation_id
UNBROKENHIGHLIGHTTHATISVERYLONGUNBROKENHIGHLIGHTTHATISVERYLONG Unbound Feed ユーザーがメールを開きました。 campaign_id、canvas_step_id、canvas_id、canvas_variation_id
アプリ内メッセージ印象 プラットフォーム固有のフィード アプリ内メッセージを表示したユーザ。 app_id、campaign_id、canvas_step_id、canvas_id、canvas_variation_id
イベント名 フィードタイプ 説明 カスタム属性
UNBROKENWORDTHATISVERYLONGUNBROKENWORDTHATISVERYLONG Unbound Feed メールがユーザのメールサーバに正常に配信されました。 campaign_id、canvas_step_id、canvas_id、canvas_variation_id
UNBROKENHIGHLIGHTTHATISVERYLONGUNBROKENHIGHLIGHTTHATISVERYLONG Unbound Feed ユーザーがメールを開きました。 campaign_id、canvas_step_id、canvas_id、canvas_variation_id
アプリ内メッセージ印象 プラットフォーム固有のフィード アプリ内メッセージを表示したユーザ。 app_id、campaign_id、canvas_step_id、canvas_id、canvas_variation_id

リンクテスト

リンク先:Braze.com

1

[Braze.com](https://www.braze.com)

画像テスト

画像

リンク画像テスト

リンクされた画像: Braze

イメージスタイリング

Text

イメージのアンカー

Text




``` Logo

Braze

Text

Text ```

ギャラリー試験

1
2
3
4
5
6
7

{% gallery %}
{{site.baseurl}}/assets/img_archive/EBTH_Email.png?bf892368baf287cba5ab9a6e3b09431d  <br> This is a [link](https://www.braze.com).
{{site.baseurl}}/assets/img_archive/iHeartRadio_Email.png?ecd2c8fe148939b7de957fe85cd6317e  <br> This is another `comment`.
{{site.baseurl}}/assets/img_archive/Saucey_Email.png?b9768937a1cc12d4c08e55a52e700d68  <br> This is yet another **comment**.
{{site.baseurl}}/assets/img/schellman_iso27001_seal_grey_CMYK_300dpi_jpg.png?1b1fb9dbb80b0332c62512dcf9c83258 <br> **IMAGE TITLE** <br> This is a test to see if it will line break.
{{site.baseurl}}/assets/img/SOC2.png?6338040be8e98c4c9abe1f35b3e43e3a  <br> This is a regular comment.
{% endgallery %}

対話型画像テスト

1

<div class="iactiveImg" data-ii="6967"></div><script src="https://interactive-img.com/js/include.js"></script>

コードスニペットテスト

コードテスト目標C

1
2

- (void)submitFeedback:(ABKFeedback * )feedback
 withCompletionHandler:(nullable void (^)(ABKFeedbackSentResult feedbackSentResult))completionHandler;

コードテストスイフト

1
2
3

Appboy.sharedInstance()?.submitFeedback(feedback) { (feedbackSentResult) in
      print("Feedback sent: (feedbackSentResult)")
    }

コードテストJava

1
2
3
4
5
6
7

@Override
public void onResume() {
  super.onResume();
  // Registers the BrazeInAppMessageManager for the current Activity. This Activity will now listen for
  // in-app messages from Braze.
  BrazeInAppMessageManager.getInstance().registerInAppMessageManager(activity);
}

コードテストjson

1
2
3
4
5

{
   "attributes" : "Attributes" ,
   "events" : ["Array", "Of", "Object"],
   "purchases" : ["Array" ,"Of" ,"Purchase" ,"Object"]
}

コードテストJavaScript

1
2
3
4
5

braze.subscribeToFeedUpdates(function(feed) {
  var cards = feed.cards;
  braze.showFeed(undefined, cards);
});
braze.requestFeedRefresh();

ピグメント試験

```python /usr/bin/python3

RunForrestRunのインポートエンジンから

”"”構文ハイライト用のテストコード!””””

Fooクラス: def init(self, var): self.var = var self.run()

1
2

def run(self):
	RunForrestRun()  # run along!

```

Markdown Example

アラートテスト

``` {% alert tip %} これはヒントです {% endalert %}

{% alert note %} これは注記です {% endalert %}

{% alert important %} これは重要な警告です {% endalert %}

{% alert warning %} これは警告です {% endalert %}

{% alert update %} これはアップデートです {% endalert %} ```

内蔵ビデオテスト

内蔵ビデオ/YouTube

デフォルトはYouTube 組み込みです。

埋め込みビデオの右揃え

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed nec tortor at lectus tempus tempor.Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed nec tortor at lectus tempus tempor.Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed nec tortor at lectus tempus tempor.Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。

内蔵ビデオの左揃え

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed nec tortor at lectus tempus tempor.Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed nec tortor at lectus tempus tempor.Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed nec tortor at lectus tempus tempor.Tellus diam, finibus eu dictum non, varius et ipsum をサスペンドします。

織機の例

  • 使用 source="loom"
1

{% multi_lang_include video.html id="[youte_id]" source="youtube" %}

右または左に揃え、最大幅を50% に制限するには、align パラメータ= left またはright を使用します。

```html {% multi_lang_include video.html id=”[ytube_id]” align=”left” source=”youtube” %}

{% multi_lang_include video.html id=”[youe_id]” align=”right” source=”youtube” %} ```

織機の例:

1

{% multi_lang_include video.html id="[lid]" source="loom" %}

高解像度のためのステータス配置を備えた特徴的なビデオレイアウト

高解像度表示のためにスタティックビデオを左側に配置する機能付きビデオレイアウトを使用するには、ページのyaml ヘッダにvideo_id とvideo_type (youtube など) を追加します。デフォルトでは、video_source はyoutube に設定されます。

1
2
3

layout: featured_video
video_id: [video_id]
video_source: youtube

リストテスト

ビュレット

  • リスト1
    • サブリスト1
  • リスト2
    • サブリスト2a
      • サブサブリスト2
  • リスト3

番号

  1. リスト1
    • サブリスト1
  2. リスト2
  3. リスト3
    • サブリスト3a
    • サブリスト3b
      • サブサブリスト3
  4. リスト4
    1. サブリスト4a
      1. サブサブリスト4
    2. サブリスト4b
      1. サブリスト4

```

ビュレット

  • リスト1
    • サブリスト1
  • リスト2
    • サブリスト2a
      • サブサブリスト2
  • リスト3

番号

  1. リスト1
    • サブリスト1
  2. リスト2
  3. リスト3
    • サブリスト3a
    • サブリスト3b
      • サブサブリスト3
  4. リスト4
    1. サブリスト4a
      1. サブサブリスト4
    2. サブリスト4b
      1. サブリスト4 ```

折りたたみ式コンテンツテスト

Click me to Expand

見てください!隠されたコードブロック!

1

print("hello world!")

1
2
3

{% details Click me to Expand %}
...
{% enddetails %}

タブテスト

カスタムタブ

以下のコード行をAppDelegate.m ファイルに追加します。

1

#import <AppboyTVOSKit/AppboyKit.h>

AppDelegate.m ファイル内で、application:didFinishLaunchingWithOptions メソッド内に次のスニペットを追加します。

1
2
3

[Appboy startWithApiKey:@"YOUR-API-KEY"
         inApplication:application
     withLaunchOptions:launchOptions];

Braze SDK をCocoaPods またはCarthage と統合する場合は、AppDelegate.swift ファイルに次のコード行を追加します。

1

#import AppboyTVOSKit

Swift プロジェクトでObjective-C コードを使用する方法の詳細については、[Apple Developer Docs][apple_initial_setup_19] を参照してください。

AppDelegate.swift で、application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool に次のスニペットを追加します。

1

Appboy.start(withApiKey: "YOUR-API-KEY", in:application, withLaunchOptions:launchOptions)

使用

tabsを{% tabs %}で囲み {% endtabs %} 個々のtabを{% tab [Tab name] %}タブのリキッドコードと名前で囲み {% endtab %}

1
2
3
4
5
6
7
8

{% tabs %}
{% tab objective-c %}
Content of objective-c
{% endtab %}
{% tab swift %}
Content of swift
{% endtab %}
{% endtabs %}

ローカルタブ

特定のセクションのタブコンテンツのみを変更するタブなど、自己完結型のタブの場合は、親タブブロックでローカルパラメータを使用します。

1
2
3

{% tabs local %}
...
{% endtabs %}

サブタブ

タブ内のタブの場合は、subtabs とsubtab を使用できます。デフォルト設定はlocalです。 グローバルsubtabs の場合は、global オプションを使用します。 {% subtabs global %}

タブ内容1

サブタブ1aの内容

サブタブ2aの内容

タブ内容2

サブタブ1aの内容

サブタブ2aの内容

値下げ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{% tabs local %}
{% tab Tab 1 %}
tab content 1
{% subtabs %}
{% subtab Subtab 1a %}
Subtab 1a content
{% endsubtab %}
{% subtab Subtab 2a %}
Subtab 2a content
{% endsubtab %}
{% endsubtabs %}
{% endtab %}
{% tab Tab 2 %}
tab content 2
{% subtabs %}
{% subtab Subtab 1b %}
Subtab 1a content
{% endsubtab %}
{% subtab Subtab 2b %}
Subtab 2a content
{% endsubtab %}
{% endsubtabs %}
{% endtab %}
{% endtabs %}
Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!