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

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

始める前に

次のものを収集します。

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

必要なロール：admin

このタスクについて

各色選択オプションには、色を選択するためのカラーピッカーがあります。カラーピッカーの横にあるテキストボックスには、次のいずれかの CSS 形式で色の値を入力できます。

• 名前:赤、緑、青などの事前定義された色名
• RGB 10 進数:RGB (102、153、204)
• RGB 16 進数：#223344

HTML 色名については、「 HTML 色名 (W3CSchools)」 を参照してください。

注:

この情報は コア UIに適用されます。ネクストエクスペリエンスのテーマについては、「でのテーマの探索 ネクストエクスペリエンス」を参照してください。

手順

1. 移動先 すべて > システムプロパティ > 基本構成 UI16.
2. 次のいずれかの設定を変更して、構成を完了します。

   表 : 1. システムの基本構成プロパティ

   ラベル	プロパティ	Description (説明)
   ページヘッダーキャプション	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	リストからタイムゾーンを選択します。 [ 利用可能なタイムゾーンの構成 ] を選択して、ユーザーがユーザー設定で選択できるタイムゾーンを選択します。
   のバナーイメージ コア UI	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	色を選択または入力します。
   コア UIアプリケーションナビゲーターのモジュールテキストの色	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	色を選択または入力します。
   に対して現在選択されているナビゲーションタブのアイコン色 コア UI	css.$navpage-nav-selected-color	色を選択または入力します。
   選択していないナビゲーションタブアイコンとお気に入りのアイコンの色	css.$navpage-nav-unselected-color	色を選択または入力します。
   のボーダー色 コア UI	css.$navpage-nav-border	色を選択または入力します。コネクトチャットサイドバーの [ 会話をフィルタリング ] 検索ボックスの境界線にも影響します。
   選択された基本のテーマ	glide.ui.base_theme.selected_theme	メインコンテンツ (アプリケーションナビゲーターとヘッダー以外のすべて) を La Jolla テーマと Cobalt テーマの間で切り替えます。

   ほとんどの設定では、変更を加えると、変更のプレビューが表示されてページが更新されます。これらの変更は自分だけに表示されます。一部の設定では、変更を確認するためにログアウトして再度ログインする必要があります。
3. ページの上部または下部にある [ 保存 ] を選択します。

タスクの結果

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

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

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

これらのスタイルを変更するには、 システムプロパティ > 基本構成 UI16.

表 : 2. ラホーヤとコバルトのテーマスタイル

プロパティ	ラホーヤスタイル	コバルトスタイル
ヘッダーの背景色 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	ラホーヤのSysID:c92c1ee153002300dda1ddeeff7b125b	コバルトSysID:6f3c9ae153002300dda1ddeeff7b124a