<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世代と比較して全体的に画面の使いやすさが向上しました。 ## 制限事項 1. 第2世代ユーザインターフェースのテーマの場合は、「NavigationMenu.json」または[拡張ナビゲーションメニュー](/ja/manual/extended-navigationmenus)による子メニューの追加は最大3階層まで設定できます。 1. 第2世代ユーザインターフェースのテーマの場合は、「NavigationMenu.json」または[拡張ナビゲーションメニュー](/ja/manual/extended-navigationmenus)によるIconの指定には対応していません。 ## 操作手順 以下の手順で、ユーザは自分自身の画面に適用されるテーマを変更できます。 1. 「ナビゲーションメニュー」の[ユーザ](/ja/manual/table-management-choices-text-users)メニュー配下の「プロファイル編集」をクリックします。 1. 「テーマ」を選択します。 1. 画面下部の「更新」ボタンをクリックします。 ## テーマ適用の優先順位 画面に適用される優先順位が高い順に、以下の3箇所にテーマを指定する項目があります。 1. [ユーザ管理機能](/ja/manual/user)の「テーマ」 1. [テナント管理機能](/ja/manual/tenant)の「テーマ」 1. [User.json](/ja/manual/user-json)の「Theme」 ## テーマの既定値 1. [ユーザ管理機能](/ja/manual/user)の「テーマ」の既定値は「指定なし」です。 1. [テナント管理機能](/ja/manual/tenant)の「テーマ」の既定値は「指定なし」です。 1. [User.json](/ja/manual/user-json)の「Theme」 の既定値は「cerulean」です。 ## ユーザインターフェースの世代分類 ### 既定のユーザインターフェースの世代分類 [User.json](/ja/manual/user-json)の「Theme」 の既定値である「cerulean」は、第2世代ユーザインターフェースに所属するテーマです。 ### 旧世代のテーマを適用する方法 既定以外の旧世代ユーザインターフェースのテーマを適用できます。前述の「テーマの既定値」の優先順位を参考に[ユーザ管理機能](/ja/manual/user)、[テナント管理機能](/ja/manual/tenant)及び[User.json](/ja/manual/user-json)の設定を修正し、旧世代のテーマが適用されるように項目値を選択してください。 ## 第2世代ユーザインターフェース ### 第2世代ユーザインターフェースのレイアウト 第2世代ユーザインターフェースは、ナビゲーションメニューが画面左側に表示されるレイアウトです。  ### 第2世代ユーザインターフェースのテーマ一覧 1. 以下のテーマから選択できます。 <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世代ユーザインターフェースのカスタムナビゲーションメニューによる追加メニュー 2世代ユーザインターフェースの「NavigationMenu.json」による子メニューの追加は最大3階層まで設定できます。  ## 第1世代ユーザインターフェース ### 第1世代ユーザインターフェースのレイアウト 第1世代ユーザインターフェースは、ナビゲーションメニューが画面右上に表示されるレイアウトです。  ### 第1世代ユーザインターフェースのテーマ一覧 1. 以下のテーマから選択できます。 1. 選択可能な値は[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.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>2024/05/14 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="" />