こんにちは
Next Experienceの右上にある名前アイコンの表示について、以下の通り丸から文字がはみ出ている状態になっています。
この表示をきれいに整える方法、アイデアがあればご教示ください。
このアイコンに表示される文字はsys_userテーブルのfirst_name, last_nameの一文字目だと予想しています。その２つのフィールドを日本語（漢字）で設定してるためにこのような表示になっていると思われます。
以上よろしくお願いいたします。
名前アイコンの表示設定を変えるにはUX Styleを設定することで、ある程度は調整できます。ある程度というのは、調整できる箇所は決まっています。
UX Styleの 詳しい情報は以下のページが参考になります。
Next Experience UI - テーマについて - サポートとトラブルシューティング (servicenow.com)
その名前アイコンの表示設定を探る手掛かりとしてブラウザの開発者ツールを使ってHTMLのスタイルの設定を確認します。
以下は一例として開発者ツールでスタイルを確認している画面です、background-color が --now-avatar--background-color 246,246,248 で設定されていることがわかります。この形式のスタイルはUX Styleで設定変更ができます。様々な個所にPropertyがあるので探して調整してみると良いです。
そして、色々と変えてみた結果、調整できました。フォントも変えて少々小さく見えるようにして、丸が大きくなっています。
丸が大きくなったのは意外な設定値でした。以下のPropertyをUX Styleに設定してテーマに反映させます。
"--now-avatar--border-width": "17px"
フォントは見た目小さくなるものにしました。
"--now-avatar--font-family": "system-ui",
これが正解かどうかはわかりません。検証してみてください。
テーマやUX Styleの詳しい設定方法は、上記の記事やDocsを参考にしてください。
テーマと設定の構成Next Experience (servicenow.com)
初めての Next Experience UI テーマの作成 (アップデート) - ServiceNow Community
名前アイコンの表示設定を変えるにはUX Styleを設定することで、ある程度は調整できます。ある程度というのは、調整できる箇所は決まっています。
UX Styleの 詳しい情報は以下のページが参考になります。
Next Experience UI - テーマについて - サポートとトラブルシューティング (servicenow.com)
その名前アイコンの表示設定を探る手掛かりとしてブラウザの開発者ツールを使ってHTMLのスタイルの設定を確認します。
以下は一例として開発者ツールでスタイルを確認している画面です、background-color が --now-avatar--background-color 246,246,248 で設定されていることがわかります。この形式のスタイルはUX Styleで設定変更ができます。様々な個所にPropertyがあるので探して調整してみると良いです。
そして、色々と変えてみた結果、調整できました。フォントも変えて少々小さく見えるようにして、丸が大きくなっています。
丸が大きくなったのは意外な設定値でした。以下のPropertyをUX Styleに設定してテーマに反映させます。
"--now-avatar--border-width": "17px"
フォントは見た目小さくなるものにしました。
"--now-avatar--font-family": "system-ui",
これが正解かどうかはわかりません。検証してみてください。
テーマやUX Styleの詳しい設定方法は、上記の記事やDocsを参考にしてください。
テーマと設定の構成Next Experience (servicenow.com)
初めての Next Experience UI テーマの作成 (アップデート) - ServiceNow Community
