色付きスクロールバー～アダルトなサイト作り

色付きスクロールバー

スクロールバーというのはブラウザに右側についていて、ページを上下させるのに利用するバーのことです。最近はマウスにスクロールボタンがついたので利用することは少なくなりましたが、ページのデザインとして色を変えているサイトをよくみかけます。
　
　ここではスクロールバーの色を変更するやり方を説明します。サイトデザインの一環として興味のある方は利用してみてください。
　
　ちなみにInternet Explorer5.5以上のブラウザでないと色付きのスクロールバーは表示されないので、その辺は注意が必要です。

スクロールバーの色の変え方

　■　基本の説明
　
　スクロールバーの色を変えるには例文のような記述をソースに入れてやる必要があります。入れる場所はソースの上のほうにある<HEAD>～</HEAD>の間です。入れる場所が良くわからない人はタイトルタグ<TITLE>～</TITLE>のすぐ後ろに入れればＯＫです。外部のスタイルシートをリンクして使っている場合は、そのスタイルシートに記述すればすべてのページに適用されます。
　

例文
　
<STYLE type=text/css>

BODY {
SCROLLBAR-FACE-COLOR: *****;　
SCROLLBAR-HIGHLIGHT-COLOR: *****;
SCROLLBAR-SHADOW-COLOR: *****;
SCROLLBAR-3DLIGHT-COLOR: *****;
SCROLLBAR-ARROW-COLOR: *****;
SCROLLBAR-TRACK-COLOR: *****;
SCROLLBAR-DARKSHADOW-COLOR: *****;
}

</STYLE>
　
上の*****の部分に色をいれます。色は#ｆ00000といったコードで記述する方法と、pinkやblackと言った英語表記で記述する方法の2種類がありますが、どちらを使ってもＯＫです。
　
ちなみに上の文が指定している色は
　

SCROLLBAR-FACE-COLOR　→　スクロールするバーの表面の色
SCROLLBAR-HIGHLIGHT-COLOR　→　バーの上と左の明るい部分の色
SCROLLBAR-SHADOW-COLOR　→　バーの右と下の影になる部分の色
SCROLLBAR-3DLIGHT-COLOR　→　バーの周りを囲む色
SCROLLBAR-ARROW-COLOR　→　上下にある▲の色
SCROLLBAR-TRACK-COLOR　→　トラックの色
SCROLLBAR-DARKSHADOW-COLOR　→　深い影部分の色
　
　と言う感じです。といってもこれだけじゃ良くわからないと思うので、サンプルを見たり、自分で実際に色を変えてみたりして確認してみてください。
　
　
　
　

　■　サンプル
　
　サンプルです。枠の中の文をコピーしてソースに貼りつければ、その枠と同じスクロールバーの色になります。そのままコピーして使うなり、改造するなりして自分好みのスクロールバーを作ってみてください。
　
　ちなみにサンプルで指定してる色はこちらのサイトを参考にさせてもらいました。
　
　

サイト内関連リンク

　
・テンプレート