広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【Floorp】新しいタブの検索ボックスを透明にするCSS

Floorp

Floorpのアイコン

この記事では、Firefoxベースのカスタマイズ性に優れたウェブブラウザ「Floorpフロープ」のカスタムCSS機能を使って、新しいタブ(Floorp Home)にある検索ボックスを透明にするCSSを紹介します。

【Floorp】新しいタブの検索ボックスを透明にするCSS

Floorpブラウザで新しいタブを開いた時、デフォルトだと中央に検索ボックスがあります。この検索ボックスは、ダークかライトテーマに応じた背景色になっています。

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」に書き込みます。

Visual Studio Codeを使って、Floorpの「userContent.css」ファイルにCSSを書き込んでいる画像1
【ポイント】「userChrome.css」ではない!

Floorpのタブバーやツールバー(アドレスバー)などのブラウザ本体に対してのカスタムCSSは「userChrome.css」に書き込みます。

今回の場合、新しいタブ(Floorp Home)というFloorp本体ではなく、Floorpで表示するページに対して変更したいので、書き込むファイルは「userContent.css」になります。

Floorpの新しいタブで動作するよう「about:newtab」と「about:home」を指定しています。このページで動作させたいCSSが追加したくなった場合は、間に書き込んでいけばわざわざ別で「@-moz-document~~」を書かなくて済みます。

Visual Studio Codeを使って、Floorpの「userContent.css」ファイルにCSSを書き込んでいる画像2

もしFloorpブラウザのほうでメニューバーを表示している場合は、CSS→CSS→「userContent.cssを編集する」から、すぐにアクセスできます。わざわざ「chrome」フォルダーをエクスプローラー上で探さなくてOKです。

Floorpブラウザで初めてメニューバーからCSSファイルを開く手順画像1
メニューバーの表示・非表示を切り替える方法

メニューバーが表示されていない場合は、ツールバー(アドレスバーなどがある部分)にある適当なボタンを右クリック→「メニューバー」にチェックすることで表示できます。戻る、進む、閉じたタブを開くボタンなどの右クリックです。

Firefoxベースのブラウザ「Floorp」でメニューバーを表示する手順画像

書き込めたらファイルを上書き保存してブラウザを再起動します。検索ボックスが透明になります。

FloorpでカスタムCSS機能を使って、検索ボックスを透明化した画像1

文字を入力して検索する機能は、これまで通り利用できます。

FloorpでカスタムCSS機能を使って、検索ボックスを透明化した画像2

使わなくなったら書き込んだコードを削除してブラウザを再起動します。

そもそも検索ボックスが不要な場合

Floorpの設定→ホーム→「ウェブ検索」をオフにすることで非表示にできます。

Floorp Homeにあるウェブ検索ボックスを非表示にする手順画像

詳しくは下記記事を参考にしてみてください。

感想

以上、Firefoxベースのカスタマイズ性に優れたウェブブラウザ「Floorpフロープ」のカスタムCSS機能を使って、新しいタブ(Floorp Home)にある検索ボックスを透明にするCSSでした。

Floorp

Posted by ナポリタン寿司