Skip to content

カラープロファイルとCSSテンプレート

ダッシュボードにアプリ内メッセージおよびブラウザ内メッセージのテンプレートを保存して、あなたのスタイルを使用して新しいキャンペーンやメッセージを迅速に作成できます。

テンプレート > アプリ内メッセージテンプレート。

このページから、既存のテンプレートを編集するか、+ 作成をクリックしてカラープロファイルまたはCSSテンプレートを選択し、アプリ内メッセージで使用する新しいテンプレートを作成できます。

カラープロファイル

メッセージテンプレートのカラースキームは、HEXカラコードを入力するか、色付きのボックスをクリックしてカラーピッカーで色を選択することでカスタマイズできます。

終了したら色のプロファイルを保存をクリックします。

カラープロファイルの管理

テンプレートを複製およびアーカイブすることもできます！テンプレートとメディアの作成と管理について詳しく知る。

CSS テンプレート{#in-app-message-templates}

webモーダルアプリ内メッセージ用の完全なCSSテンプレートをカスタマイズできます。

CSSテンプレートに名前を付けてタグを付け、デフォルトのテンプレートにするかどうかを選択します。提供されたスペースに自分のCSSを書くことができます。このスペースは、メッセージプレビューに表示されているCSSで既に埋められており、ニーズに合わせて少し調整しても構いません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

.ab-message-header, .ab-message-text {
  color: #333333;
  text-align: center;
}

.ab-message-header {
  font-size: 20px;
  font-weight: bold;
}

.ab-message-text {
  font-size: 14px;
  font-weight: normal;
}

.ab-close-button svg {
  fill: #9b9b9b;
}

.ab-message-button {
  border: 1px solid #1b78cf;
  font-size: 14px;
  font-weight: bold;
}
.ab-message-button:first-of-type {
  background-color: white;
  color: #1b78cf;
}
.ab-message-button:last-of-type, .ab-message-button:first-of-type:last-of-type {
  background-color: #1b78cf;
  color: white;
}

.ab-background {
  background-color: white;
}

.ab-icon {
  background-color: #0073d5;
  color: white;
}

.ab-page-blocker {
  background-color: rgba(51, 51, 51, .75);
}

ご覧のように、バックグラウンドカラーからフォントサイズや太さ、その他多くのものを編集できます。

CSSテンプレートの管理

テンプレートを複製およびアーカイブすることもできます！テンプレートとメディアの作成と管理について詳しく知る。

モーダル with CSS (Web only)

Web専用のWebモーダルをCSSメッセージで使用する場合は、独自のテンプレートを適用するか、指定されたスペースに独自のCSSを書くことができます。このスペースは、メッセージプレビューに表示されているCSSですでに事前入力されていますが、ニーズに合わせて少し調整しても構いません。

ご自身のテンプレートを適用する場合は、テンプレートを適用をクリックし、アプリ内メッセージテンプレートギャラリーから選択してください。オプションがない場合は、CSSテンプレートビルダーを使用してCSSテンプレートをアップロードできます。

  GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!