【Vivaldi】ページ内検索した時、暗くならないようにするCSS

2023年11月4日カスタムCSS

この記事では、「Vivaldi（ヴィヴァルディ）」ブラウザのオリジナルカスタムUI機能を使って、ページ内検索（Ctrl+F）をしている時、ウェブサイト全体が若干暗くなる機能を無効化するCSSを書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくは、こちらを参考にしてみてください。

2023年11月時点のWindows版「Vivaldi」ブラウザでは、ページ内検索（Ctrl+F）している時、若干画面が暗くなります。開発者ツールを見たところ、通常状態が100%に対して、95%の明るさにするようになっていました。5%分だけ暗くなる仕様です。

以下のフォーラムを見たとき、「あぁ、この暗くなる仕様はいらないと思う人もいるのかぁ」と思ったので、記事にします。

【デスクトップ版】ページ内検索の挙動 | Vivaldi Forum

・要望内容 ワードプレスの投稿編集画面においてのページ内検索について、文字列を検索して該当箇所に ...

 https://forum.vivaldi.net/topic/86070/デスクトップ版-ページ...

標準の設定からは変更できないので、カスタムCSSと呼ばれる技を利用します。設定からサクッと変更するのと比べて、少々手間ですが、一度環境を構築して、CSSを書き込めば、「Vivaldi」のアップデート等で使えなくなるまでは、ずっと適用されます。戻したくなったら、いつでもオンオフできます。

本記事は、Windows版（PC版）Vivaldiでの解説です。スマホやタブレットのアプリ版ではできません。

「Vivaldi」のオリジナルカスタムUI（CSS）を有効にする

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。「Vivaldi」上でCSSファイルを使えるように「vivaldi://experiments/」から変更して、CSSファイルを読み込ませます。

【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう！

この記事では、ウェブブラウザ「Vivaldi」にCSSを適用する方法について書きます。ブラウザの外観（UI） ...

 https://www.naporitansushi.com/vivaldi-css/

「Vivaldi」のページ内検索した時、暗くさせないCSS

以下のCSSになります。

/*ページ内検索した時、若干画面が暗くなるのを防ぐ*/
.find-in-page-wrapper:not(:empty)~.row-wrapper webview[style^="filter: brightness"] {
    filter: brightness(100%) !important;
}

上記のCSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）で開いた「Vivaldi」のカスタムCSSファイルに書き込みます。

ブラウザを再起動すると、ページ内検索しても、画面が暗くならなくなります。開発者ツールで見てみると、デフォルトの95%に取り消し線が追加されていて、代わりにCSSで書き込んだ「filter: brightness(100%) !important;」が上書きされています。

感想

以上、「Vivaldi（ヴィヴァルディ）」ブラウザのオリジナルカスタムUI機能を使って、ページ内検索（Ctrl+F）をしても、画面を暗くさせないようにする方法でした。

こうやって、ブラウザの外観や機能が気に食わなかったら、自分でカスタマイズできる点が、「Google Chrome」などと違う「Vivaldi」の特徴かなと思います。