スクロールバー

ども～～。
相変わらず、平凡パンチな日々を送ってます。
ま、コレはコレで、結構楽しかったりするんですが。。。

先日紹介しましたNINJA。
その後、ニンニン仲間が増えまして。
あーーー、この人のページにも。
おーーー、こっちのページにもと。
色んなトコで、見かけるようになりました。
皆さんの役に立ったみたいで、良かったかな～～と。

で、今回はというか、今回も！なんですが。
ソースについてのブログとなります。
なるべく、簡単に書きますので、興味ある方は読んでみてください。

今回は、「スクロールバー」についてのソースです。
スクロールバーとは、何ぞや？
と言う方は、ご自身のページの右側をご覧下さい。
ページを上下するバーがついてますよね？
それが、スクロールバーというヤツです。

それを、今回は、カスタマイズします。

まずは、スクロールバーの基本的名称を下図で確認下さい。



これが、基本です。


そして、ソースは、以下の通りとなります。

scrollbar-3dlight-color: 3D部分の色;
scrollbar-arrow-color: ▲の色;
scrollbar-darkshadow-color: 深い影の色;
scrollbar-face-color: 表面の色;
scrollbar-highlight-color: 明るい部分の色;
scrollbar-shadow-color: 影の色;
scrollbar-track-color: トラックの色;


ここの赤文字部分に入るのが、カラーコードです。
普段、私が使っているカラーコードがコチラになりますので。
参考にしてみてください。

基本カラーコード
和色カラーコード
洋色カラーコード
パステルカラー
ビビッドカラー

ここで、気に入った色を選んでいただきます。
その色を、スクロールバーのどの部分に使いたいかを決めていただきます。

例えば！
３D色の部分を、赤にしたい！なんて方は。

赤のカラーコードが　＃ｆｆ００００　なので。

そのカラーコードを下記のように挿入してあげます。

scrollbar-3dlight-color: #ff0000;

こうやって、▲の色、深い影の色・・・と順々に配色をしてあげます。


そうして完成したソースを。
今度は、みんカラのスタイルシートに入れ込むのですが。
下記の場所に挿入してください。



※因みに、カラーコードは私のページ仕様にになってます。

あとは、プレビューで確認してあげて、調整です。

以上ですが。
分かります？？？


※すいません、今回のブログもこんな内容になっちゃって。