【はてなブログ】スクロールバーをカスタマイズしてみる

はてなブログのスクロールバーをカスタマイズしてみました！

CSSでスクロールバーのデザインを変更することができるということを知り，はてなブログでもできないか試してみたところ，うまくいったので備忘録として残しておきます。

どのように変わったか

左：変更前　右：変更後

こんな感じで，少しおしゃれになりました！

方法

はてなブログのデザインCSSに以下を記述します。

/* スクロールバー全体の太さを変更 */
html::-webkit-scrollbar, #copy-element::-webkit-scrollbar {
    width: 16px;
}
/*スクロールバーのつまみの部分*/
html::-webkit-scrollbar-thumb, #copy-element::-webkit-scrollbar-thumb {
    background: #fff;
    box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
    border-radius: 10px;
}
/*スクロールバーの背景*/
html::-webkit-scrollbar-track, #copy-element::-webkit-scrollbar-track {
    background: #000;
}

すると，このようにスクロールバーが変化します！

7行目のbackgroundでスクロールバーの背景色，13行目backgroundでスクロールバーのつまみの色を変更することができます。

おまけ

7行目のbackgroundを削除し，代わりに以下を代入すると

background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);

このようにグラデーションがかかったスクロールバーを実装できます！

参考

coliss.com