コンポーネントを編集

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

始める前に

必要なロール：admin

このタスクについて

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

コンポーネントごとのアクセシビリティ違反の合計数は、編集パネルページに表示されます。

手順

1. 移動先 すべて > Now Experience フレームワーク > テーマ > テーマビルダー.
   テーマビルダーのランディングページがホームページビューに表示されます。
2. 「ホーム」ページビューから、「エディター」ページビューを選択します。

   図 : 1. エディターページビュー

   

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

   

5. [ 編集] を選択します。
   注:

   編集可能なコンポーネントが表示されます。コンポーネントのリストをフィルタリングして編集するコンポーネントを見つける方法については、「 コンポーネントのプレビュー」を参照してください。
6. 編集するコンポーネントを選択します。
   編集タブに警告が表示された場合は、コンポーネントのインタラクションパネル内のすべての警告を解決して、コンポーネントから警告サインを削除する必要があります。
7. 構成可能なスタイルパネルで、選択したコンポーネントで使用可能なテーマフックを必要に応じて編集します。

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

   コンポーネント固有のスタイルはグローバルに定義されたスタイルよりも優先されるため、コンポーネント固有のフックを更新した後、グローバルスタイルに加えた変更を行ってもコンポーネントスタイルは更新されません。

8. 編集する色を選択すると、カラーピッカーが開きます。

   図 : 2. カラーピッカー

   

   注:

   デフォルトでは、カラーピッカーにはコンポーネントで利用可能なすべての色が表示されます。[アクセスできない選択肢を非表示] スライダーを選択すると、現在の WCAG ガイドラインに基づいて、色の選択肢をアクセス可能と識別されたものに制限できます。
9. 変更が完了したら、 [ 変更の保存] を選択します。
10. [編集] ページにリストされているコンポーネントを見ていると、一部のコンポーネントに次の記号が表示されていることに注意してください。

    

    注:

    アクセシビリティ警告記号は、選択したコンポーネントの色のコントラストが、色のコントラストに関する WCAG 2.1 アクセシビリティ標準に準拠していないことを示します。詳細については、「アクセシビリティ基準を満たすようにコンポーネントを調整する」を参照してください。