【Vivaldi】ページ内検索（Ctrl+F）を下に配置するCSS
本記事のCSSを使うことで、ページ内検索ボックスを、下に配置できます。2022年12月時点で、ページ内検索は上固定です。下に配置するオプションはありません。
僕は、CSSを使ってブックマークバーをマウスオーバーで自動展開化しています。普段はスッキリさせて、表示させたい時に利用できるので便利です。
https://www.naporitansushi.com/auto-bookmarkbar/しかし、1つだけ不便な点があります。ページ内検索（Ctrl+F）のバーを出していると、ブックマークバーを表示した時に、被ってしまう点です。検索バーが見えなくなってしまいます。
そこで、アドレスバーの下ではなく、ステータスバーの上に配置してみようと思いました。いつでも元に戻せます。
本記事は、既にオリジナルカスタムUI機能を有効にしている前提です。まだ有効にしていない方は、以下の記事を参考にしてみてください。
ページ内検索ボックス（Ctrl+F）を下に配置するCSS
以下のCSSになります。
/*ページ内検索（Ctrl+F）*/
.find-in-page-wrapper {
order: 2; /*下配置*/
}上記CSSを、テキストエディター（「Visual Studio Code」や、Windows標準でインストールされているメモ帳アプリなど）でファイルに書き込みます。
ブラウザを再起動すると、ページ内検索（Ctrl+F）が下配置になります。
もし、ならないという場合は、「order」の数字を、2よりも上の数字にしてみてください。
「order」は、コンテンツを並び替えるCSSです。数字が若い順から順番に配置されます。他の部分では、「order」を使っていないので、とりあえずページ内検索に「order（数字は1でも2でも何でもOK）」をつければ、自動的に下配置になると思います。
導入前と同じように利用できます。ブックマークバー自動展開のCSSと干渉しなくなります。
タブバーを下配置にしている場合は、タブバーが一番下、その上にページ内検索が配置されます。
ナビゲーションバーを下配置にするCSS
スタートページにナビゲーションバーを表示している方は、合わせて、下配置にすると便利かもしれません。
/*【スタートページ】ナビゲーションバー*/
.startpage .startpage-navigation {
order: 1; /*下配置*/
}
ナビゲーションバーのカスタマイズについては、以下の記事を参考にしてみてください。
感想
以上、「Vivaldi」ブラウザのページ内検索（Ctrl+F）を上ではなく、下に配置するCSSでした。
ただでさえ多機能なのに、カスタムCSSが利用できるなんて、すごいですよね。