【Floorp】新しいタブの検索ボックスを透明にするCSS
この記事では、Firefoxベースのカスタマイズ性に優れたウェブブラウザ「Floorp（フロープ）」のカスタムCSS機能を使って、新しいタブ（Floorp Home）にある検索ボックスを透明にするCSSを紹介します。
Floorpブラウザで新しいタブを開いた時、デフォルトだと中央に検索ボックスがあります。この検索ボックスは、ダークかライトテーマに応じた背景色になっています。
読者様から、「ここの検索ボックスの背景色を透明にしたーい」と要望を頂いたので、記事にします。いつでも元に戻せます。
本記事は、既にカスタムCSSについて、何となく理解している前提です。どういうものなのか、どこのファイルに書き込むのかなどの知識を知っている前提で書きます。よく分からない場合は、下記記事を参考にしてみてください。
https://www.naporitansushi.com/floorp-css/新しいタブの検索ボックスを透明にするCSS
CSSは、以下になります。
@-moz-document url-prefix("about:newtab"), url-prefix("about:home") {
/*検索ボックス透明化*/
#newtab-search-text {
background: transparent !important;
}
}本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、Floorpのアップデートによって、使えなくなることもあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。
Windows標準搭載のメモ帳や、Microsoftのコードエディター「Visual Studio Code」ソフトを使って、「chrome」フォルダーの「userContent.css」に書き込みます。
Floorpのタブバーや、ツールバー（アドレスバー）などのブラウザ本体に対してのカスタムCSSは、「userChrome.css」に書き込みます。
今回の場合、新しいタブ（Floorp Home）というFloorp本体ではなく、Floorpで表示するページに対して変更したいので、書き込むファイルは「userContent.css」になります。
Floorpの新しいタブで動作するよう「about:newtab」と「about:home」を指定しています。このページで動作させたいCSSが追加したくなった場合は、間に書き込んでいけば、わざわざ別で「@-moz-document～～」を書かなくて済みます。
もしFloorpブラウザのほうで、メニューバーを表示している場合は、CSS→CSS→「userContent.cssを編集する」から、すぐにアクセスできます。わざわざ「chrome」フォルダーを、エクスプローラー上で探さなくてOKです。好きなエディターソフトで開けます。
メニューバーが表示されていない場合は、ツールバー（アドレスバーなどがある部分）にある適当なボタンを右クリック→「メニューバー」にチェックすることで表示できます。戻る、進む、閉じたタブを開くボタンなどの右クリックです。
詳しくは、下記記事を参考にしてみてください。
書き込めたら、ファイルを上書き保存して、ブラウザを再起動します。検索ボックスが透明になります。
文字を入力して、検索する機能は、これまで通り利用できます。
使わなくなったら、書き込んだコードを削除して、ブラウザを再起動します。
そもそも検索ボックスが不要な場合
Floorpの設定→ホーム→「ウェブ検索」をオフにすることで、非表示にできます。
詳しくは、下記記事を参考にしてみてください。他のカスタマイズ方法も記載しています。
感想
以上、Firefoxベースのカスタマイズ性に優れたウェブブラウザ「Floorp（フロープ）」のカスタムCSS機能を使って、新しいタブ（Floorp Home）にある検索ボックスを透明にするCSSでした。