コンテンツにスキップ

デザインのカスタマイズ

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

利用しているクラス

ボタン

クラス 使い方 主な箇所
btn-primary 主導線となるボタン 着せ替え完了ボタン、購入確認ボタン
btn-secondary 主導線でないボタン 自社アプリへ戻るボタン
btn-warning 異常な状態を伴う主導線 所持残高不足時の残高チャージボタン

背景

アイテムのリスティングにはカードのスタイルを利用しています。

クラス 使い方 主な箇所
bg-info 有効な状態 選択中のアイテムの背景
bg-secondary 非活性な状態 選択できないアイテムの背景

通知

処理が完了した際など、ページ上部に通知が表示されることがあります。

クラス 使い方 主な箇所
alert-success 処理の成功 着せ替え画面で「保存」ボタンを押した後の完了表示(戻るリンクを指定しなかった場合)

逆引き

実現したいことから逆引きして実装例を示します。

背景色を変更する

画面全体の背景色は、単純に body タグの背景色を指定します。

body {
    background-color: #ccc;
}

アイテムリストで利用される、タブの背景色を変更する場合は item-list クラスに対して背景色を指定します。

.item-list {
    background-color: white;
}

ボタンの色を変更する

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


最終更新日: 2020-12-29