スクロールバーの変更 [ソネットブログカスタマイズ]
今日はスクロールバーを変更します。
これはＩＥ独自タグなのでＩＥ以外では表示されません。
前回までのカスタマイズコチラにまとめてあります。
カスタマイズについて質問がある方はコチラを読んでから質問して下さい。
（※日曜は返信が出来ません）
今回はあんまり難しい事を書いてないので、全部最後までサラサラっと読んで作業に取り掛かった方がいいと思います＾＾
では、CSS編集を開いて下さい。
スクロールバーを変更するにあたってCSSを編集する箇所は↓です。
| /*-----Common-----*/ a:link { text-decoration:none; color:#6d6a66; } a:visited { text-decoration:none; color:#6d6a66; } a:active { text-decoration:none; color:#6d6a66; } a:hover { text-decoration:underline; color:#cc0000; } body { background:#efeee2; ↑ココに追加します。（※これは何もいじってない状態のcssです。） |
まず、
body {
background:#efeee2;下に太文字部分を追加して下さい。
 |
body { background:#efeee2; scrollbar-base-color: #FF0000; scrollbar-track-color: #009900; scrollbar-face-color: #FF0000; scrollbar-shadow-color: #FFFFFF（白）; scrollbar-darkshadow-color: #FF0000; scrollbar-highlight-color: #FF0000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #FFFFFF（白）; } |
色はコチラなどで探して好きな色に変更できます。
でこの記述だと、コメント欄のスクロールバーしか変更されませんので、
 |
html,body { background:#efeee2; scrollbar-base-color: #FF0000; scrollbar-track-color: #009900; scrollbar-face-color: #FF0000; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #FF0000; scrollbar-highlight-color: #FF0000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #FFFFFF; } |
「html, 」を↑のように追加してやって下さい。（自分で書かずにhtml,body {←ココをコピーしてった方がいいかもです。）
そうすると、画面の右のスクロールバーもコメント欄のスクロールバーも指定した色に（ＩＥで表示のみ）変更されます。
スクロールバー記述。例として1つだけ入れるとしたら、こんな感じ↓になるので、どこの箇所を変更したらどこの色が変わるかは下の画像を見て参考にしてみて下さい。
要するに、8つ全部入れる必要はありません。
自分の変えたい部分だけ記述し色指定をすればＯＫです。
 |
html, body { scrollbar-base-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-shadow-color: #99FFFF; scrollbar-3dlight-color: #FFCCCC; scrollbar-arrow-color: #FFCCCC; } |
ここまでは意味。コレを踏まえて
コチラへ(^-^*)ノ イッテミヨー!
とても便利なので活用するといいと思います♪
（好きな色をクリックしたあとに、[？]削除 scrollbar-・・・のscrollbar-・・・をクリックすると見本付きでタグまで出ます。とにかく便利です）
今↓ここまできてます。順番にいけばココまでイケマス。（目次）
共通テーマ：blog
