【Vivaldi】ページ内検索(Ctrl+F)を下に配置するCSS

カスタムCSS

Vivaldiのアイコン

この記事では、VivaldiのオリジナルカスタムUI機能を使って、ページ内検索(CtrlF)のバーを下側に配置するCSSについて書きます。

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

【Vivaldi】ページ内検索(Ctrl+F)を下に配置するCSS

僕は、CSSを使ってブックマークバーをマウスオーバーで自動展開するようにしています。外観はスッキリして、バーを使いたい時はマウスを近づけるだけなので、非常に便利です。

しかし、1つだけ不便な点があります。

ページ内検索(CtrlF)のバーを出していると、ブックマークバーをひょっこり表示した時に、被ってしまい見えなくなるという点です。

ブックマークバー自動展開CSSを使っていると、ページ内検索(Ctrl+F)と被ってしまう

そこで、ページ内検索のバーを上(アドレスバーの下)ではなく、下(ステータスバーの上)に配置してみようと思いました。オプションは用意されていないので、CSSを使います。といっても、サクッと下配置にできます。

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。

CSS

以下のCSSになります。

/*ページ内検索(Ctrl+F)*/
.find-in-page-wrapper {
  order: 2; /*下配置*/
}

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

Vivaldiを再起動すると、ページ内検索(CtrlF)が下配置になります。

ページ内検索ボックスを下配置にした画像

もし、ならないという場合は、「order」の数字を2よりも上の数字にしてみてください。

「order」は、簡単に言うとコンテンツを並び替えるCSSです。数字が若い順から順番に配置されます。他の部分では、「order」を使っていないので、とりあえずページ内検索に「order(数字は1でも2でも何でもOK)」をつければ、自動的に下配置になるかと思います。

上配置の時と同様に、普通に利用できます。これでブックマークバー自動展開のCSSと干渉することがなくなります。

ページ内検索:Vivaldiの検索結果画像

スタートページにナビゲーションバーを表示している方は、合わせて、そちらも下配置にすると便利かもしれません。

/*【スタートページ】ナビゲーションバー*/
.startpage .startpage-navigation {
  order: 1; /*下配置*/
}
スタートページのナビゲーションバーを下配置にした画像

ナビゲーションバーのカスタマイズなどについては、以下の記事を参考にしてみてください。CSSを使うことで、透明にするなんてことが可能です。

感想

以上、Vivaldiのブックマークバー自動展開CSSを使っている時に、ページ内検索(CtrlF)と被ってしまう問題を解決するために、検索ボックスを下配置にするCSSについてでした。

Posted by ナポリタン寿司