ホームページビルダー・グレート初心者講座

　スクロールバーの色をカラフルにする

通常灰色などで固定されているスクロールバーの色をカラフルにしてみます。

　スクロールバーの色変更

スクロールバーの色変更はＩｎｔｅｒｎｅｔＥｘｐｌｏｒｅｒしか対応していませんが、周りの色とあわせて設定すればよりページの雰囲気にマッチさせることができます。

このページのスクロールバーを見て下さい。
矢印が青でバーは白のスクロールバーに変更してありますが、これは自分の設定したいところを好きな色にする事ができます。

１．　スタイルのソースをコピー
下のソースはこのページと同じスクロールバーにするスタイル設定です。
まずはこれを貼り付け、その後好みの色に変更していきます。
下のソースを全てコピーして下さい。

「スクロールバーの色ソース」


		<style type="text/css"> <!-- body{ scrollbar-arrow-color:#4d4dff; scrollbar-face-color:#FFFFFF; scrollbar-3dlight-color:#4d4dff; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#4d4dff; } --> </style>

２．　ソースを開いて貼り付け場所を確認
コピーできたら、「ＨＴＭＬソース」を開いて貼り付ける場所を確認します。

<HEAD> と </HEAD> の間に貼り付けるのですが、ここでは分かりやすく　</TITLE> のすぐ下に貼り付けます。

「貼り付け位置」

３．　ソースを貼り付け
場所が確認できたら貼り付けます。　下が貼り付け完了後の画像です。
プレビューで確認してみますが、画面がスクロールするほど長くない場合、スクロールバーが表示されませんので、プレビュー画面を少し小さくしてみたりして確認します。

「貼り付け完了」

４．　色の修正
上記の手順でこのページと同じスクロールバーになりましたが、自分の好きな色に設定したいと思います。

色を変更するときは、ソースの中の「＃ＦＦＦＦＦＦ」や「＃４Ｄ４ＤＦＦ」となっている部分を好きな色に変更します。
直接カラー番号を入れる場合は必ず半角英数で入力して下さい。

色と対応する数値は、メニューバーの「表示」 → 「カラーパレット」を開いて確認します。

指定するタグと設定される場所は下の表と画像を参考にして下さい。

５．　変更箇所の追加
また、違う箇所を追加する時は他のソースと同じように追加して書きます。
書くときにはタグ中の「 body{　から　}　」　の間に追加していきます。
追加する時は；と：などを間違えないように注意して書きましょう。



1	scrollbar-dark-shadow-color	枠外側の右端、下端の色
2	scrollbar-shadow-color	枠内側の右端、下端の色
3	scrollbar-arrow-color	矢印の色
4	scrollbar-highlight-color	枠内側の左端、下端の色
5	scrollbar-3dlight-color	枠外側の左端、下端の色
6	scrollbar-track-color	バーの背景の色
7	scrollbar-face-color	枠の表面の色
	scrollbar-base-color	バーの基本となる色