コンポーネントの編集

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

始める前に

必要なロール：admin

このタスクについて

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

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

手順

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

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

   

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

   

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

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

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

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

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

   図 : 2. カラーピッカー

   

   注:

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

    

    注:

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