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

kintone(キントーン)の標準機能でできないところをJavaScriptやCSSを使って実現しています。 今回はCSSを使って、グループラベルや項目ラベルに色をつけたり太字にしたりして見やすくする方法です。

■ 標準の項目ラベル

ブルー・レッド・グリーン・オレンジバージョンのスタイルシートサンプルです。パソコン版ですが、よかったら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; /* オレンジ */
}

【kintone】ラベルに色をつけて見やすくしてみる｜日々の暮らし