読者です 読者をやめる 読者になる 読者になる

はてなブログでの、スクロールするカテゴリの見栄え変更(CSS使用)

注)スクロールバーのみ、Google Chromeにしか反映されていませんでした!

前に、カテゴリの表示を短くして、余りはスクロールで表示できるCSSを書きましたが、今回はスクロールバーの見た目の変更も追加しました。

/* カテゴリ */
.hatena-module.hatena-module-category > .hatena-module-body {
height: 160px;      ←スクロール表示させる縦の範囲
overflow: auto;     ←はみ出たカテゴリー文字の対応
background:#dce0e0;  ←背景色設定
padding: 10px;      ←カテゴリ―枠内に左右上下の隙間を指定
border-radius: 10px;   ←ここから↓2つまでが、角を丸くする設定
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}
/*ここから下がスクロールバーの見た目設定*/
.hatena-module.hatena-module-category > .hatena-module-body::-webkit-scrollbar-track{
background: none;      ←上の背景色設定と同じにしている
}
.hatena-module.hatena-module-category > .hatena-module-body::-webkit-scrollbar{
width: 13px;          ←スクロールバーの幅と高さ設定
height: 10px;
}
.hatena-module.hatena-module-category > .hatena-module-body::-webkit-scrollbar-thumb{
background: #fafbfb;     ←スクロールバーの色設定
border-radius: 10px;     ←スクロールバーの角の丸さ設定
}

スクロールバーの見た目が気に入らない方は、試してみてください。
基本コピペで、赤文字は削除してね。
どういう風になるかは、このサイトのサイドバーにある「カテゴリー」部分を見たらわかります。
関係ないけど、読み方って「カテゴリ」でも「カテゴリー」でもどっちでもいいらしいね(´・ω・`)


「.hatena-module.hatena-module-category > .hatena-module-body」を省略して「::-webkit-scrollbar-〇〇〇」と書くと、サイト全部に採用されちゃうから気を付けてね(´・ω・`)

padding設定をしないと、カテゴリ文字が枠ギリギリに表示されて、見栄えが悪いです。
サイドバーの全体枠と同じ背景色なら、無い方がいいかもね。

広告を非表示にする

※ここにある物の著作権は、「うっちょん」または「マナ」にあります。 無断転載等は禁止しています。
© 2002 ucchon    © 2014 mana