配色 - カスタム

SysAdmin は、独自のカスケードスタイルシート (*.css) を作成してカスタム配色としてアップロードし、システム上で任意の組織によって使用できるようしてください。

カスタム配色の作成

カスタム配色の作成とテストを行うには:

SysAdmin アカウントを使用してサインオンします。
[Schemes (配色)] リンクをクリックして配色のリストを表示し、配色をプレビューします。
理想に最も近い配色の横にある [Open This Scheme (この配色を開く)] ボタンをクリックします。
デスクトップ上に新しいテキストファイルを作成し、その名前を myscheme.css に変更します。
スタイルシートコードを配色プロファイルから新しいスタイルシートにコピーして保存します。
デスクトップ上でスタイルシートに変更を加えて保存します。理想的な外観を得るために変更できる css スタイルについては、「認識されるスタイル」のリストを参照してください。
[Scheme (配色)] リストで[Add Scheme (配色の追加)] リンクをクリックして、デスクトップ上のスタイルシートを選択し、名前を付けてアップロードします。
[Scheme (配色)] リストで、新しい配色をプレビューします。必要に応じて、ステップ 6 からの手順を繰り返します。

認識されるスタイル

このセクションでは、配色の外観を変更するために編集できる css スタイルについて説明します。お使いの配色の css に表示されてないスタイルは、手動で追加できます。

スタイル	説明
`#maintable`	各 Web ページのコンテンツを含んでいるメインテーブルの ID。このスタイルは、コンテンツを境界線で囲む場合や、ページの他の部分とは異なる色を背景色に使用する場合などに役立ちます。
`.sectiontitle`	コンテンツセクションのサブタイトル。このスタイルにはフォントの COLOR を指定します。
`.userhead`	[Search (検索)] ボックスの背景色、および [My Account (マイアカウント)] と [Sign Out (サインアウト)] が含まれているページの上部にあるユーザーバーの色。このスタイルには BACKGROUND-COLOR を指定します。注: 上部のユーザーバーに別の色を指定するには、`#userbar` を使用してください。
`a.userhead:link`	ユーザーヘッドセクションのリンクの色。COLOR を使用する必要があります。
`a.userhead:visited`	a.userhead:link と同一にします。
`a.userhead:active`	a.userhead:link と同一にします。
`a.userhead:hover`	a.userhead:link と同一にします。
`#userbar`	[My Account (マイアカウント)] と [Sign Out (サインアウト)] が含まれているページの上部にあるユーザーバーの色。
`#userbar > td`	ページ上部にあるユーザーバーの上部境界線と下部境界線の色。BORDER-TOP および BORDER-BOTTOM プロパティを指定します。例: `{border-top:solid 1px #8CC63F; border-bottom:solid 1px #8CC63F}`
`.listrow1`	テーブル内の奇数行。このスタイルには BACKGROUND-COLOR のみ指定します。
`.listrow2`	テーブル内の偶数行。このスタイルには BACKGROUND-COLOR のみ指定します。
`.texttiny`	テーブルヘッダー、一部のテーブル情報。`.textsmall` と同様にします。
`.textsmall`	大半の標準テキストで使用されます。
`.textnormal`	名前とは異なり、通常より大きいテキストによって使用されます。
`.textbig`	特大テキスト。`.textnormal` と同様にします。
`.userinput`	ユーザー入力ボックスとドロップダウンリストで使用されるフォントの色とサイズ。`.textsmall` と同様にします。
`.userinputarea`	テキスト領域。`.userinput` と同一にします。
`.pageheadingimage`	レガシーアイコンを表示または非表示にします。「ブランド」も参照してください。
`.bulletimage`	組織の行頭文字を表示または非表示にします。「ブランド」も参照してください。
`[Body (本文)]`:	ドキュメントの本文。少なくとも BACKGROUND-COLOR を使用してください。
`a:link`	リンクの色。COLOR を使用する必要があります。
`a:visited`	訪問されたリンクの色。フォントの COLOR を指定します。
`a:active、a: hover`	リンクの上にマウスを置いたときのリンクの色。フォントの COLOR を指定します。
`#signonsubmitcontainer .button.signonbutton`	[Sign On (サインオン)] ページ上の [Sign On (サインオン)] ボタンの色。BACKGROUND-COLOR とフォントの COLOR を指定します。コードに `!important` を追加する必要もあります。例: `#signonsubmitcontainer .button.signonbutton {background-color:red !important;}`
`#signonsubmitcontainer .button.signonbutton:` `hover`	[Sign On (サインオン)] ページ上の [Sign On (サインオン)] ボタンの上にマウスを置いたときのボタンの色。BACKGROUND-COLOR とフォントの COLOR を指定します。コードに `!important` を追加する必要もあります。例: `#signonsubmitcontainer .button.signonbutton:hover {background-color:blue !important;}`
`#signonauthcontainer`	[Sign On (サインオン)] ボックスの色。BACKGROUND-COLOR と BORDER を指定します。
`.signoncontainer a:link`	[Sign On (サインオン)] ページ上のリンクのスタイル。フォントの COLOR と TEXT DECORATION を指定します。
`a.alert:link`	「HOT」リンク (ロックアウト済みユーザー) によって使用される色。COLOR を使用する必要があります。このフォントの COLOR は赤のままにしてください。
`a.alert:visited`	a.alert:link と同一にします。
`a.alert:active`	a.alert:link と同一にします。
`a.alert:hover`	a.alert:link と同一にします。
`.button`	標準ボタンスタイル。BACKGROUND-COLOR とフォントの COLOR を指定します。
`.btnPrimary`	[Save (保存)]、[OK]、[Upload (アップロード)]、[Download (ダウンロード)]、[Send (送信)] などのプライマリボタンの色。BACKGROUND-COLOR とフォントの COLOR を指定します。
`.btnSecondary`	[Cancel (キャンセル)]、[No (いいえ)] などのセカンダリボタン、即時操作を実行しないボタン、重要度が 3 番目に高いボタンの色。BACKGROUND-COLOR とフォントの COLOR を指定します。
`.tab.selectedtab`	選択された左ナビゲーションメニュー項目の色。BACKGROUND-COLOR とフォントの COLOR を指定します。
`.tab a`	左ナビゲーションメニューボタンの色。 BACKGROUND-COLOR とフォントの COLOR を指定します。
`.tab a:hover` `.tab a:active`	左ナビゲーションメニューボタンの上にマウスを置いたときのボタンの色。BACKGROUND-COLOR とフォントの COLOR を指定します。 `.tab a:hover` と `.tab a:active` は通常同じ色になります。