こんにちは。
リーデックス小川です。
今回は、一覧とエディタの分類をCSSで装飾する方法をお伝えします。特に一覧で色が変更できると、見た目でわかりやすくなるため、そんなに難しくないので、ぜひチャレンジして見てください。
項目「状況」を確認してみる。
管理→テーブルからエディタのタブを選択して「状況」の詳細を確認して見ましょう。
選択肢一覧に下記が設定されていると思います。
100,未着手,未,status-new
150,準備,準,status-preparation
200,実施中,実,status-inprogress
300,レビュー,レ,status-review
900,完了,完,status-closed
910,保留,留,status-rejected
上記のフォーマットの詳細にについては、下記URLを確認して頂ければと思います。
- プリザンターのカスタム項目（４） ～カスタム項目「分類」のリスト形式の設定方法（１） - オープンソースWebDBのプリザンター（pleasanter）ブログ
- プリザンターのカスタム項目（５） ～カスタム項目「分類」のリスト形式の設定方法（２） - オープンソースWebDBのプリザンター（pleasanter）ブログ
- プリザンターのカスタム項目（６） ～カスタム項目「分類」のリスト形式の設定方法（３） - オープンソースWebDBのプリザンター（pleasanter）ブログ
- プリザンターのカスタム項目（７） ～カスタム項目「分類」のリスト形式の設定方法（４） - オープンソースWebDBのプリザンター（pleasanter）ブログ
- プリザンターのカスタム項目（８） ～カスタム項目「分類」の活用方法 - オープンソースWebDBのプリザンター（pleasanter）ブログ
ここでのポイントは、各行の最後の項目に設定されている文字列です（1行目だとstatus-new）。スタイルシートのクラスを指定しておくと、一覧画面とエディタでスタイルシートが適用されます。
今回、サンプルで下記のような分類項目を設定しました。
分類Aに表示名「テストデータ」で選択肢一覧を下記のように設定しました。
000,項目A,A,
100,項目B,B,
200,項目C,C,
300,項目D,D,
400,項目E,E,
500,項目F,F,
状況と違い、各行の最後には設定されていません。この場合、スタイルシートは適用されないため、特に変化はありません。
一覧画面
編集画面
スタイルシートを設定して見る
では、試しに状況の「準備」と同じクラス名をテストデータの「項目B」に設定して見ましょう。分類Aに下記のような設定をしてみます。
000,項目A,A,
100,項目B,B,status-preparation
200,項目C,C,
300,項目D,D,
400,項目E,E,
500,項目F,F,
では、どのように状況が変わるかをみてみましょう。
一覧画面
編集画面
テストデータの「項目B」が状況の「準備」と同じ背景色になったかと思います。このように、スタイルシートを設定すると、背景色などを変更することが可能となります。
まとめ
今回は、既存のスタイルシートを利用して背景色が変わることを確認しました。次回は、オリジナルのCSSを管理画面より設定し、カスタマイズを行います。
最後まで読んで頂きありがとうございました。
