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

Yahoo!ブックマークに登録
 サイト内検索:   ソート:  

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座 FAQへグレート初心者講座 質問掲示板へ





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

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


 スクロールバーの色変更

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

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


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

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

<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>



2. ソースを開いて貼り付け場所を確認

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

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

「貼り付け位置」



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

「貼り付け完了」



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

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

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

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

5. 変更箇所の追加
また、違う箇所を追加する時は他のソースと同じように追加して書きます。
書くときにはタグ中の 「 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 バーの基本となる色







| トップページへ | 小技集 | FAQ | 質問掲示板 | 免責事項  | リンクについて  | お問い合わせ  |
ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved