【Vivaldi】休止タブをより分かりやすく薄くするCSS
「Vivaldi」ブラウザには、タブの休止機能が搭載されていて、使っていないタブを休止しておくことで、PCへの負担を減らすことができます。
休止したタブは、通常のタグよりも、若干薄くなります。しかし、使っているテーマによっては、薄さ具合が足りなくて、通常タブとほぼ見分けがつかない場合があります。
カスタムCSS機能を使うことで、任意の薄さに調整できます。
本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。CSSを使って、ブラウザ本体をあれやこれやカスタマイズできる機能です。
https://www.naporitansushi.com/vivaldi-css/Vivaldiの休止タブをより薄くするCSS
以下のCSSになります。CSSは、こちらのVivaldiフォーラムから、お借りさせていただきました。「ポポガミ･ポ」さん、CSSの作成、及びブログに掲載する許可をいただき、ありがとうございます。
/*休止タブをもっと薄くする*/
/*参考：https://forum.vivaldi.net/post/696182*/
#tabs-container .tab.isdiscarded .tab-header {
filter: grayscale(80%) opacity(0.5);
}「filter」の「grayscale」と「opacity」を使っています。好みに応じて数字を調整しましょう。
「grayscale（グレースケール）」は、白黒具合です。100%にすると、完全に色が無くなって、モノクロ（白黒）になります。モノクロにすることで、タブアイコンから彩度がなくなって、より通常タブと見分けやすくなるかもしれません。上記サンプルCSSは、80%なので、結構モノクロにします。
「opacity（オパシティ）」は透明度です。0～1の間で指定でき、0にすると、完全な透明になります。休止タブが何も見えなくなるので、最低でも0.1以上がいいかなと思います。
上記のCSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）でファイルに書き込みます。
Vivaldiブラウザを再起動します。休止タブが通常よりも薄くなります。
上記記事を書いている時に気づいたんですが、初期テーマはCSSを使ったとしても、背景が赤色のせいで、通常タブと休止タブの見分けがつきにくかったです。
ダークテーマなどにすると、より見分けがつきやすくなりました。
元に戻したい場合は、書き込んだCSSを削除して、ブラウザを再起動します。
薄くするのではなく、ファビコンを追加
Vivaldiフォーラムに、薄くするのではなく、ファビコン（目印）を付ける…というちょっと高度なカスタマイズCSSが紹介されています。人によっては、こちらのほうがいいかもしれません。
https://forum.vivaldi.net/post/696237上記で紹介したCSSとの併用も可能です。
感想
以上、「Vivaldi（ヴィヴァルディ）」ブラウザのオリジナルカスタムUI機能を使って、休止タブをより薄くして、通常タブと見分けやすくするCSSでした。