はてなブログでの、スクロールするカテゴリの見栄え変更（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設定をしないと、カテゴリ文字が枠ギリギリに表示されて、見栄えが悪いです。
サイドバーの全体枠と同じ背景色なら、無い方がいいかもね。