とりあえず記述の説明と解説をしておきます。
■記述の定義
scrollbar-*****-color : color-code ;
html {
scrollbar-track-color : color-code ; /* レールの色を指定 */
scrollbar-face-color : color-code ; /* ボタン・スライダーの色を指定 */
scrollbar-arrow-color : color-code ; /* 矢印の色を指定 */
scrollbar-shadow-color : color-code ; /* 内側の影の色を指定 */
scrollbar-darkshadow-color : color-code ; /* 外側の影の色を指定 */
scrollbar-highlight-color : color-code ; /* 内側のハイライトの色を指定 */
scrollbar-3dlight-color : color-code ; /* 外側のハイライトの色を指定 */
}
color-code には、#ff3366 といった色コードや red などのシステムカラーを指定します。
それぞれバラバラに好きな色を指定できます。もちろん、部分的な指定だけでも構いません。自分の好みに合わせて変更していくと良いでしょう。ただし、ブログそのもののアクセシビリティを損なうような、見辛い色や一色塗りを指定するのは控えた方がいいと思います。
「こんなの設定が多すぎて分かるかい!」とか、「カラーデザインに疎くて感覚が掴み難いよ」、「私は色盲なので設定していても分からないんです」という人は、以下の指定方法をお薦めします(これの紹介をしているところって、あったような、なかったような…)。
html {
scrollbar-base-color : color-code ; /* 全体の色をまとめて指定 */
}
color-code には、#ff3366 といった色コードや red などのシステムカラーを指定します。
この scrollbar-base-color は、手っ取り早く色を指定するものです。指定した色を元に、スクロールバーの全ての部分を一括で変更できます。
ちなみに私の場合、以下の設定を使用しています。
html {
scrollbar-base-color : #ccffcc ;
}