Chromeのスクロールバーをカスタマイズ

パソコンのウェブブラウザで色々なサイトを見る時に縦長のページでは画面右端にスクロールバーが出ますよね。

そのバーを上下に動かすことでページ上の縦移動ができるわけですが、ChromeやEdgeのバーはやや細いのでマウスのポインターをあわせるのが意外と面倒です。

もちろん、マウスのホイールを使えば済む話ですが、長いページの場合はホイールを回し続けるよりスクロールバーを使ってパパっと移動した方が楽だと思います。

ただ、バーが細いと使いにくいので、今回はChromeのスクロールバーを太くするカスタマイズ方法を紹介します。バーの太さが気になっている人の参考になれば幸いです。

拡張機能とCSSでカスタマイズ
1. 設定の流れ
さいごに
1. 関連記事

拡張機能とCSSでカスタマイズ

今回のカスタマイズでは過去に何度か紹介しているStylusという拡張機能を使います。

Stylusと生成AIでデザイン変更

ネットで色々なサイトを見ていると、文字が小さかったり、文字色...

Stylusの設定ではスタイルシートを使用しますが、知識がなくても以下の流れで設定したらカスタマイズできると思います。

設定の流れ

1.Stylusをブラウザに追加

Stylus - Chrome ウェブストア

Stylus でウェブのデザインを変更しましょう。これは、ユ...

2.ブラウザのツールバーにあるStylusのアイコンをクリックし、管理をクリック。

3.Stylusの管理画面で新規追加の「+」をクリック

4.左上に設定名を入力し、右側に以下の内容を入力

/* スクロールバーの幅 */
::-webkit-scrollbar {
  width: 20px;
  height:20px;
}
/* スクロールバーが移動する部分の背景色 */
::-webkit-scrollbar-track {
  background-color:#2C2C2C;
}
/* スクロールバーの動く部分の色と形 */
::-webkit-scrollbar-thumb {
  background-color: #9F9F9F;
  border-radius: 10px;/* 角丸不要の時は「0」に変更 */
}

自動プレビューにチェックが入っていたら、すぐに変化を確認できます。

表示に問題がなければ「保存」ボタンを押して作業を完了します。

ここではスクロールバーの幅を20pxにしてありますが、数値を小さくしたら、幅は狭くなりますし、逆に大きくしたら太くなります。

スクロールバーと背景の色は、Chromeのデザイン設定のダークモードにあわせていますが、任意の色を指定することもできます。

以下のページをブックマークしておくと色を指定する時に便利ですよ。

WEB色見本原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

先ほどの設定では丸みのあるボタンが表示されますが、丸みを調整したい時は「border-radius: 10px;」の数値を変えると変化します。

また、丸みが不要なら「border-radius: 10px;」の「10px」を「0」にするか、この行を削除すると丸みのない四角のスクロールバーになります。

これだけでも見やすくなると思うのですが、先ほどの設定だとスクロールバーの上下左右の端に出る三角形のマークが出なくなるので、必要な場合は以下も追加してください。

/*両端のボタンの設定*/
::-webkit-scrollbar-button:single-button {
background-color: #000;
display: block;
border-style: solid;
height: 12px;
width: 12px;
}
/*縦スクロール 上*/
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
}
/*縦スクロール 下*/
::-webkit-scrollbar-button:single-button:vertical:increment {
border-top: 10px solid #fff;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
/*横スクロール 左*/
::-webkit-scrollbar-button:single-button:horizontal:increment {
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #fff;
}
/*横スクロール 右*/
::-webkit-scrollbar-button:single-button:horizontal:decrement {
border-top: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent ;
}

とりあえず黒背景の白ボタンにしてありますが、背景色（#000）の部分とボタンの色（#fff）の部分を変更しながら見やすい組み合わせに設定してみてください。

以下をクリックすると全部記述したものが表示されます。

/* スクロールバーの幅 */
::-webkit-scrollbar {
  width: 20px;
  height:20px;
}
/* スクロールバーが移動する部分の背景色 */
::-webkit-scrollbar-track {
  background-color:#2C2C2C;
}
/* スクロールバーの動く部分の色と形 */
::-webkit-scrollbar-thumb {
  background-color: #9F9F9F;
  border-radius: 10px;/* 角丸不要の時は「0」に変更 */
}
/*両端のボタンの設定*/
::-webkit-scrollbar-button:single-button {
background-color: #000;
display: block;
border-style: solid;
height: 12px;
width: 12px;
}
/*縦スクロール 上*/
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid orange;
border-left: 10px solid transparent;
}
/*縦スクロール 下*/
::-webkit-scrollbar-button:single-button:vertical:increment {
border-top: 10px solid orange;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
/*横スクロール 左*/
::-webkit-scrollbar-button:single-button:horizontal:increment {
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid orange;
}
/*横スクロール 右*/
::-webkit-scrollbar-button:single-button:horizontal:decrement {
border-top: 10px solid transparent;
border-right: 10px solid orange;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent ;
}