スポンサーサイト

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

スクロールバー色、のこと。

WinIE(5.5、6)では、スクロールバーの色をCSSで指定することができます。
私がつくったテンプレートにも、この指定が入っています。

WinIE以外の環境のかたには、見ることができないのでピンとこないかもしれません。
…なので、スクリーンショットを。スクロールバー部分だけ。
撮影に使用したテンプレートは「cloudy_day」です。
左側がコメントフォームのテキストエリア部分、右側がページ全体のスクロールバーです。

IE6でのスクリーンショット Windows・IE6で撮影。
ページ全体のスクロールバーはグレー、
その他の箇所のスクロールバーは白くなってます。
矢印は青っぽい色。
Windows・Forefox1.0.4で撮影。
スクロールバー色の指定は反映されません。
…スクロールバーの色がビミョーなのは、うちのシステムカラーがこんなんだからです。
システムカラーについてはこちらにちらっと。→

わかりづらいスクリーンショットで申し訳ないのですが、
スクロールバーはそれぞれ大体こんなふうに見えます。

このスクロールバー色の指定は、body等での背景色の指定が引き継がれるものではありません。
専用の色指定が必要です。
スクロールバー色が見えない環境のかたは、背景色を変更するカスタマイズをされる場合、
  • 見えないけれどスクロールバー色の指定をする
  • スクロールバー色の指定をごっそり削除する
…のどちらかをしてください。でないとスクロールバー色がそのまま残ってしまいます…

最初からそういう指定を入れるな、というハナシなのですが;;、
せっかく色指定できるんだし(そして自分のメインはIEだし…)と思って入れてちゃっています。
ごめんなさい…

あとは追記に。.
CSS内のスクロールバー色指定部分
スクロールバー色の指定は、「scrollbar-○○-color」のかたちで指定されています。
現状の「cloudy_day」には4箇所、各8行入っています。
(自分でも多くてびっくりしました…スミマセン;;;)
  • html指定部分 (CSSの最初のほうです)
  • form設定、textarea部分 (ここからは下から見たほうが早いです)
  • 「blockquote」
  • 「pre」
(エディタにCSSをごそっとコピペして、「scrollbar-」で検索かけると見つけやすいです)
削除されるかたは、「scrollbar-」ではじまる全ての行を削除してください。


■ スクロールバー色の指定方法
ページ全体のスクロールバーの場合。
body(だけ)への指定だと効かないことがあります。なので私はhtmlに指定してます。
(どうやらhtml,bodyに指定するのが一般的みたいです。)

html, body { scrollbar-base-color: #ffffff; }

テキストエリアにも同様に指定できます。↓

textarea { scrollbar-base-color: #ffffff; }


スクロールバー色の指定に使う値は以下です。
すべて「scrollbar-○○-color」のかたちです。

scrollbar-base-color: 他の値を指定しない場合に基準となる色;
scrollbar-face-color: スクロールバー表面の色;
scrollbar-track-color: スクロールバーがない部分の色;
scrollbar-3dlight-color: 外側の枠の左と上の色;
scrollbar-highlight-color: 内側の枠の左と上の色;
scrollbar-shadow-color: 内側の枠の右と下の色;
scrollbar-darkshadow-color: 外側の枠の右と下の色;
scrollbar-arrow-color: 矢印の色;

図にするとこんなかんじです。↓
「scrollbar-base-color」は、他の値を個別に指定しないときに使います。
「base」で指定した色は「face」部分に入り、あとはIEが勝手に色を決めます。
(上のFirefoxスクリーンショットのスクロールバーみたいな、立体的な見た目になります。)
「base」を指定して、他の7つは必要なぶんだけ指定、ということもできます。
この「base」、他の7つが全部あれば要らないんですが、現状のうちのには入ってます;;。

※ スクロールバー色の色は、上位(外側?)の指定が下位(内側?)の要素に引き継がれます。
例えば、htmlやbody(このへんがいちばん上位(外側)の要素です)で指定したスクロールバーの色は、その他の部分(textarea等)にも反映されます。
(「cloudy_day」の場合、ページ全体のスクロールバーがグレーに指定してあるので、
そこの色指定だけだと、textarea部分にもグレーのスクロールバーが出てきちゃうのです…)
…うまく説明できません;; ごめんなさい…;;;

こっちはお役立ちページ。
WinIEのみ、ですが、javascriptでスクロールバー色をリアルタイムでいじれます。楽しい。
ソースのコピーもできるのでべんり。
IE 5.5 スクロールバー色 CSS 設定ページ


おまけ。
よく見る(?)タイプのスクロールバーいろいろ。

scrollbar-face-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-3dlight-color: #666666;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #666666;
scrollbar-arrow-color: #666666;
scrollbar-face-color: #999999;
scrollbar-track-color: #999999;
scrollbar-3dlight-color: #999999;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #999999;
scrollbar-arrow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-track-color: #eeeeee;
scrollbar-3dlight-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #666666;
scrollbar-arrow-color: #666666;
scrollbar-face-color: #ffffff;
scrollbar-track-color: #666666;
scrollbar-3dlight-color: #999999;
scrollbar-highlight-color: #eeeeee;
scrollbar-shadow-color: #eeeeee;
scrollbar-darkshadow-color: #999999;
scrollbar-arrow-color: #666666;

WinIEのかた以外、???だとおもうので、やっぱりスクリーンショットを撮ってみました。
上の4つのボックスは、WinIE6ではこんなふうに見えます。↓
IE6で上の4つのボックスをみたとき。

右上の二重線っぽく見えるタイプと、右下のぼんやり発光っぽいタイプは、
はじめてみたときちょっと感動しました(笑)。かわいい。
個人的には「track」と「arrow」だけに色ついてるのも好きです。かわいい。

指定したスクロールバー色はWinIE(5.5以上)でしか見えません。
いろいろいじれるのは楽しいんだけど、「全く見えない環境のひとがたくさんいること」は、忘れないようにしたいですね。
スクロールバーの色は「おまけ」、くらいの気持ちで指定するのがいいんじゃないでしょか。

あと、やろうと思えば「矢印のみ」や「完全に見えない」スクロールバーをつくることもできます。
(見えるのはWinIE5.5以上のみです。しつこいけど)
でも、縦に長ーいページでそーゆうのは、現在地がわからなくて、ぷち遭難気分になります。
ほどほど、で遊びましょうー。…あんまり他人のこととやかく言えないけど;;。

スポンサーサイト

Comment

自分が見えないものは世界には存在しない

ウェブ上では特に分かりにくいですよね。
ブラウザによって挙動がかなり違うのは、昨年のソムリエ版テンプレートコンテストで、お互いしみじみ感じましたよね。

KAIさんが書いておられることで気をつけているのが、bodyの背景色を必ず指定する、ということ。
http://peacockblue.blog10.fc2.com/blog-entry-92.html
これも結構見落としがちなことですよね。
そういう注意するツボというかTIPSというか、どこかでまとめたいなぁ~(ぽつり)

世界は知らないことだらけ

> sugarさん
(あっちこっちで返信遅くてホントすみません…;;;)
「ブラウザによる挙動の違い」、ホントしみじみです。Safariはうつくしかった…!
インターネット、が、誰でも簡単に利用できちゃう時代だから尚更、自分が見えないものが見えるひと、またはその逆のひとの存在に気づかないことも多いのだろうなぁと思ったりしてます。
IEしかブラウザを知らなくても、ブログ運営もネットショッピングもできちゃいますもんね。
私も普段はIEしか使わないですし。

でも、例えばアクセスアップを図ったり、検索エンジンのひっかかりやすさ?を気にしたり、アファリエイトを頑張ってみたり、そういう不特定多数の読者さんを意識するときは「正しい(X)HTML」をつかうことが有効な手段のひとつであるということは、もっと知られててもいいんじゃないかと思います。
内容の充実はもちろんですけど…
(私はそういうの全然気にしてないので、そのへん自分が使うぶんにはとてもいーかげんです;;)
崩れがないかどうかに気を配るのも、リピーターを逃さないため(?)の方法のひとつかなと思います。
「bodyの背景色指定」も、それに入るでしょうか。…マイナーどころなんでしょうけど(苦笑)。

> そういう注意するツボというかTIPSというか、どこかでまとめたいなぁ~(ぽつり)
sugarさんは「ぽつり」の後が早いですからね…!
新コンテンツとも関係あるのでしょうか。わくわく。
なにかお手伝いできるといいな…とこっそり思っています。
管理者だけに表示を許可する

Trackback

Trackback URL:

http://peacockblue.blog10.fc2.com/tb.php/125-b3bf9efd
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。