オープンソースWebDBのプリザンター(pleasanter)ブログ

オープンソースのWebDBのプリザンター(pleasanter)のブログです

オープンソースWebDB「プリザンター」のブログです。 機能の紹介や実例を交え、わかりやすく解説していきます。

【TIPS】CSSで項目「状況」と同じように分類を装飾する方法①

こんにちは。
リーデックス小川です。

今回は、一覧とエディタの分類をCSSで装飾する方法をお伝えします。特に一覧で色が変更できると、見た目でわかりやすくなるため、そんなに難しくないので、ぜひチャレンジして見てください。

 項目「状況」を確認してみる。

管理→テーブルからエディタのタブを選択して「状況」の詳細を確認して見ましょう。

f:id:h-ogawa-reedex-co-jp:20190114145917p:plain

 

選択肢一覧に下記が設定されていると思います。

100,未着手,未,status-new
150,準備,準,status-preparation
200,実施中,実,status-inprogress
300,レビュー,レ,status-review
900,完了,完,status-closed
910,保留,留,status-rejected

上記のフォーマットの詳細にについては、下記URLを確認して頂ければと思います。

 

ここでのポイントは、各行の最後の項目に設定されている文字列です(1行目だとstatus-new)。スタイルシートのクラスを指定しておくと、一覧画面とエディタでスタイルシートが適用されます。

 

今回、サンプルで下記のような分類項目を設定しました。

f:id:h-ogawa-reedex-co-jp:20190114151221p:plain

 

分類Aに表示名「テストデータ」で選択肢一覧を下記のように設定しました。

000,項目A,A,
100,項目B,B,
200,項目C,C,
300,項目D,D,
400,項目E,E,
500,項目F,F,

 

状況と違い、各行の最後には設定されていません。この場合、スタイルシートは適用されないため、特に変化はありません。

一覧画面

f:id:h-ogawa-reedex-co-jp:20190114152132p:plain

編集画面

f:id:h-ogawa-reedex-co-jp:20190114152407p:plain

 

スタイルシートを設定して見る

では、試しに状況の「準備」と同じクラス名をテストデータの「項目B」に設定して見ましょう。分類Aに下記のような設定をしてみます。

000,項目A,A,
100,項目B,B,status-preparation
200,項目C,C,
300,項目D,D,
400,項目E,E,
500,項目F,F,

 

では、どのように状況が変わるかをみてみましょう。

一覧画面

f:id:h-ogawa-reedex-co-jp:20190114152825p:plain

編集画面

f:id:h-ogawa-reedex-co-jp:20190114152924p:plain

 

テストデータの「項目B」が状況の「準備」と同じ背景色になったかと思います。このように、スタイルシートを設定すると、背景色などを変更することが可能となります。

 

 

まとめ

今回は、既存のスタイルシートを利用して背景色が変わることを確認しました。次回は、オリジナルのCSSを管理画面より設定し、カスタマイズを行います。

最後まで読んで頂きありがとうございました。