スクロールバーの色を変える方法

ブログ初心者の無料アクセスアップ法

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スクロールバーの色を変える方法

飾りっけのないスクロールバーをサイトカラーに合わせた色に変更する方法です。

テンプレートのCSS(スタイルシート)に以下のようにタグを記述することで変更できます。


scrollbar-場所-colorというように記述します。

scrollbar-face-color: #から始まるカラー数値、又はカラーネーム
scrollbar-arrow-color: #から始まるカラー数値、又はカラーネーム
scrollbar-shadow-color: #から始まるカラー数値、又はカラーネーム
scrollbar-darkshadow-color: #から始まるカラー数値、又はカラーネーム
scrollbar-track-color: #から始まるカラー数値、又はカラーネーム
scrollbar-highlight-color: #から始まるカラー数値、又はカラーネーム

●タグの意味以下の通りです。

face 上下左右の端にある三角印のある四角い部分とバーの表面の色

arrow 上下左右の三角印の色

shadow 上下左右のバーと両端の右枠の内側の色

darkshadow 上下左右のバーと両端の右枠の外側の色

track 上下左右のバーと両端の左枠のうち側の色

highlight 上下左右のバーと両端の左枠の外側の色


●各設定場所は以下の通り

テンプレートのCSS(スタイルシート)内の

body{ }   BODYのカッコ内に記述する方法と

*{ }    アスタリスク内に記述する方法があります。


【例えば】
*{margin: 0;padding: 0;
scrollbar-face-color: #ff6600;
scrollbar-shadow-color: #F0F0F0;
scrollbar-highlight-color: #FFFFFF;
scrollbar-darkshadow-color: #999999;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color: #FFFFFF;}

アスタリスク内に記述するのであれば、こんな感じ^^

*{}(アスタリスク)に記述した場合は全てに適用、
body{}に記述した場合は、<body> ~ </body>内に適用

特に違いはないと考えて良いです。


よくわからない方は、このままコピペしてプレビューしながら、色だけ変更して使って下さい。
あとその際、宜しければこのブログをリンクして頂ければ嬉しいです^^。



自信のない方や、不安な方は、
テンプレートを複製するか、コピーを取って編集することをお勧め致します。


#から始まるカラーコードがわからない場合は、『記事を書く』から
左上の“文字に色を付ける”から、色を選ぶと記事作成部分にカラーコードが出てきますので、
そのままコピペで変更できます。


ランキングサイト

ネット銀行

便利なネットバンクはアフィリエイター必須

口座残高範囲で使用できるクレジットカード機能を備えたデビットカードは、計画的な利用がしやすく便利

最新記事

キーワード検索

プロフィール

タラコ

Name:タラコ

はじめまして^^
ブログ歴・アフィリエイト歴
約3年のタラコが、
初心者でも出来る、
テンプレートの簡単カスタマイズ方法や
SEO対策、パーツやツールなど、
アクセスアップやアフィリエイトに役立つ情報を総合的に紹介しています。


ご意見・ご質問・お問い合わせはこちら
メールフォーム

最新コメント

相互リンク

『スクロールバーの色を変える方法』について、説明しています。
ブログ初心者の無料アクセスアップ法

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。