【Custom Scrollbars】スクロールバーの色を変更する拡張機能

2022年9月4日Chrome拡張機能,FireFoxアドオン

Custom Scrollbarsのアイコン

この記事では、ブラウザのスクロールバーの幅や色など、自由にカスタマイズできるChrome拡張機能「Custom Scrollbars」について書きます。

Custom Scrollbarsのスクリーンショット

ブラウザのスクロールバーをカスタマイズできるChrome拡張機能です。専用の設定画面から自由に調整できます。変更できる箇所は、大きく以下の通りです。

  • 幅(太くしたり、細くできる)
  • 背景・つまみの色変更(透明化も可能)
  • 自動で隠す機能
  • 上下の矢印ボタンのカスタマイズ
  • 角丸具合

プリセットごとに設定を保存できます。いつでも切り替えられます。ドメインごとで別のプリセットを指定できます。

極限まで細くしたり、そもそもスクロールバーを非表示にすることが可能です。色は、カラーパレットから自由に選択できます。HTMLカラーコードを使って、ピンポイント指定もできます。

「デフォルトのスクロールバーにうんざり!もっとスタイリッシュにしたい!いいや、色を自由に変更したい!」といった方、ぜひ参考にしてみてください。設定画面は、英語です。

Chrome拡張機能だけでなく、Firefoxアドオンも用意されています。

こちらの記事もおすすめ

スクロールバーをカスタマイズする拡張機能(アドオン)は、他にもいろいろあるので、自分に合った拡張機能を探してみましょう。僕は、細いのと角丸が好きなので、「Modern scrollbar」を使っています。

提供元:Wesley Branton
記事執筆時のバージョン:4.1(2022年8月2日)

インストール方法

Chromeウェブストアからインストールできます。

Firefoxをご利用の場合

「Chromeに追加」をクリックします。

Custom Scrollbars - Chrome ウェブストア

拡張機能のオーバーフローメニュー内に、拡張機能ボタンが追加されればOKです。

この時、新しいタブで設定画面が開きます。

設定しなくても、初期でいくつかテンプレートが用意されているので、「×」で閉じてもOKです。いつでも設定できます。このまま設定したい方は、こちらを参考にしてみてください。

すべて英語なので、Chromeを使っている方は、Google翻訳のページ全体翻訳を活用するといいかもしれません。

Custom Scrollbarsの設定画面1

使い方

右上の拡張機能ボタンをクリックします。ポップアップが表示されるので、「Scrollbar」のドロップダウンリストから、適用したいプリセット(いわゆるセーブデータ)を選択します。

Custom Scrollbarsのスクリーンショット2

初期でいくつか用意されています。最初は、「Don’t customize scrollbar」になっているはずです。スクロールバーをカスタマイズしないという意味なので、それ以外を選択しましょう。

Don’t customize scrollbarスクロールバーをカスタマイズしない
Darkダークなスクロールバー
Dark Thinダークで薄いスクロールバー
General通常
Lightライトなスクロールバー

個人的には、薄いほうが好きなので、「Dark Thin」ですね。設定から、好きなようにプリセット追加・カスタマイズできます。

選択できたら、「Use on this website(本ウェブサイトでの使用)」をクリックします。これで、選択したプリセットのスクロールバーに変更されます。変更されない場合は、一度ブラウザの再起動・または開いているタブをリロードします。

Custom Scrollbarsのスクリーンショット3

今後、同じスクロールバーをすべてのサイトで反映させたい場合、「Use on this website」の隣にある「Set As Default(デフォルトに設定する)」をクリックします。次回以降、ブラウザを再起動した時でも、選択したスクロールバーになります。

好きなプリセットをいくつか用意しておけば、気分に応じて、いつでも変更できます。

注意点ですが、Chromeウェブストアなど一部サイトでは動作しません。セキュリティ上の理由で、Chromeウェブストア、Chromeの内部ページ(設定)などでは動作しないようになっています。これは、本拡張機能というより、ブラウザ側の仕様です。

Custom Scrollbarsの注意点画像

設定

Custom Scrollbarsアイコンを右クリック→オプションをクリックするか、左クリック→歯車アイコンをクリックします。

Custom Scrollbarsの右クリックメニュー

プリセットの新規作成

「Scrollbar」でカスタマイズしたいプリセットを選択します。新しく自分好みのスクロールバーを作成したい場合は、「New」をクリックします。「Duplicate」がプリセットの複製、「Remove」が削除です。

Custom Scrollbarsの設定画面2

下記画像のようにポップアップが表示されたら、「Yes」をクリックして、そのページをリロードします。

Custom Scrollbarsの設定画面3

「Rename」で作成したプリセットの名前を変更できます。好きな名前にします。

Custom Scrollbarsの設定画面4

スクロールバーの幅

プリセットを選択できたら、下の項目に移って、色々設定していきます。

「Scrollbar width」でスクロールバーの幅を調整できます。「Other」にすると、好きな幅を設定できます。2pxとかにすると、極細サイズになります。

Custom Scrollbarsの設定画面5
Wide広い
Thin細い
Hidden隠す
Otherカスタムサイズ

一番上の英文がごちゃごちゃ書かれている部分が、プレビュー(Live preview)になっています。そちらに表示されているスクロールバーを見ながら、好きなように調整しましょう。

「Hidden」にすると、スクロールバー自体が消えます。

スクロールバーの上下の矢印ボタン

「Scrollbar buttons」で、スクロールバーの上下にある矢印のデザインを変更できます。

Custom Scrollbarsの設定画面6

非表示(None)、ライト(Light)、ダーク(Dark)の3つから選択できます。個人的には、なくてもいいかなと思います。

つまみの角丸具合

「Scrollbar roundness」で、つまみの角丸具合を調整できます。パーセントが大きくなれば、それだけ角丸になります。

Custom Scrollbarsの設定画面7

スクロールバーの色変更

「Use custom colors」を「Yes」にすると、カラーパレットが表示されます。スクロールバーの色を変更できます。変更したくない人は、「No」にします。

HTMLカラーコードで指定したり、カラーパレット内で選択できます。透明度も変更できます。

「Scrollbar thumb color」が、つまみ部分です。「Scrollbar track color」が背景です。

Custom Scrollbarsの設定画面8

余談ですが、背景を透明にして、つまみだけ表示することも可能です。「Scrollbar track color」の透明度を一番下に持っていきます。

Custom Scrollbarsの設定画面9

これで、背景が透明になります。透明にする前と後の比較画像を貼っておきます。つまみだけが浮いているように表示されます。

Custom Scrollbarsの設定画面10

設定の保存

設定できたら、一番下の「Save」をクリックして保存します。

Custom Scrollbarsの設定画面11

今後、Custom Scrollbarsのポップアップ内から選択できます。

Custom Scrollbarsの設定画面12

ウェブサイトのルール

「Website Rules」タブで、ドメインごとで適用するプリセットを設定できます。例えば、当サイトではAのスクロールバー、Googleのサイトでは、Bのスクロールバーを使う…といったことが可能です。

Custom Scrollbarsの設定画面13

感想

以上、ブラウザのスクロールバーを好きなようにカスタマイズするChrome拡張機能「Custom Scrollbars」についてでした。

Posted by ナポリタン寿司