コンポーネントの編集

個々のコンポーネント テーマビルダー 編集して、ブランドに合わせてアクセシビリティ適合基準を満たすようにします。編集できるテーマフックは、コンポーネントのタイプごとに固有です。

始める前に

必要なロール：ui_builder_admin

詳細なロールの詳細については、「 Granular admin roles」を参照してください。

このタスクについて

テーマビルダーで編集できるコンポーネントは、ServiceNow AI Platform デザインシステムで作成されました。詳細については、ServiceNow 開発者サイトの「Next Experience コンポーネント」を参照してください。

統一ナビゲーション コンポーネントの編集手順については、「統一ナビゲーションコンポーネントを使用してブランドに合わせる」を参照してください。

アクセシビリティ違反の総数は、赤色の番号付きバッジアイコン

手順

1. 移動先 すべて > Now Experience フレームワーク > テーマビルダー.
   テーマビルダー ランディングページがホームページビューに表示されます。
2. [ページ] ドロップダウンリストを使用して、[エディター] ページビューを選択します。

   図 : 1. [ページ] ドロップダウン リスト

   

3. [テーマ] ドロップダウンリストから、コンポーネントを編集するテーマを選択します。
4. [エディター] ページビューから、[ コンポーネントスタイル ] タブを選択します。
   コンポーネントスタイルがグラフィカルにリストされます。

   

5. [ 編集中 ] タブを選択します。

   

   注:

   編集可能なコンポーネントが表示されます。コンポーネントのリストをフィルタリングして編集するコンポーネントを見つける方法については、「 コンポーネントのプレビュー」を参照してください。
6. 編集するコンポーネントを選択して、[構成可能なスタイル] パネルにアクセスします。
   [編集中] ページにリストされているコンポーネントを見ると、一部のコンポーネントに次の記号が表示される場合があります。

   

   注:

   アクセシビリティに関する警告記号は、選択したコンポーネントの色のコントラストが、Web コンテンツアクセシビリティガイドライン (WCAG) 2.1 の色のコントラストに関するアクセシビリティ標準に準拠していないことを示します。アクセシビリティ違反のあるコンポーネントの編集については、「 アクセシビリティ基準を満たすようにコンポーネントを調整する」を参照してください。
7. [構成可能なスタイル] パネルから、必要に応じて、選択したコンポーネントで使用できるテーマフックを編集します。

   図 : 2. 構成可能なスタイルパネル

   

   利用可能な編集可能なテーマフックは、選択したコンポーネントのタイプによって異なります。たとえば、バッジコンポーネントを選択すると、バッジの色とアクセシビリティフックを編集できます。テキストリンクコンポーネントを選択すると、ベースカラーとアクセシビリティフックを編集できます。

   注:

   コンポーネント固有のフックを更新した後は、グローバルスタイルから行った変更はコンポーネントの編集には影響しません。コンポーネント固有のスタイルは、グローバルに定義されたスタイルよりも優先されます。
8. 編集する色を選択すると、カラーピッカーが開きます。

   図 : 3. カラーピッカー

   

   注:

   デフォルトでは、カラーピッカーにはコンポーネントで利用可能なすべての色が表示されます。[ マイカラー ] タブを使用して、事前定義された色のリストから選択するか、[ カスタム] タブを選択して、希望する特定のカラーモデル (HEX、RGB、または HSL) を選択します。
9. 色の変更が完了したら、[ 変更を保存] を選択します。
10. 編集する形状を選択した場合は、セレクターモーダルを使用して境界線の幅と角の半径を選択します。
11. 図形の変更が完了したら、[ 変更の保存] を選択します。
12. 編集するフォントファミリーまたはフォントフェイスを選択すると、セレクターモーダルが開きます。

    図 : 4. フォントファミリーモーダルを編集

    

    注:

    カスタムフォントをアップロードした場合は、選択用のモーダルに表示されます。セレクターモーダルからカスタムフォントを直接アップロードして、テーマ全体で使用することもできます。詳細については、「テーマへのカスタムフォントのアップロード」を参照してください。
13. フォントの変更が完了したら、[ 変更を保存] を選択します。
14. オプション: 必要に応じて、元に戻すアイコン を選択して、フォントを Source Sans Pro に戻します。
15. コンポーネントエディターにアクセスします。ここでは、次の 2 つの方法のいずれかを使用して、コンポーネントのさまざまな側面のスタイルを設定できます。
    • コンポーネントタイルをダブルクリックします。
    • 特定のコンポーネントで使用可能なものに応じて、構成可能なスタイルパネル内で [ スタイルのインタラクション]、[ サブコンポーネントのスタイル]、または [バリアントのスタイル ] ボタンのいずれかを選択します。
      注:

      すべてのコンポーネントに編集可能なパーツが含まれているわけではありません。

      図 : 5. コンポーネントエディター

      

16. コンポーネントエディターから、選択したコンポーネントのインタラクション、バリアント、またはサブコンポーネントを選択し、利用可能なテーマフックを編集します。
    注:

    カラーフックのいずれかへの変更を保存すると、「上書きを削除」シンボルが表示されます。[上書きを削除] シンボルを使用すると、色の変更を元の自動生成された色に戻すことができます。

    

17. オプション: ナビゲーションパス内のリンクを使用して、[コンポーネントの概要] 画面に戻ります。

    図 : 6. コンポーネント編集ブレッドクラムナビゲーション

    

タスクの結果

テーマが公開されている場合、コンポーネントの編集内容は、リフレッシュ時にテーマを適用しているユーザーに表示されます。テーマの公開の詳細については、「 テーマビルダーでテーマを公開する」を参照してください。