kintone

【kintone】ラベルに色をつけて見やすくしてみる

【kintone】ラベルに色をつけて見やすくしてみる
kintoneの標準機能でできないところをJavaScriptやCSSを使って実現しています。

評価:3

今回はCSSを使って、グループラベルや項目ラベルに色をつけたり太字にしたりして見やすくする方法です。

標準の項目ラベル

kintone標準スタイルシートのグループラベルや項目ラベル
ピンキー
ピンキー
グループラベルや項目ラベルがもう少し目立つと見やすいんだけどなぁ
モンキー
モンキー
それならスタイルシートで装飾すればいいよ!

ブルー・レッド・グリーン・オレンジバージョンのスタイルシートサンプルです。パソコン版ですが、よかったらCSSにコピペして使ってね。

ブルーバージョン

グループラベルや項目ラベルをブルーに変更
/* グループラベル */
.group-label-gaia {
  font-weight: bold;
  font-size: 1.2em;
  color: #448aca;  /* ブルー */
}

/* 項目ラベル */
.control-label-gaia {
  margin: 5px 0 10px 0;
  font-weight: bold;
  border-left: 5px solid #448aca;  /* ブルー */
}

レッドバージョン

グループラベルや項目ラベルをレッドに変更
/* グループラベル */
.group-label-gaia {
  font-weight: bold;
  font-size: 1.2em;
  color: #b83d3d;  /* レッド */
}

/* 項目ラベル */
.control-label-gaia {
  margin: 5px 0 10px 0;
  font-weight: bold;
  border-left: 5px solid #b83d3d; /* レッド */
}

グリーンバージョン

グループラベルや項目ラベルをグリーンに変更
/* グループラベル */
.group-label-gaia {
  font-weight: bold;
  font-size: 1.2em;
  color: #638c0b;  /* グリーン */
}

/* 項目ラベル */
.control-label-gaia {
  margin: 5px 0 10px 0;
  font-weight: bold;
  border-left: 5px solid #638c0b; /* グリーン */
}

オレンジバージョン

グループラベルや項目ラベルをオレンジに変更
/* グループラベル */
.group-label-gaia {
  font-weight: bold;
  font-size: 1.2em;
  color: #df5a00;  /* オレンジ */
}

/* 項目ラベル */
.control-label-gaia {
  margin: 5px 0 10px 0;
  font-weight: bold;
  border-left: 5px solid #df5a00; /* オレンジ */
}
この記事は、2020.8.22時点の情報です。