MAIL
テーマを考慮したテーマカスタマイズの実践方法
プリザンターでは、ユーザごとにテーマを選択できます。
今回は、第2世代のテーマを例に「一覧画面の奇数行に背景色を付ける」カスタマイズをご紹介します。
まずは、選択中の第2世代のテーマ（cerulean、green-tea、mandarin、midnight）を判別し、対応するクラスをbodyに追加するスクリプトを設定します。
出力先は「一覧」を指定してください。
$p.events.on_grid_load = function () {
// 対象となるテーマ名を配列で定義
const targetThemes = ['cerulean', 'green-tea', 'mandarin', 'midnight'];
// 現在選択されているテーマ名を取得
const currentTheme = $('#Theme').val();
// 現在のテーマが対象のテーマに含まれているかチェック
if (targetThemes.includes(currentTheme)) {
// 条件に一致した場合、bodyタグにCSSクラスを追加
// （例：theme-cerulean、theme-green-tea など）
$('body').addClass(`theme-${currentTheme}`);
}
};次に、テーマごとに背景色を設定するスタイルを設定します。出力先はスクリプトと同じく「一覧」を指定してください。
/* cerulean の時に設定するスタイル */
body.theme-cerulean #Grid tbody tr:nth-child(odd) td {
background-color: lightblue;
}
/* green-tea の時に設定するスタイル */
body.theme-green-tea #Grid tbody tr:nth-child(odd) td {
background-color: lightgreen;
}
/* mandarin の時に設定するスタイル */
body.theme-mandarin #Grid tbody tr:nth-child(odd) td {
background-color: orange;
}
/* midnight の時に設定するスタイル */
body.theme-midnight #Grid tbody tr:nth-child(odd) td {
background-color: darkblue;
color: white;
}この設定により、一覧画面の奇数行だけ背景色が変わり、テーマごとに異なる雰囲気の画面を実現できます。
たとえば、ceruleanは爽やかな水色、green-teaは落ち着いた緑、midnightは暗めの配色に白文字、といった具合です。
上記を設定する前の一覧画面の表示は以下の通りです。
設定後は以下のように、テーマごとにスタイルが適用されます。
なお、第1世代・第2世代で画面構成が異なるため、カスタマイズ時には「どちらの世代か」を意識することが大切です。
まとめ
いかがでしたか。
プリザンターはテーマ機能をうまく活用することで、
・作業効率を上げる「見やすさ」
・継続利用につながる「使いやすさ」
・自社に合わせた「デザイン性」
を兼ね備えたシステムに変えることができます。
今回は「一覧画面の色付け」を例にしましたが、ナビゲーションやフォームレイアウトにも応用可能です。
「プリザンターを導入してみたけれど設定がよく分からない」という方も、まずは今回の方法から試してみてください。
弊社では、プリザンター導入・活用に関して以下のサービスをご提供しています。
・年間サポート
・各種書籍
・帳票出力（Excel/PDF）支援パック
プリザンターの導入から開発・運用をあらゆる角度から全力サポートいたします。
ぜひお気軽にご相談ください！
☆☆☆
サービスの説明などをご希望の方は【 問い合わせフォーム 】よりお気軽にお問い合わせください。
☆☆☆
テーマにあわせて見やすい画面にカスタマイズ
こんにちは、シーイーシーカスタマサービスの森山です。
プリザンターは業務システムとして便利ですが、毎日使う画面のデザインが使いづらいと、作業効率が下がってしまうこともあります。
プリザンターには テーマ（カラーバリエーション）を切り替える機能 があり、さらに少し工夫することで「テーマにあわせた見やすいデザイン」にカスタマイズすることができます。
特に毎日使うシステムだからこそ、見やすく使いやすい画面にすることで業務効率も向上します。