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

​​Vivaldi Social

「Vivaldi Social」のアイコン

この記事では、「Vivaldi Social（ヴィヴァルディ・ソーシャル）」上にあるスクロールバーの横幅を変更する方法を紹介します。

設定からは変更できないので、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」、あるいは「Stylus（スタイラス）」を使います。

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

本記事で紹介するCSSを使えば、「Vivaldi Social（ヴィヴァルディ・ソーシャル）」の分厚いスクロールバーを、細いデザインに変更できます。好きなサイズに指定できます。

デフォルトのスクロールバーは、ごっついです。ウェブサイトのスクロールバーを細くするChrome拡張機能「Modern scrollbar」を導入しても、「Vivaldi Social」上では反映されませんでした。

「Vivaldi Social」のスクロールバー画像

通常レイアウトならまだしも、上級者向けUIを使っている場合、スクロールバーが複数表示されるので、より厚みが気になると思います。コンパクトにしたい方、参考にしてみてください。

本記事は、「Vivaldi Social」画面での解説ですが、もしかしたら、「Mastodon（マストドン）」の他のインスタンスでも使えるかもしれません。試していないので分かりません。

「Vivaldi Social」については、以下の記事を参考にしてみてください。2022年11月からサービス開始したSNS（サーバー）です。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。

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

【ポイント】Vivaldiのサイドバー内にも適用したい場合は「Stylus」

Vivaldiのサイドバーに登録した「Vivaldi Social」にも反映させたい場合、「Stylebot」ではなく、「Stylus」拡張機能を利用します。詳しくは、下記記事を参考にしてみてください。

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

スクロールバーの横幅を調整する手順

「Vivaldi Social」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。

/*スクロールバーの横幅サイズ*/
::-webkit-scrollbar {
  width: 2px !important;
}

「width」が横幅です。好きな数字にします。小さくすると、その分細くなります。デフォルトでは、「12px」になっていました。上記CSSだと、「2px」なのでかなり細くなります。

書き込めたら、右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト（例：social.vivaldi.net）がオンになっていることを確認します。オンになっている間は有効になっているということです。

指定したスクロールバーサイズになります。通常レイアウト、上級者向けUI両方で動作します。

「Vivaldi Social」のスクロールバーをCSSで細くした比較画像

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

「Vivaldi Social」の絵文字欄にあるスクロールバーをCSSで細くした画像

ウィンドウ自体と絵文字欄のスクロールバーで別々のサイズにしたい場合、絵文字欄専用のスクロールバーを書き込みます。

/*絵文字欄のスクロールバー横幅サイズ*/
.emoji-mart-scroll::-webkit-scrollbar {
  width: 10px !important;
}

感想

以上、「Vivaldi Social（ヴィヴァルディ・ソーシャル）」のスクロールバーを、細くスタイリッシュに調整するCSSでした。

トゥート入力画面をダークモードにする記事も書いています。スクロールバーの色も変えられます。

​​Vivaldi Social