【Vivaldi Social】スクロールバーのサイズを変更するCSS

この記事では、「Vivaldi Social(ヴィヴァルディ・ソーシャル)」上にあるスクロールバーの横幅を変更する方法を紹介します。
設定からは変更できないので、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」、あるいは「Stylus(スタイラス)」を使います。
本記事で紹介するCSSを使えば、「Vivaldi Social(ヴィヴァルディ・ソーシャル)」の分厚いスクロールバーを、細いデザインに変更できます。好きなサイズに指定できます。
デフォルトのスクロールバーは、ごっついです。ウェブサイトのスクロールバーを細くするChrome拡張機能「Modern scrollbar」を導入しても、「Vivaldi Social」上では反映されませんでした。

通常レイアウトならまだしも、上級者向けUIを使っている場合、スクロールバーが複数表示されるので、より厚みが気になると思います。コンパクトにしたい方、参考にしてみてください。
本記事は、「Vivaldi Social」画面での解説ですが、もしかしたら、「Mastodon(マストドン)」の他のインスタンスでも使えるかもしれません。試していないので分かりません。
「Vivaldi Social」については、以下の記事を参考にしてみてください。2022年11月からサービス開始したSNS(サーバー)です。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
Chromeウェブストアからインストールできます。
Vivaldiのサイドバーに登録した「Vivaldi Social」にも反映させたい場合、「Stylebot」ではなく、「Stylus」拡張機能を利用します。詳しくは、下記記事を参考にしてみてください。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
スクロールバーの横幅を調整する手順
「Vivaldi Social」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。
/*スクロールバーの横幅サイズ*/
::-webkit-scrollbar {
width: 2px !important;
}
「width」が横幅です。好きな数字にします。小さくすると、その分細くなります。デフォルトでは、「12px」になっていました。上記CSSだと、「2px」なのでかなり細くなります。
書き込めたら、右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:social.vivaldi.net)がオンになっていることを確認します。オンになっている間は有効になっているということです。
指定したスクロールバーサイズになります。通常レイアウト、上級者向けUI両方で動作します。

絵文字欄のスクロールバーにも反映されます。

ウィンドウ自体と絵文字欄のスクロールバーで別々のサイズにしたい場合、絵文字欄専用のスクロールバーを書き込みます。
/*絵文字欄のスクロールバー横幅サイズ*/
.emoji-mart-scroll::-webkit-scrollbar {
width: 10px !important;
}
感想
以上、「Vivaldi Social(ヴィヴァルディ・ソーシャル)」のスクロールバーを、細くスタイリッシュに調整するCSSでした。
トゥート入力画面をダークモードにする記事も書いています。スクロールバーの色も変えられます。