コンテンツにスキップ

デザインのカスタマイズ

UI Kit に自社アプリのスタイルシートを適用できます。UI Kit のHTMLは Bootstrap 4.4 を使って実装しているため、Bootstrap を使った一般的な手段でスタイルを変更できます。

スタイルシートの適用方法

スタイルシートは次の方法で適用できます。

  1. コンソールから、スタイルシートのURLを登録する
  2. 接続エンドポイントの 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;
}

アイテムリストで利用される、タブの背景色を変更する場合は item-listナビゲーションコンポーネント に対して背景色を指定します。以下は、スカイブルーに変更した場合の例です。

.item-list {
  background-color: skyblue;
  border: 1px solid skyblue;
}

.nav-tabs .nav-link.active {
  background-color: skyblue;
  border: 1px solid skyblue;
}

ボタンの色を変更する

主導線となるボタンの色を変えるには、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

同様に、ガチャにもタグを付けることができます。


最終更新日: 2021-07-08