デザインのカスタマイズ¶
UI Kit に自社アプリのスタイルシートを適用できます。UI Kit のHTMLは Bootstrap 5.2 を使って実装しているため、Bootstrap を使った一般的な手段でスタイルを変更できます。
スタイルシートの適用方法¶
スタイルシートは次の方法で適用できます。
- コンソールから、スタイルシートのURLを登録する
- 接続エンドポイントの
styleUrl
パラメータに指定する
コンソールからの登録は、アプリの設定からアプリ毎に設定できます。両方指定した場合、HTML内でコンソールで指定したスタイルシート、パラメータで指定したスタイルシートの順で読み込まれます。
Info
一般公開するページはパラメータによる指定に対応していません。
スタイルシートの仕様¶
Bootstrap のクラス¶
ボタン¶
クラス | 使い方 | 主な箇所 |
---|---|---|
btn-primary | 主導線となるボタン | 着せ替え完了ボタン、購入確認ボタン |
btn-secondary | 主導線でないボタン | 自社アプリへ戻るボタン |
btn-warning | 異常な状態を伴う主導線 | 所持残高不足時の残高チャージボタン |
背景¶
アイテムのリスティングにはカードのスタイルを利用しています。
クラス | 使い方 | 主な箇所 |
---|---|---|
bg-info | 有効な状態 | 選択中のアイテムの背景 |
bg-secondary | 非活性な状態 | 選択できないアイテムの背景 |
通知¶
処理が完了した際など、ページ上部に通知が表示されることがあります。
クラス | 使い方 | 主な箇所 |
---|---|---|
alert-success | 処理の成功 | 着せ替え画面で「保存」ボタンを押した後の完了表示(戻るリンクを指定しなかった場合) |
UI Kit 独自のクラス¶
接頭辞に機能名が来るクラスを各領域ごと(div
タグなど)に準備しているのでご利用になれます。
機能 | クラス |
---|---|
UI Kit 着せ替え画面 | fitting-room-* |
UI Kit ショップ画面 | shop-* |
UI Kit ガチャ画面 | gacha-* または gachas-* |
逆引き¶
実現したいことから逆引きして実装例を示します。
背景色を変更する¶
画面全体の背景色は、単純に body
タグの背景色を指定します。
body {
background-color: #ccc;
}
ボタンの色を変更する¶
主導線となるボタンの色を変えるには、btn-primary
クラスを変更します。
.btn-primary,
.btn-primary:hover,
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
color: white;
background-color: red;
border-color: red;
}
btn-secondary
, btn-warning
も同様に変更できます。
タブではドロップダウン式のボタンがあるため、こちらにも適用します。
.dropdown-item:disabled,
.dropdown-item.disabled,
.dropdown-item:not(:disabled):not(.disabled):active,
.dropdown-item:not(:disabled):not(.disabled).active {
color: white;
background-color: red;
border-color: red;
}
カードの背景色を変更する¶
カードの背景色を変更する場合、bg-info
クラスの背景色を変更します。
.bg-info {
background-color: #7fbb1a !important;
}
bg-secondary
も同様に変更できます。
通知の配色を変更する¶
alert-success
クラスを変更します。
.alert-success {
color: black;
background-color: white;
border-color: black;
}
レアアイテムの表示を変える¶
アイテム情報の編集でのタグと組み合わせることで、コンソール上でレアアイテムを定義し、UI Kit ではレアアイテムに対してレアアイテム用のスタイルを適用できます。
例えば、タグに myapp-rare
を設定したアイテムは、UI Kit のHTMLで以下のように出力されます。
<div class="card gacha-item myapp-rare">
...
</div>
レアアイテムのカード枠を青に変更する場合、次のように指定します。
.card.myapp-rare {
border-color: blue;
}
Info
同様に、ガチャにもタグを付けることができます。