スクロールバー/無料ブログ作成マニュアル

無料ブログ作成マニュアル

Google
 

◆スポンサーサイト

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

役に立ったと思っていただけたらポチッと応援お願いします。
FC2 Blog Ranking

◆スクロールバー

スクロールバーとは、ページの全てがウィンドウ内に収まらない時に画面の右側(下にも)出てくる、画面をスクロールさせる為の棒です。
Yahoo!やgoogleなどでお馴染みの水色のバーは、色を変更する事が出来ます。
当サイトは赤に変わってますね。

◆スクロールバーの色変更

スタイルシートをスクロールしていくと、こんな表示があるテンプレートがあります。

scrollbar-base-color:#ffffff;
scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-shadow-color:#87A3E2;
scrollbar-darkshadow-color:#ffffff;
scrollbar-highlight-color:#87A3E2;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#87A3E2;


これがスクロールバーの色を決めている表記です。
赤で表記している部分が色を表しています。
各名称の意味は下の通りです。

base

基本色(全体の色あい)

track スクロールバーの表示された、背景部分
face スクロールバー本体の色
shadow スクロールバーの影(右と下)の内側
dark-shadow スクロールバーの影(右と下)の外側
highlight スクロールバーのハイライト(左と上)の内側
3d-light スクロールバーのハイライト(左と上)の外側
arrow

バーの上下にある三角の矢印の色


全部表記しなければならないという事ではないので、色々組み合わせて自分なりのスクロールバーを作ってみましょう。

■そんなの無いぞという方
スクロールバーの色を変えていないテンプレートは結構あります。
そういう場合はスタイルシートの編集部分に

html{
    scrollbar-base-color:#ffffff;
    scrollbar-track-color:#ffffff;
    scrollbar-face-color:#ffffff;
    scrollbar-shadow-color:#87A3E2;
    scrollbar-darkshadow-color:#ffffff;
    scrollbar-highlight-color:#87A3E2;
    scrollbar-3dlight-color:#ffffff;
    scrollbar-arrow-color:#87A3E2;
}


と書き加えてみてください。
※他の○○{ ~ } の間に表記しない様に。
プレビューで確認してみてスクロールバーが変わっていれば完了です。
まあどうでもいい話なんですが、クロはHTMLからブログに来た組なので、最初スクロールバーの設定がうまく出来ませんでした。
というのも、HTMLではこれは<STYLE TYPE="text/css">というもので表記して、body{ という書き始めで始まります。
ところがスタイルシート編集で body{ で設定すると反映されないんですね。
表記は html{ か、 *{ で始まるみたいです。
ブログでは body{ では使えませんので、HTMLからブログに来た人は気を付けてください。

役に立ったと思っていただけたらポチッと応援お願いします。
FC2 Blog Ranking

トラックバック
この記事のトラックバックURL
http://hpmanual.blog81.fc2.com/tb.php/33-008ee290
この記事へのトラックバック

Copyright 無料ブログ作成マニュアル 簡単FC2入門 All rights reserved.
Template by 無料ホームページ作成講座ブログ
アクセスアップは相互リンクで 相互リンクドクター!アクセスアップ ホームページ登録(サーチエンジン登録) ホームページ作成 ランキング ページビューランキング 幸福の羅針盤ランキングに参加してね
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。