Custom Scrollbars拡張機能でGoogle Chromeのスクロールバーを自由にカスタマイズする方法

Google Chromeは世界で最も人気のあるWebブラウザですが、必ずしも最高のブラウザというわけではありません。OperaやVivaldiなどのブラウザは、Google製よりも優れたカスタマイズ設定を備えています。とはいえ、Chromeには拡張機能が豊富にそろっているため、それらを活用すればブラウザを自分好みに仕上げることが十分可能です。

その中でも注目したいのが「Custom Scrollbars」という拡張機能です。これを使えば、Chromeのスクロールバーのカラースキーム、丸み、幅などを自由に変更できます。本記事では、Custom Scrollbarsを使ってChromeのスクロールバーをカスタマイズする手順を詳しく解説します。

Custom Scrollbars拡張機能のインストール方法

まず、Google ChromeでChromeウェブストアを開き、「Custom Scrollbars」のページにアクセスします。ページ上の+ Chromeに追加ボタンをクリックし、拡張機能を追加を選択してインストールを確定してください。

インストール後、URLバーにCustom Scrollbarsのアイコンが表示されない場合は、ツールバーの拡張機能ボタンをクリックし、Custom Scrollbarsのピン留めを選びましょう。その後、拡張機能のアイコンをクリックすると設定画面が開きます。

スクロールバーのカスタマイズは、拡張機能専用のタブから行うのがおすすめです。設定画面のオプションボタンを押すと専用タブが開き、Custom Scrollbarsが持つすべてのカスタマイズ設定を一覧できます。

Custom Scrollbarsでスクロールバーの色を変更する方法

Custom Scrollbarsの最大の魅力は、充実した色のカスタマイズ機能です。この拡張機能では、スクロールバーのつまみ(サム)部分と背景(トラック)部分の色を、それぞれ専用のパレットで個別に変更できます。

以下の手順で、スクロールバーのカラースキームを好みに合わせて設定しましょう。

1. Use custom colors(カスタムカラーを使用)オプションのラジオボタンで「Yes」を選択します。
2. Scrollbar thumb color(つまみの色)パレット上の小さな円を左クリックでドラッグし、好きな色を選びます。
3. HSVバーのスライダーを上下に動かせば、選択した色の濃淡(明度・彩度)も調整できます。
4. Scrollbar track color(トラックの色)パレット内の円をドラッグして、背景部分の色を決めます。
5. Save(保存)をクリックすると、新しいカラースキームがスクロールバーに適用されます。
6. 新しい配色を確認するには、Google検索を開いてキーワードを入力してみましょう。検索結果ページを、カラフルになったスクロールバーで上下にスクロールできます。

スクロールバーの幅・丸み・ボタンの調整方法

Chromeのスクロールバーをもっと太く、あるいは細くしたいと思いませんか? この拡張機能にはScrollbar width(スクロールバーの幅)設定が用意されており、Wide(太い)またはThin(細い)のラジオボタンを選ぶだけで簡単に変更できます。

さらに細かく調整したい場合は、Other(その他)を選択してください。テキストボックスに任意の数値を入力すれば、幅を自由に指定できます。初期設定の単位はピクセルですが、ドロップダウンメニューから別の単位を選ぶことも可能です。

四角く無機質なスクロールバーに飽きたなら、丸みの設定を変えてみましょう。Scrollbar roundness(スクロールバーの丸み)のバースライダーをドラッグします。スライダーを右へ動かすほど、つまみ部分の角が丸くなっていきます。

また、この拡張機能にはScrollbar buttons(スクロールバーボタン)オプションもあります。Noneを選べば、バーの上下にある矢印ボタンを非表示にできます。逆にLightまたはDarkを選ぶと、白または黒の矢印ボタンが表示されます。

カスタマイズが完了したら、忘れずにSave(保存)ボタンをクリックしてください。保存しない限り、変更内容は開いているページのタブには反映されません。

サイトごとのカスタムルールを設定する方法

Custom Scrollbarsでは、複数のスクロールバーカスタマイズを作成・保存しておき、Website Rules(ウェブサイトルール)機能を使って、特定のサイトごとに異なるスクロールバーを適用することもできます。

以下の手順で、別のスクロールバーを作成し、任意のウェブサイトに割り当てられます。

1. 別のカスタマイズ済みスクロールバーを作成するには、+ New(新規作成)ボタンをクリックします。
2. + Rename(名前変更)ボタンを押して、新しいスクロールバーに名前を付けます。
3. 前述の設定項目を使ってスクロールバーをカスタマイズし、Save(保存)ボタンをクリックします。
4. 拡張機能のタブでWebsite Rulesをクリックします。
5. + Add(追加)ボタンを押すと、テキスト入力欄が開きます。
6. Domain(ドメイン)テキストボックスに、スクロールバーを適用したいサイトのURLを入力します。
7. Scrollbar(スクロールバー)ドロップダウンメニューから、適用するバーを選択します。
8. Save(保存)を選択します。
9. 追加したウェブサイトドメインのチェックボックスにチェックを入れます。
10. 最後にSave(保存)ボタンを押して設定を適用します。

まとめ:Custom Scrollbarsは優秀なカスタマイズ拡張機能

スクロールバーのカスタマイズ設定は、本来GoogleがChromeに標準搭載すべき機能だと言えるでしょう。実際、ほとんどのブラウザにもっと多くのスクロールバーオプションがあってもおかしくありません。そうした選択肢が用意されていない以上、Custom Scrollbarsのような拡張機能に頼るのが現実的な解決策となります。

とはいえ、ありきたりで味気ないスクロールバーを使い続ける必要はありません。Custom Scrollbarsを活用すれば、Chromeのスクロールバーの見た目やスタイルを手軽に刷新でき、日々のページスクロール体験がぐっと快適でおしゃれになります。ぜひ試してみてください。