ユーザマニュアル


7月23日ハンズオンセミナー@中野開催! プリなま#25公開! ITreviewレビュー投稿キャンペーン レビュー投稿・公開でamazonギフトカード2000円分プレゼント! 年間サポートサービス-項目拡張-

2025/07/08

MANUAL

ユーザ管理機能:ユーザインターフェースのテーマをカスタマイズ

<style> details { border-radius: 4px; padding: .5em .5em 0; } summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em; } details[open] { padding: .5em; } details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em; } </style> ## 概要 画面のカラーバリエーションを変更できます。全体で共通のテーマを設定でき、さらにユーザは自分自身の画面に適用されるテーマを変更できます。 第2世代のテーマでは、カラーバリエーションが追加すると共に、ナビゲーションメニューをはじめ、第1世代と比較して全体的に使いやすさが向上しました。 ## レイアウトの種類 ナビゲ―ションメニューの位置によって、2種類のレイアウトがあります。 ### 第2世代ユーザインターフェースのレイアウト ナビゲーションメニューが画面左側に表示されるレイアウトです。 ![image](https://pleasanter.org/binaries/42c03ecdd3c5429dae9d6c2698b5ec9d) <details> <summary>こちらをクリックするとカラーテーマ一覧が開閉します。</summary> <table> <tr> <td style="width:50%; text-align:center;">cerulean<img src="/img/manual/second-age-theme/26cerulean.png" style="margin: 0 !important;"></td> <td style="width:50%; text-align:center;">green-tea<img src="/img/manual/second-age-theme/27green-tea.png" style="margin: 0 !important;"></td> </tr> <tr> <td style="width:50%; text-align:center;">mandarin<img src="/img/manual/second-age-theme/28mandarin.png" style="margin: 0 !important;"></td> <td style="width:50%; text-align:center;">midnight<img src="/img/manual/second-age-theme/29midnight.png" style="margin: 0 !important;"></td> </tr> </table> </details> ### カスタムナビゲーションメニューによる追加メニュー 2世代ユーザインターフェースは、「NavigationMenu.json」により子メニューを最大3階層まで追加設定できます。 ![image](https://pleasanter.org/binaries/8a6b35d4826643ca91ccbb10fcf39740) ### 第1世代ユーザインターフェースのレイアウト ナビゲーションメニューが画面右上に表示されるレイアウトです。 ![image](https://pleasanter.org/binaries/ca68a5813fc347cdafbd77d48c2866b3) - 選択可能な値は[jQuery UI](https://jqueryui.com/)のテーマ名です。 <details> <summary>こちらをクリックするとカラーテーマ一覧が開閉します。</summary> <table> <tr> <td style="width:33%; text-align:center;">base<img src="/img/manual/jquery-theme/01base.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">black<img src="/img/manual/jquery-theme/02black-tie.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">blitzer<img src="/img/manual/jquery-theme/03blitzer.png" style="margin: 0 !important;"></td> </tr> <tr> <td style="width:33%; text-align:center;">cupertino<img src="/img/manual/jquery-theme/04cupertino.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">dark-hive<img src="/img/manual/jquery-theme/05dark-hive.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">dot-luv<img src="/img/manual/jquery-theme/06dot-luv.png" style="margin: 0 !important;"></td> </tr> <tr> <td style="width:33%; text-align:center;">eggplant<img src="/img/manual/jquery-theme/07eggplant.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">excite-bike<img src="/img/manual/jquery-theme/08excite-bike.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">flick<img src="/img/manual/jquery-theme/09flick.png" style="margin: 0 !important;"></td> </tr> <tr> <td style="width:33%; text-align:center;">hot-sneaks<img src="/img/manual/jquery-theme/10hot-sneaks.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">humanity<img src="/img/manual/jquery-theme/11humanity.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">le-frog<img src="/img/manual/jquery-theme/12le-frog.png" style="margin: 0 !important;"></td> </tr> <tr> <td style="width:33%; text-align:center;">mint-choc<img src="/img/manual/jquery-theme/13mint-choc.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">overcast<img src="/img/manual/jquery-theme/14overcast.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">pepper-grinder<img src="/img/manual/jquery-theme/15pepper-grinder.png" style="margin: 0 !important;"></td> </tr> <tr> <td style="width:33%; text-align:center;">redmond<img src="/img/manual/jquery-theme/16redmond.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">smoothness<img src="/img/manual/jquery-theme/17smoothness.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">south-street<img src="/img/manual/jquery-theme/18south-street.png" style="margin: 0 !important;"></td> </tr> <tr> <td style="width:33%; text-align:center;">start<img src="/img/manual/jquery-theme/19start.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">sunny<img src="/img/manual/jquery-theme/20sunny.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">swanky-purse<img src="/img/manual/jquery-theme/21swanky-purse.png" style="margin: 0 !important;"></td> </tr> <tr> <td style="width:33%; text-align:center;">trontastic<img src="/img/manual/jquery-theme/22trontastic.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">ui-darkness<img src="/img/manual/jquery-theme/23ui-darkness.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;">ui-lightness<img src="/img/manual/jquery-theme/24ui-lightness.png" style="margin: 0 !important;"></td> </tr> <tr> <td style="width:33%; text-align:center;">vander<img src="/img/manual/jquery-theme/25vander.png" style="margin: 0 !important;"></td> <td style="width:33%; text-align:center;"></td> <td style="width:33%; text-align:center;"></td> </tr> </table> </details> ## 操作手順 ### ユーザが自分自身の画面のテーマを変更する 1. 「ナビゲーションメニュー」の[ユーザ](/ja/manual/table-management-choices-text-users)>「プロファイル編集」をクリックします。 1. 「テーマ」を選択します。 1. 画面下部の「更新」ボタンをクリックします。 ## その他のテーマ設定項目 プロファイル編集以外に、次の項目でテーマを設定できます。 |優先順位|設定場所|規定値| | --- | --- | --- | |1|[ユーザ管理機能](/ja/manual/user)の「テーマ」|指定なし| |2|[テナント管理機能](/ja/manual/tenant)の「テーマ」|指定なし| |3|[User.json](/ja/manual/user-json)の「Theme」|cerulean| - [User.json](/ja/manual/user-json)の「Theme」 の既定値である「cerulean」は、第2世代ユーザインターフェースに所属するテーマです。 ### 子メニューの追加 - 第2世代ユーザインターフェースのテーマは、「NavigationMenu.json」または[拡張ナビゲーションメニュー](/ja/manual/extended-navigationmenus)により、子メニューを最大3階層まで追加できます。 ### 旧世代テーマの適用 既定以外の旧世代ユーザインターフェースのテーマを適用できます。前述のその他のテーマ設定項目を参考に[ユーザ管理機能](/ja/manual/user)、[テナント管理機能](/ja/manual/tenant)または[User.json](/ja/manual/user-json)の設定を修正し、旧世代のテーマが適用されるように項目値を選択してください。 ## 制限事項 1. 最新のOSおよびブラウザのご利用を推奨します。一部の古いOSおよびブラウザでは、正常に動作しない場合があります。 1. 第2世代ユーザインターフェースのテーマは、「NavigationMenu.json」または[拡張ナビゲーションメニュー](/ja/manual/extended-navigationmenus)によるIconの指定には対応していません。 ## 対応バージョン |対応バージョン|内容| |:--|:--| |1.1.27.0以降|ユーザ単位のテーマ選択機能を追加| |1.4.3.0以降|テーマの既定値を「cerulean」に変更| ## 関連情報 <div id="ManualList"><ul><li><a href="/ja/manual/user-json">パラメータ設定:User.json</a><span>2024/12/12 up</span></li></ul></article> <ul><li><a href="/ja/manual/table-management-choices-text-users">テーブルの管理:エディタ:項目の詳細設定:選択肢一覧:ユーザ</a><span>2023/04/25 up</span></li></ul></article> <ul><li><a href="/ja/manual/user">ユーザ管理機能</a><span>2025/07/08 up</span></li></ul></article> <ul><li><a href="/ja/manual/extended-navigationmenus">開発者向け機能:拡張機能:拡張ナビゲーションメニュー</a><span>2024/10/17 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
TOP
このページをシェアする
記載された商品名、各製品名は各社の登録商標または商標です。 © Implem Inc.