のロゴ、色、およびシステムデフォルトの設定 コア UI

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む7読むのに数分

    • 基本構成 コア UI モジュールを使用して、会社のロゴと色でインスタンスをブランディングし、基本的なシステムデフォルトを設定できます。インスタンスを初めて設定する場合、または最近有効 コア UIにした場合は、この場所が最適な開始点です。

    始める前に

    基本構成を完了する準備をするには、次の情報を収集します。
    • ヘッダーで使用する会社のバナー画像を取得します。画像は高解像度にすることができますが、表示されるときは縦横比に基づいて拡大縮小されます。高さは最大 20 px まで拡大縮小されます。
    • 通常はマーケティング部門から、会社のブランド色の 16 進数または RGB 番号を取得します。これらを使用して、UI 背景色の構成方法を決定します。

    必要なロール：admin

    このタスクについて

    各色選択オプションには、色を選択するためのカラーピッカーがあります。カラーピッカーの横にあるテキストボックスには、次のいずれかの CSS 形式で色の値を入力できます。
    • 名前:赤、緑、青などの事前定義された色の名前
    • RGB 10 進数:RGB (102、153、204)
    • RGB 16 進数：#223344
    HTML 色名の詳細については、「 HTML 色名 (W3CSchools)」 を参照してください。

    手順

    1. 移動先 すべて > システムプロパティ > 基本構成 UI16.
    2. 次のいずれかの設定を変更して、構成を完了します。
      表 : 1. 基本的なシステム構成プロパティ
      ラベル プロパティ 説明
      ページヘッダーキャプション glide.product.description ロゴの横に表示されるテキストを変更します。
      ページタブタイトル glide.product.name ブラウザタブに表示されるテキストを変更します。
      カレンダーやユーザのデフォルトとして使用されるシステムタイムゾーン。<a class="web" href="http://en.wikipedia.org/wiki/List_of_zoneinfo_time_zones" target="_blank">オルソン/ゾーン情報タイムゾーン値</a>は使用可能です。例：<pre>アフリカ/ヨハネスブルクアメリカ/トロントアメリカ/メキシコシティ南極/ボストークアジア/上海アジア/東京オーストラリア/シドニー欧州/ベルリン欧州/ロンドン米国/太平洋米国/山地米国/中央米国/東部</pre> glide.sys.default.tz 選択リストでタイムゾーンを選択します。

      [ 利用可能なタイムゾーンの構成 ] をクリックして、ユーザーがユーザー初期設定で選択できるタイムゾーンを選択します。
      UI16 のバナーイメージ glide.product.image.light 画像の横にある [+ ] をクリックし、ロゴをアップロードします。
      日付形式

      時間形式

      		 glide.sys.date_format

      glide.sys.time_format

      		 選択リストから日時の形式を選択します。
      ヘッダーの背景色 css.$navpage-header-bg 色を選択または入力します。
      ヘッダーの背景
      この色は、[システムの設定] の [テーマ] タブのテーマ プレビューの一部としても使用されます。
      バナーテキストの色： css.$navpage-header-color 色を選択または入力します。
      バナーテキストの色：
      この色は、[システムの設定] の [テーマ] タブのテーマ プレビューの一部としても使用されます。
      ヘッダー分割線のストライプカラー css.$navpage-header-divider-color 色を選択または入力します。
      ヘッダー仕切りストライパー
      ナビゲーションヘッダー/フッター css.$navpage-nav-bg 色を選択または入力します。
      ナビゲーション
      ナビゲーション背景の展開されたアイテム css.$subnav-background-color 色を選択または入力します。
      色の違いを示す展開されたモジュールを含むアプリケーション
      UI16 のモジュールテキストの色 css.$navpage-nav-color-sub 色を選択または入力します。
      お気に入り、接続リスト
      ナビゲーション選択タブの背景色 css.$navpage-nav-selected-bg 色を選択または入力します。
      選択済みタブ
      ナビゲーション選択されたタブの分割線の色 css.$nav-highlight-bar-active
      [すべてのアプリケーション] タブが選択され、タブの下の線が青色であることを示す矢印が表示されたアプリケーションナビゲーター
      この色は、[システムの設定] の [テーマ] タブのテーマ プレビューの一部としても使用されます。
      ナビゲーション選択していないタブの分割線の色 css.$nav-highlight-bar-inactive
      [すべてのアプリケーション] タブが選択され、線が別の色であることを示す他のタブを指す矢印が表示されたアプリケーションナビゲーター
      ナビゲーションセパレータの色 css.$nav-hr-color 色を選択または入力します。
      セパレーター
      ナビゲーターとサイドバーの背景 css.$navpage-nav-bg-sub 色を選択または入力します。
      ナビゲーター、サイドバー
      UI16 に対して現在選択されているナビゲーションタブアイコン色 css.$navpage-nav-selected-color 色を選択または入力します。
      ナビゲーションアイコン
      選択していないナビゲーションタブアイコンとお気に入りのアイコンの色 css.$navpage-nav-unselected-color 色を選択または入力します。

      選択されていないお気に入りアイコン
      UI16 の境界色 css.$navpage-nav-border 色を選択または入力します。Connect チャットサイドバーの [ 会話をフィルタリング ] 検索ボックスの境界にも影響します。
      フィルターナビゲーター
      選択された基本のテーマ glide.ui.base_theme.selected_theme メインコンテンツ (アプリケーションナビゲーターとヘッダー以外のすべて) を La Jolla テーマと Cobalt テーマの間で切り替えます。
      ほとんどの設定では、変更を加えると、変更のプレビューが表示されてページが更新されます。これらの変更は自分だけに表示されます。一部の設定では、変更を確認するためにログアウトして再度ログインする必要があります。
    3. ページの上部または下部にある [ 保存 ] をクリックします。

    タスクの結果

    構成の変更を保存すると、UI カスタマイズオプションで システム テーマを選択したすべてのユーザーに、新しい構成色が表示されます。

    ラホーヤとコバルトのテーマの比較

    ラホーヤのテーマは、新しいブランドのテーマ ServiceNowです。に Madridアップグレードすると、テーマは自動的に La Jolla テーマにアップグレードされます。システムテーマに対して行ったカスタマイズはアップグレードされません。以下のリストのスタイルを使用して、スタイルをアップグレードしたり、新しいテーマまたは古いテーマに戻したりします。

    これらのスタイルのいずれかを変更するには、次の場所に移動します。 システムプロパティ > 基本構成 UI16.

    表 : 2. La Jolla と Cobalt のテーマスタイル
    プロパティ ラホーヤスタイル コバルトスタイル
    ヘッダーの背景色

    css.$navpage-header-bg

    		 #ffffff #303a46
    ヘッダー分割線のストライプカラー

    css.$navpage-header-divider-color

    		 #5a7f71 #455464
    ナビゲーションヘッダー/フッター

    css.$navpage-nav-bg

    		 #293e40 #303A46
    ナビゲーション背景の展開されたアイテム

    css.$subnav-background-color

    		 #213234 #303a46
    UI16 のモジュールテキストの色

    css.$navpage-nav-color-sub

    		 #bec1c6 #bec1c6
    ナビゲーション選択タブの背景色

    css.$navpage-nav-selected-bg

    		 #2f4fe #4b545f
    ナビゲーション選択されたタブの分割線の色

    css.$nav-highlight-bar-active

    		 #82c9b8 #278efc
    ナビゲーション選択していないタブの分割線の色

    css.$nav-highlight-bar-inactive

    		 #213234 #81878e
    ナビゲーションセパレータの色

    css.$nav-hr-color

    		 #293e40 #303a46
    ナビゲーターとサイドバーの背景

    css.$navpage-nav-bg-sub

    		 #293e40 #455464
    UI16 に対して現在選択されているナビゲーションタブアイコン色

    css.$navpage-nav-selected-color

    		 #82c9b8 #ffffff
    選択していないナビゲーションタブアイコンとお気に入りのアイコンの色

    css.$navpage-nav-unselected-color

    		 #bec1c6 #bec1c6
    UI16 の境界色

    css.$navpage-nav-border

    		 #7a828a #ddd
    選択された基本テーマ

    glide.ui.base_theme.selected_theme

    		 ラホーヤSysysID:c92c1ee153002300dda1ddeeff7b125b コバルトSysID:6f3c9ae153002300dda1ddeeff7b124a