Floorpホーム（新しいタブ）を好きな壁紙に変更するCSS
この記事では、Firefoxベースのウェブブラウザ「Floorp」のカスタムCSS機能を使って、Floorpホーム（新しいタブを開いた時のページ）の背景を、好きな壁紙に変更するCSSについて書きます。
アニメ好きの方は、アニメの壁紙にすると、良い感じです。
本記事で紹介するCSSを使えば、Floorpブラウザの新しいタブを開いた時のページ「Floorpホーム」をカスタマイズできます。
具体的には、アニメ画像を壁紙にする、ロゴを非表示にする、スピードダイヤル（ウェブサイトのショートカット）の背景を透明にする…などできます。
「Floorpホームの背景が少し物足りない！自分で好きな壁紙にしたい！」という方、ぜひ参考にしてみてください。
「Floorpって何それ？」という方は、以下の記事を参考にしてみてください。
【下準備】「userContent.css」の作成
Floorpのブラウザ自体をカスタマイズする時は、「userChrome.css」ファイルに書き込んでいました。詳しくは、下記記事を参考にしてみてください。
一方で、Floorpホームなどのウェブサイトに対してのCSSは、「userContent.css」という別のファイルが必要になります。既に作成している方は、スキップしてOKです。
作成していない方は、以下の手順で作成していきます。
Floorpを起動して、右上のハンバーガーメニュー→ヘルプ→他のトラブルシューティング情報をクリックします。
プロファイルフォルダーの「フォルダーを開く」をクリックします。
エクスプローラーでFloorpのプロファイルフォルダーが開きます。「chrome」フォルダーを開きます。
既に、ブラウザの外観をCSSでカスタマイズしている方は、その時にchromeフォルダーを作成していると思います。
作成していない方は、新規にフォルダー作成→名前を「chrome」にします。
chromeフォルダー内で右クリック→新規作成→テキストドキュメントをクリックします。
名前を「userContent.css」に変更します。拡張子も変更する点がポイントです。拡張子の変更ダイアログが表示されるので、「はい」をクリックします。
作成できたら、右クリック→「プログラムから開く」から、テキストエディターソフトを選択して開きます。Windows標準のメモ帳や、MicrosoftのVisual Studio Codeがおすすめです。
以下の基礎コードを書き込みます。これが、土台の部分になります。「about:newtab」と「about:home」が、Floorpホームページという意味です。
@charset "UTF-8";
@-moz-document url-prefix("about:newtab"), url-prefix("about:home") {
/*ここに CSS を書いていく*/
}
下準備は終了です。後は「ここに CSS を書いていく」以降にコードを書き込んでいきます。
Floorpホームをカスタマイズする手順
好きな画像を用意する
壁紙を変更する方法は、大きく2通りあります。
- インターネット上の画像のURLを指定してそのまま使う
- ローカル内（PC）の画像を適用する
個人的には、ローカル内の画像を適用する方法がおすすめです。
インターネット上の画像だと、元画像に変更があった場合に、影響を受けてしまいます。インターネット上でいい感じの壁紙を見つけたら、一旦PC内に保存してから、Floorpに適用するといいかなと思います。
ここでは例として、イラスト素材サイト「イラストAC」から、いくつかアニメ画像を入手して使ってみたいと思います。（イラストACは会員登録が必要です。していないと、著作権違反になるので注意です）
背景を変更するCSSを書き込む
Floorpホームの背景を変更するCSSは、以下になります。
/*背景画像の変更*/
body {
background-size: cover !important;
background-image: url("file:///〇〇〇") !important;
}「background-image」の「〇〇〇」の部分を、適用したい壁紙画像のパスに置き換えます。
パスは、画像の右クリック→パスのコピーで、取得できます。
注意点ですが、「パスのコピー」だと、区切り記号が逆になっています。「\」を「/」に変更しましょう。
以下のように1本の下線が引かれたらOKです。（Visual Studio Codeの場合）パスの中には、「デスクトップ」という風に、日本語が入っていてもOKです。パスの前後の「"」記号は必要なので、消さないようにしましょう。
Floorpを再起動します。壁紙画像が変わっているはずです。
注意点ですが、一度適用したからといって、元画像を移動・削除してはいけません。同じ場所、同じ名前でそこに置いておきます。変更した場合は、その都度ファイルのパスも書き替えます。
あんまりおすすめではありませんが、インターネット上の画像を、そのまま使うことも可能です。その場合、基本的な形は一緒ですが、URLの部分が異なります。
ローカルの場合、「file:///〇〇〇」という形でしたが、インターネット上の画像の場合は、直接「〇〇〇」といった感じでURLを書き込みます。
試しに、当サーバーにアップロードしたテスト画像（花）を指定してみます。「"」で囲む点は一緒です。
/*背景画像の変更*/
body {
background-size: cover !important;
background-image: url("https://www.naporitansushi.com/wp-content/uploads/2022/05/test-cosumosu.jpg") !important;
}ブラウザを再起動すると、最初の一瞬は通常の背景が表示されますが、少しして指定したURLの画像が反映されます。画像の表示に、毎回インターネットを使うので、オフライン環境では表示されません。
ショートカット（ウェブサイト）を非表示にしたい場合、右上の歯車アイコン→ショートカットをオフにします。
いくつか適用してみた画像を貼っておきます。テーマと組み合わせると、自分だけのオリジナルブラウザが構築できます。
検索ボックス内のテキスト変更
おまけです。中央に表示されているGoogleのテキストボックスを透明化＆中のテキストを変更するコードを紹介します。
/*検索ボックス内のテキスト非表示*/
.search-handoff-button[aria-label*="Google"] {
font-size: 0 !important;
}
/*検索ボックス内のテキスト変更*/
.search-handoff-button[aria-label*="Google"]::before {
font-size: 14px;
content: "Floorpかもんかもん" !important;
color: var(--newtab-text-primary-color) !important;
opacity: 0.54 !important;
}
/*検索ボックスの背景透明化*/
.search-wrapper .search-handoff-button, .search-wrapper input {
background: transparent !important;
}上記CSSの「Floorpかもんかもん」を変更することで、好きな文言にできます。適用すると、検索ボックスが綺麗に透明になります。自分だけの個性あるテキストにしてみましょう。
透明化が不要な場合は、「検索ボックスの背景透明化」の部分を削除するだけです。
上記CSSは、バージョン10以降用です。10以前の8系を使っている場合は、以下のCSSになります。
/*検索ボックス内のテキスト非表示*/
.search-handoff-button[aria-label="ウェブを検索"] {
font-size: 0 !important;
}
/*検索ボックス内のテキスト変更*/
.search-handoff-button[aria-label="ウェブを検索"]::before {
font-size: 14px;
content: "Floorpかもんかもん" !important;
color: var(--newtab-text-primary-color) !important;
opacity: 0.54 !important;
}
/*検索ボックスの背景透明化*/
.search-wrapper .search-handoff-button, .search-wrapper input {
background: transparent !important;
}そもそも検索ボックス不要な場合
「透明化とか、テキスト変更とかどうでもいい！消したい！」という方は、以下のCSSになります。
/*検索ボックス非表示*/
.search-inner-wrapper {
display: none !important;
}
ウォーターマークの非表示（ロゴ＋テキスト）
Floorpのロゴとテキストを消すこともできます。消したいほうのコードを使ってみてください。両方消す場合は、2つとも書きます。
/*【ウォーターマーク】テキスト非表示*/
.logo-and-wordmark .wordmark {
display: none !important;
}
/*【ウォーターマーク】ロゴ非表示*/
.logo-and-wordmark .logo {
display: none !important;
}それぞれの比較画像を貼っておきます。
感想
以上、Floorpホームの背景を好きな壁紙に変更する方法、おまけで検索ボックス周りのカスタマイズについてでした。
僕はアニメ見ないんですが、ドラえもんの映画は見ます。すごくいいですよね！？大人でも涙ぼろぼろです。最近だと、「のび太の新恐竜
」が最高でした。話もそうだけど、絵がすごいですよね！絵が！綺麗で美しいです。