MAIL
「cerulean」テーマの場合に「見出し」のスタイルをカスタマイズする
今回は第二世代テーマの中から、「cerulean」テーマを例に設定してみましょう。
まずは選択中のテーマを判定し、「cerulean」が選択されていた場合にCSSクラスをbody要素に追加するスクリプトを設定します。
スクリプトの出力先は「新規作成」と「編集」を指定してください。
$p.events.on_editor_load = function () {
// テーマにceruleanが選択されている場合にCSSクラスを追加する。
if ($('#Theme').val() === "cerulean") {
$('body').addClass('cerulean-custom-style');
}
};スタイルの出力先はスクリプトと同様に「新規作成」と「編集」を指定してください。
/* スクリプトと組み合わせてceruleanテーマの時だけ適用 */
body.cerulean-custom-style .field-section {
/* ===================================
見出しのスタイル設定
=================================== */
/* 旧バージョン風のレイアウトに調整 */
float: none;
width: auto;
margin: 16px 0 16px 16px;
padding: 16px 4px 0;
display: block;
clear: both;
border-bottom: solid 1px #c0c0c0;
/* 背景色(青)を解除 */
background-color: unset;
/* 文字色を白からvar(--base-text) に変更*/
color: var(--base-text);
/* 角丸を解除 */
border-radius: 0;
/* デフォルトだと縦方向の余白が大きいため、autoに設定する */
min-height: auto;
/* フォントとサイズ指定 */
font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
font-size: 13px;
font-weight: bold;
/* ===================================
「セクションの折りたたみを許可」ON時のアイコン設定
=================================== */
/* アイコンを見出し行内に表示 */
.ui-icon-triangle-1-s,
.ui-icon-triangle-1-e {
display: inline-block;
}
/* アイコンのサイズ・位置を自動に設定 */
.ui-icon {
margin-top: auto;
height: auto;
width: auto;
/* 展開時のアイコン */
&.ui-icon-triangle-1-s:after {
content: "arrow_drop_down";
}
/* 折りたたみ時のアイコン */
&.ui-icon-triangle-1-e:after {
content: "arrow_right";
}
}
}上記を設定する前の「見出し」項目の見た目は以下の通りです。
設定を適用した後の「見出し」項目の見た目は以下の通りです。
「セクションの折りたたみを許可」をONにしている場合も適用できています。
※スタイルやスクリプトで設定した内容は、プリザンターのバージョンアップに伴う仕様変更などにより、機能しなくなる場合があります。予めご了承ください。
まとめ
いかがでしたか。
プリザンターはテーマ機能をうまく活用することで、
・作業効率を上げる「見やすさ」
・継続利用につながる「使いやすさ」
・自社に合わせた「デザイン性」
を兼ね備えたシステムに変えることができます。
今回は「見出し」項目のカスタマイズを例にしましたが、他にも様々な項目に応用可能です。
プリザンターはバージョン更新により、セキュリティの強化や便利な機能が追加されています。
画面デザインの変更がネックとなってバージョン更新を控えている、という様な場合は、まずは今回ご紹介した対応方法を検討してみてください。
弊社では、プリザンター導入・活用に関して以下のサービスをご提供しています。
・年間サポート
・各種書籍
・帳票出力（Excel/PDF）支援パック
プリザンターの導入から開発・運用をあらゆる角度から全力サポートいたします。
ぜひお気軽にご相談ください！
☆☆☆
サービスの説明などをご希望の方は【 問い合わせフォーム 】よりお気軽にお問い合わせください。
☆☆☆
テーマにあわせて「見出し」のスタイルをカスタマイズ
こんにちは。シーイーシーカスタマサービスの河野です。
プリザンターは毎月のアップデートで新機能が続々と追加され、公式サイトのアップデート情報を楽しみにされている方も多いのではないでしょうか。
とはいえ、バージョンアップで画面デザインが変わった際に「見た目だけは使い慣れた旧バージョンにしたい」という場合があると思います。
そこで今回は、以前ご紹介した「【プリザンター】 第313回）プリザンターのテーマ別に画面デザインをカスタマイズする方法」を元に、「見出し」項目のカスタマイズ例として、旧バージョン風の見た目に設定する方法をご紹介します。