コンポーネントのデフォルトの外観を変更する
コンポーネントとラッパーのスタイルを設定して、デフォルトの外観を変更します。
このビデオでは、次の手順を実行する方法を紹介します。
始める前に
必要なロール：ui_builder_admin
このタスクについて
このタスクでは、コンポーネントとコンポーネントを含むラッパー (本文、列レイアウト、列など) にスタイルを追加する方法について説明します。コンテンツツリーでコンポーネントを選択してコンポーネントのスタイリングをカスタマイズするか、コンポーネントをラッパー内に配置して複数のコンポーネントにスタイルを適用します。
エクスペリエンス全体にスタイリングを追加する方法の詳細については、「UI ビルダーエクスペリエンスの表示スタイルの管理」を参照してください。
このタスクは、Xanadu で導入された新しいレイアウトシステムに適用されます。ページで古いレイアウトシステムを使用している場合は、詳細について「古いレイアウトシステムを使用したコンポーネントへのスタイリングの追加」を参照してください。
手順
-
本文またはコンポーネントの場合は、構成パネルで [スタイル] タブを選択します。
-
[スタイル] タブの視覚的表現を使用して、ページの外観に最適なものを決定します。
- アクセシビリティ (列レイアウトと列)
- ARIA リージョン名、ARIA リージョン見出しレベル、ARIA ロール、ARIA 見出しの包含などのアクセシビリティ設定を指定します。詳細については、developer.servicenow.com の ARIA ドキュメントを参照してください。
- 配置 (列とコンポーネント)
- 列の場合、列内のコンポーネントをグループとして整列する方法を定義します。コンポーネントの場合、列や列レイアウトなど、親レイアウト要素内でのコンポーネントの配置方法を定義します。
- 背景 (本文、列レイアウト、列、およびコンポーネント)
- レイアウト要素の背景色を設定します。カラーピッカーの [マイカラー] タブから色を選択します。ここには、使用可能な色がグリッドまたはリストで表示されます。または、[カスタム] タブを使用して、HEX、RGB、または HSL で任意の色を指定します。
- 境界線 (列レイアウト、列、およびコンポーネント)
- コンテンツの周囲に境界線を追加します。この境界線は、余白のすぐ内側とパディングのすぐ外側に配置されます。境界線の太さ、タイプ、色、およびコーナー形状を指定します。コンポーネントの場合、境界線にカスタム CSS を使用するオプションがあります。
- レイアウト (本文、列レイアウト、および列)
- 本文と列の場合は、方向、配置、およびコンテンツの両端揃えを指定します。列レイアウトの場合は、列数と列ギャップ (列間のスペース) を指定します。
- シャドー (列レイアウト、列、およびコンポーネント)
- コンテンツの周囲にシャドー効果を追加します。カスタム CSS を使用するオプションがあります。
- サイジング (コンポーネント)
- 該当するコンポーネントについて、コンポーネントのデフォルト、最小、最大の高さと幅を設定します (px、%、em、rem、またはカスタム値)。この値は、ユーザーがブラウザーウィンドウのサイズを変更した際に適用されます。
- スペース (本文、列レイアウト、およびコンポーネント)
- マージンは、本文、列レイアウト、またはコンポーネントのすぐ内側のスペースのサイズを設定します。パディングは、本文、列レイアウト、またはコンポーネントのすぐ外側のスペースのサイズを設定します。4 つのサイドのすべてに同じサイズを設定するには、[マージン] または [パディング] を選択します。
- 現在の設定を選択してからオプションを選択することで、各マージンまたはパディングのサイドのサイズを設定できます。
- オプション: 本文およびコンポーネントの場合、CSS コードを編集するには、[スタイル] タブの下部にある [CSS の表示と編集] リンクを選択します。
[スタイル] タブに CSS スタイルコードエディターが表示されます。最も一般的に使用される CSS プロパティは次のとおりです。
background-colorbackground-imageborder-styleborder-widthborder-colorborder-radiusbox-shadowheightmin-heightmax-heightmarginoverflowpaddingwidthmin-widthmax-widthz-index
重要:一部のコンポーネントには、UI ビルダー の CSS で上書きできないビルトインのスタイリング構成が含まれています。これらのスタイル設定をオーバーライドする方法については、「UI ビルダーエクスペリエンスの表示スタイルの管理」を参照してください。
古いレイアウトシステムを使用したコンポーネントへのスタイリングの追加
コンポーネントの CSS スタイルを設定して、デフォルトの外観を変更します。
始める前に
必要なロール：ui_builder_admin
このタスクについて
このタスクでは、コンポーネントを含むラッパーにスタイルを追加する方法について説明します。通常は、コンポーネントにスタイルを直接適用するのではなく、この方法をお勧めします。スタイルを定義するコンポーネントがコンテナコンポーネント内に配置され、コンポーネントがラッパーに配置されていることを確認します。コンポーネントのラッパーはコンテンツ階層内のコンポーネントより 1 レベル高く、デフォルトでは「メイン」というラベルが付けられています。
ページ全体にスタイリングを追加するには、ページのラッパーで標準ベースの CSS を使用できます。エクスペリエンス全体にスタイリングを追加する方法の詳細については、「UI ビルダーエクスペリエンスの表示スタイルの管理」を参照してください。
手順
-
メインヘッダーで、[保存] を選択して変更を保存します。
図 : 1. [スタイル構成] パネルでコンポーネントにスタイルを追加する