コンポーネントの編集

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

始める前に

必要なロール：admin

このタスクについて

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

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

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

手順

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

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

   

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

   

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

   

   注:

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

   

   注:

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

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

   

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

   注:

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

   図 : 3. カラーピッカー

   

   注:

   デフォルトでは、カラーピッカーにはコンポーネントで利用可能なすべての色が表示されます。[アクセスできない選択肢を非表示にする] スライダーを選択すると、Web コンテンツアクセシビリティガイドライン (WCAG) ガイドラインに基づいて、アクセス可能として識別された色に色の選択肢を制限できます。
9. 色の変更が完了したら、[ 変更を保存] を選択します。
10. 編集する形状を選択した場合は、セレクターモーダルを使用して境界線の幅と角の半径を選択します。
11. 図形の変更が完了したら、[ 変更の保存] を選択します。
12. 編集するフォントファミリーまたはフォントフェイスを選択すると、セレクターモーダルが開きます。

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

    

    注:

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

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

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

      

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

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

    

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

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

    

タスクの結果

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