第17回：ページ全体のスクロールバーの色を変えてみよう
今回はページ全体のスクロールバーの色を変えてみましょう。
- 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
※CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
※カスタムテンプレートの作り方は
■第3回： カスタムテンプレートを作ってみよう
を参照して下さい。 - 「編集」画面のCSS記述欄に
/*スクロールバー*/
html
{
scrollbar-base-color:#●●●●●●;
}
を全て半角英数で記述する。
※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
※カラーコードについては下記のページなどを参考にして下さい。
■参考： 「色のみじん切り」様
※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。 - 「変更を保存」ボタンを押す。
※「確認」ボタンを押せば保存前に出来上がりを確認出来ます。 - 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
- 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
- 「すべてのファイルを反映しました」の画面に切り替わったら終了。
- イメージ通りに出来ているかどうか確認する。
以上です。
うまく出来ましたか？
- スクロールバーは上記の 「scrollbar-base-color」 以外にもパーツごとにプロパティを持っており、 それを細かく指定することで自由にイメージを変えられます。
下記のページではそれぞれのプロパティが図入りで細かく説明されています。
■「TAG index」 様内 『TEXTAREAのスクロールバーの色を変える』
また、下記のページでは各プロパティの色の組み合わせをチェックすることが出来ます。
■「TAG index」 様内 『カラーチャート』
参照してみて下さい。
※それぞれ単体でも指定可能です。
※私はbase-color、face-color、 scrollbar-arrow-colorの3箇所を全て同系色で指定してみました。
- スクロールバーの色の変更は自由ですが、背景の色との差が少ないと閲覧する場合スクロールバーが見えにくくなることがあります。
色を組み合わせる場合はスクロールバーのパーツだけでなく、背景色との関係も考慮に入れて設定しましょう。 - この指定はIE5.5以上のブラウザに有効です。
■「TAG index」 様
■ 「色のみじん切り」 様
■素材サイト 「PRISM」 様＜記事内のボタン素材＞
＜関連記事＞
■第15回： コメント欄のスクロールバーの色を変えてみよう
| 固定リンク
コメント
お初にお目にかかります。
非常に分かり易いサイトなので、htmlの苦手な私でもサクサクで来たので嬉しいです。
ちょっと質問なのですが、このコーナーの内容の「スクロールバーの
色の変更」をいれたところ、ヘッダ部分に自作画像を貼るようにしているのですが、その部分にカーソルを合わせると画像が消えてしまう、というのが出てしまいました。カーソルを合わせても画像が表示されるようにしたいのですが、どうしたらよいか困っています。
このページです。
http://majestic-jk.cocolog-nifty.com/blog/
環境はマックのsafali3.0です。
お忙しいとは思うのですが、どうか教えてくださいませ。
よろしくお願いいたします。
現在、「カスタムCSSを編集」ページにいれた記述は以下の通りです。
---ここから
/*メイン部分に背景画像を貼る*//
#banner,.content
{
background-image : url(http://majestic-jk.cocolog-nifty.com/00naka.jpg) ;
}
/*右側部分に背景画像を貼る*/
#right
{
background-image : url(http://majestic-jk.cocolog-nifty.com/00mgi.jpg) ;
}
/*左側部分に背景画像を貼る*/
#left
{
background-image : url(http://majestic-jk.cocolog-nifty.com/00hidali.jpg) ;
}
/*メニューボタンにアイコンをつける*/
.sidebar h2
{
background-image:url(http://majestic-jk.cocolog-nifty.com/menu_aikon.gif);
background-repeat:no-repeat;
height:18px;
padding-left:18px;
}
;/*カレンダーメニュータイトルにアイコンをつける*/
#calendar caption
{
background-image:url(http://majestic-jk.cocolog-nifty.com/menu_aikon.gif)
background-repeat:no-repeat;
height:18px;
padding-left:18px;
}
/*記事タイトルにアイコンをつける*/
.content h3
{
background-image:url(http://majestic-jk.cocolog-nifty.com/menu_aikon.gif);
background-repeat:no-repeat;
height:18px;
padding-left:18px;
}
/*区切り用画像アドレスの指定*/
.content p.posted
{
background-image:url(http://majestic-jk.cocolog-nifty.com/footer_line.gif);
background-repeat:no-repeat;/*画像の繰り返し（なし） */
padding-top:20px;/*画像挿入スペースの作成（上余白の設定） */
background-position:top center;/*画像の位置*/
}
/*カーソルを乗せると背景に色が付く*/
/*通常の状態*/
a:link{
color:#6d009a;
text-decoration : none;
}
/*ff9900*/
a:visited{
color:#999999;
text-decoration : none;
}
/*カーソルでポイントしたとき*/
a:hover{
color:#cc0000;
text-decoration : none;
background-color:#f1bbff; /*背景色*/
}
/*カーソルを乗せると背景に色が付くここまで*/
/*カレンダーのリンク文字に色を付ける*/
#calendar a {
background-color:#f1bbff;
width: 20px; line-height: 16px;
display: block; margin: 0 auto;
}
/*ページ全体のスクロールバーの色変更*/
html
{
scrollbar-base-color:#C400f5;
}
---ここまで
投稿： majestic | 2009/04/21 17:46
■majesticさん
こんにちは。コメントありがとうございます♪
さて、お問い合わせの件ですが、
タイトル画像を指定する際、テーマを変更＞タイトルバナーの画面で画像を指定していると思うのですが、その際に「アップロードした画像はタイトルの背景として使用する」のチェックを外してありますよね。
これが原因です。
通常タイトルバナー部分にはタイトル文字が表示され、その文字にリンクが張られているのですが、
「アップロードした画像はタイトルの背景として使用する」のチェックを外して画像だけを表示するようにすると、この画像自体にリンクが張られた状態になってしまうためマウスオンするとリンク設定の影響で画像が消えてしまうのです。
これを解消するには上記の画面で「アップロードした画像はタイトルの背景として使用する」にチェックを入れればOKです。
但し、ここにチェックを入れるとタイトル文字も表示されてしまいますので、このタイトル文字の色を消す（見えなくする）必要が出てきます。
その方法はタイトル文字の色をタイトル画像で使用しているのと同じ色に変更する、というのが一つ。
同じ画面の上の方に「テキストの配色」という項目がありますので、ここに表示されている色指定帯の横の四角の中に直接カラーコードを入力して下さい。
こうすれば文字は表示されているけれど（タイトルの色と同化して）見えないことになります。
または、「CSSの編集」に
#banner h1,#banner h2
{
display:none;
}
とか入れてやる方法もあります。
こうすればタイトルとサブタイトルが非表示に出来ます。
（こちらのが簡単かな）
どちらでもお好みでどうぞ。試してみて下さい。
投稿： tako→majesticさん | 2009/04/21 21:28
takoさん ありがとうございます！
ロールオーバでタイトル画像がパカパカしなくなった、文字の表示を消す事ができた、は実行できたのですが、画像が上の部分しか表示されません。直す前みたいに画像の縦幅をもっと表示させたいのですが、どう書けばよろしいでしょうか？
投稿： majestic | 2009/04/30 12:45
takoさん
ありがとうございます！分かりやすかったです！
投稿： majestic | 2009/04/30 12:47
■majesticさん
こんにちは♪コメントありがとうございます。
＞画像が上の部分しか表示されません
CSSを確認したところ、ココログのデザイン設定で作成されたバナー部分の高さ（height）が何故か40pxになってしまってるみたいです。
（何故…？）
なので、「CSSの編集」欄にバナーの高さを指定するCSSを足してやれば大丈夫かと思います。
例えばこんな感じ↓でどうでしょう。
#banner {
height: XXXpx;
}
「XXX」の部分は表示したいバナーの高さに合わせて数値を入れます。
以上、試してみて下さい。
今度は上手く行くといいのですが…。
投稿： tako→majesticさん | 2009/04/30 19:51
takoさん
majesticです。
連日、質問すみません。
今日普通に記事を作成したら、
レイアウトが崩れてしまいました。。
http://majestic-jk.cocolog-nifty.com/blog/
どうしたらいいか困ってます。教えてください。。
(スミマセン。。)
投稿： majestic | 2009/05/01 15:10
takoさん
majesticです。
バナーの高さうまくいきました！
ありがとうございます！！
投稿： majestic | 2009/05/01 15:13
takoさん
majesticです。たびたびすみません。
先程の表示崩れの件ですが、takoさんのページからリンクが貼られていたページ全体に共通のfooterをつける、というジャバスクを利用して表示させるヤツがあったのですが、どうやらコイツの設定がうまく行っていなかったため、表示崩れが起こった模様です。ブログサブタイトル欄からジャバスクを読み込む記述を削除してページ全体に反映すると治りました。お騒がせして大変恐縮でございます。※でもページ全体に共通のフッターはつけてみたいのですが、ジャバスクではなく、cssで記述する方向でなんとかなるものなのでしょうか？
投稿： majestic | 2009/05/01 15:21
■majesticさん
こんにちは。
バナーの件、解決したようですね。
安心しました(^^)
さて、今回のご質問の件ですが、フッター部分には「footer」というidが付いていますので、ここにCSSを適用することが可能です。
例えば、
#footer{
background:url(http://～) no-repeat center top;
height:XXpx;
}
とかにすれば背景画像が設定できます。
絵ではなく、文章を画像にしたものを準備すれば文字も表示可能です。
※このブログに表示されている広告（Sponored Link）の上に表示している文章みたいな感じですね。
また、下記のCSSなら直接書き込んだ任意のテキストが表示できます。
#footer:after {
content: "ここにテキスト";
}
但し、紹介させて頂いているスクリプトのページのようにリンクを張ったりは出来ません。
（HTMLを追加することは出来ないので）
以上です。
宜しくお願いいたします。
投稿： tako→majesticさん | 2009/05/01 22:10
takoさん
majesticです。footerの件、返信ありがとうございます。
位置はOKなのですが、黒い背景の所ではなく、白い中身にいれたいのですが。。。教えて頂けますか？
投稿： majestic | 2009/05/07 12:22
あと、同じくなのですが，白いセンターに背景を表示させるために、現在、
/*メイン部分に背景画像を貼る*/
#center
{
background-image : url(http://majestic-jk.cocolog-nifty.com/00naka.jpg) ;
}
という記述をしておりますが、なぜか表示されません。。左と右のカラムはうまく表示されたのですが。。
これも教えてください！お忙しい中恐れ入りますがどうぞ、よろしくお願いいたします。
投稿： majestic | 2009/05/07 12:25
■majesticさん
こんにちは。
＞黒い背景の所ではなく、白い中身にいれたい
試してないのですが…
#footerに
padding-bottom:XXpx;
を追加すれば画像の位置が上がるような気がします。
数値はご自分で調整して丁度いいところを探して下さい。
＞センターに背景を表示させる
セレクターを
#center
ではなく、
#container
にしてみて下さい。
あと、下記の過去記事が参考になるかも知れません。
読んでみて下さい。
『本文やサイドバーの下に背景画像が透けるように表示してみよう〈1〉』
http://tea-for-me.cocolog-nifty.com/blog/2006/03/211_e5f3.html
投稿： tako→majesticさん | 2009/05/07 23:57