決済UIテーマのカスタマイズ
使い方
デフォルトでは、決済UIに以下の2つのテーマが用意されています：ライトとダーク。カスタマイザを使用せずにテーマを切り替えるには、トークンを取得するときにsettings.ui.themeパラメータにdefaultまたはdefault_darkを渡します。
決済UIをゲームデザインに合わせるために、カスタムテーマを作成し、以下の特性を設定することができます：
- UI要素の色
- フォントサイズ
- UI要素のボード幅と角の半径
パブリッシャーアカウントでは、すべてのプロジェクトでデフォルトでカスタムテーマを使用できます。特定のゲームに別のテーマを使用したい場合は、トークンでこれらの設定を渡します。
注意
トークンで渡されたテーマ設定は、パブリッシャーアカウントで設定された設定よりも優先されます。
パブリッシャーアカウントでカスタマイズを構成する
お知らせ
1つのプロジェクトでカスタムテーマを作成し、このパブリッシャーアカウントのすべてのプロジェクトでそのテーマを使用することができます。
- パブリッシャーアカウントでプロジェクトを開き、決済ステーション > UIテーマセクションに移動します。
- 「新しいテーマを作成する」をクリックします。
- 鉛筆アイコンをクリックして、テーマ名を変更します。
- UI要素の色を変更するには、「色」タブを開きます。サーフェス、テキスト、コントロールのカラーパレット、および状態通知に表示される色を変更することができます。
- フォントサイズを構成するには、「タイポグラフィ」タブに移動します。対応するフィールドを使用して、次のUI要素のフォントサイズを変更できます：
| フィールド | UI要素 |
|---|---|
| Title 1 | 決済状況ページの見出し。 |
| Title 2 | 合計金額。 |
| Title 3 | セクション見出し（例：カード決済）。 |
| Title 4 | 現在は使用していません。 |
| 本文L |
|
| 本文M |
|
| マイナーテキスト |
|
| 見出し | 現在は使用していません。 |
- UI要素のボーダー幅とコーナー半径を設定するには、「ボーダー」タブで変更します。
お知らせ
最大ボーダー幅 - 3 px。
最大コーナー半径 - 16 px。
最大コーナー半径 - 16 px。
- モバイル版とデスクトップ版の決済UIでテーマがどのように表示されるかを確認するには、「プレビュー」セクションでタブを切り替えます。
注意
プレビューモードではボタンやリンクが機能しません。
- 決済UIの異なる状態を確認するには、「カード決済」、「決済方法」、「決済状況」のタブを切り替えてください。
- 「公開する」をクリックします。
- このテーマをパブリッシャーアカウントのすべてのプロジェクトに適用するには、開いたモーダルウィンドウで「デフォルトとして設定」トグルを「オン」に設定します。テーマがトークンで渡されるプロジェクトには影響しません。
- 「公開する」をクリックします。
注意
テーマが公開された後は、いつでもテーマの編集に戻ることができます。このテーマは、デフォルトテーマとして設定するか、トークン設定を使用して有効にしない限り、決済UIに適用されません。
UIテーマタブで、特定のテーマのブロック内の「•••」をクリックすると、以下のクイックアクションが利用できます：
- カスタマイズ — カスタマイザを開いて変更します。
- 編集 — テーマ名を変更し、「デフォルトとして設定」を「オン」または「オフ」に設定します。
- 複製 — テーマを複製して、それに基づいて新しいテーマを作成します。
- テーマを削除します。
カスタムUIテーマ設定をトークンで渡す
カスタム設定を特定のゲームに適用するには、トークン作成時にsettings.ui.themeパラメータで、公開されているカスタムテーマのIDを渡します。
テーマIDを見つけることができます：
- UIテーマタブのすべてのテーマのリスト。
- カスタマイザのテーマ名の下。
注意
トークンで渡されたテーマ設定は、パブリッシャーアカウントで設定された設定よりも優先されます。
この記事は役に立ちましたか？
ご意見ありがとうございました！
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。このページを評価する
このページを評価する
答えたくない
ご意見ありがとうございました！
誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
