【CSS編集】スクロール・バー配色を変更する

この記事 で予告したスクロール・バーの配色変更です。

これは、CSS編集が可能なブログであさえあれば、必ず変更できると思います。

まず、CSS編集画面で

/* ----------------------- background-color-control ----------------------- */

まで下りてきてください。上から３分の１くらいのところにあります。

そこに、既にある設定のCSSが並んでいるのですが、スクロール・バーの設定というのは

もともとここに書いてあるものじゃないんです。

そのため、最後のあたりに下記CSSを入れ込んでしまいます。

（※background-color-control設定の最後の　}　の後に入れてください。）

html, body {
scrollbar-base-color: #666699;　
scrollbar-track-color: #FFFFFF;　　　
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #666699;
scrollbar-darkshadow-color: #FFFFFF;　　　　
scrollbar-highlight-color: #666699;　　　　　　　　
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #666699;
}

なお、これは今私が使っているスクロール・バーそのままのCSSです。

試し～♪ってこれをそのまま入れてプレビューみていただくと、私とおそろいになります。

それでもいいならそれでいいです（笑）

細かく解説していきますね。

html, body {
scrollbar-base-color: #666699;　　　 ①全体の配色になるCSSです。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　下記で個々の設定をすることで、これは打ち消されます。

scrollbar-track-color: #FFFFFF;　　　　　②スクロール・バーの背景部分（動かない部分ありますよね）

scrollbar-face-color: #FFFFFF;　　　　　 ③まさにスクロールする動く部分と、端っこの の薄青部分

scrollbar-shadow-color: #666699;　　　　 　　　③の、下と左側の線
scrollbar-darkshadow-color: #FFFFFF;　　　　　　　・・・さらにその線の影となる部分　

scrollbar-highlight-color: #666699;　　　　　　　③の、上と右側の線
scrollbar-3dlight-color: #FFFFFF;　　　　　　　　　　　・・・さらにその線の影となる部分

scrollbar-arrow-color: #666699;　　　　　　④ の、矢（濃い青）の部分

}　　←そしてその最後に〆

#　から始まる６桁の数字＋（or)アルファベット がカラーを示します。

これは、普通に記事を書いていて色を変える時にもちらちら見えてくるのでご存知かと思いますが、

例えば「CCS　カラー」とかで検索すると、その一覧表が出てきて便利です。

リンクフリーでしたので、例えばこちら　タグ・カラー一覧表 　などで選んでみてください。

いろんな取り合わせで試してみてください。「保存」さえしなければ、「プレビュー」で何度でも確認でき

変更可能です。

ちなみに、これやっちゃうと、コメント欄のスクロールバーまで同じように変更されてしまいます。

ブラウザとスクロール・バーと、コメント欄のそれとを

別に設定することってできるのかな・・・。

それはわかりませんｗｗ　ごめんなさい。