Floorpホーム（新しいタブ）を好きな壁紙に変更するCSS

2022年5月9日2022年12月23日Floorp

この記事では、Firefoxベースのウェブブラウザ「Floorp（フロープ）」のカスタムCSS機能を使って、Floorpホーム（新しいタブを開いた時のページ）の背景を、好きな壁紙に変更する方法について書きます。

本記事で紹介するCSSを使えば、「Floorp（フロープ）」ブラウザの新しいタブ「Floorpホーム」をカスタマイズできます。好きな壁紙を用意して、「userContent.css」で新しいタブに適用するという流れです。

以下のようなカスタマイズが可能です。

背景をアニメの壁紙にする
検索ボックスの背景を透明にする

「Floorpホームのランダムで切り替わる壁紙が物足りない！自分で好きな壁紙にしたい！」という方、参考にしてみてください。ただ、CSSを使うので、ちょっと初心者さんにはハードルが高いです。

「Floorpって何それ？」という方は、以下の記事を参考にしてみてください。

【Floorp】Firefoxベースのバランスに優れたブラウザ

この記事では、2021年12月にリリースされたFirefoxベースで、本家Firefoxの良い部分を引き継いで、さら ...

https://www.naporitansushi.com/floorp/

1. デフォルトの壁紙を無効化する
2. 「userContent」へのアクセス方法
3. Floorpホームをカスタマイズする手順
4. 感想

デフォルトの壁紙を無効化する

まずは、デフォルトのランダムで切り替わる壁紙を無効化します。無効化しないと、CSSを書いても反映されません。

「Floorp」を起動して、「新しいタブ（Floorp Home）」を開きます。右上の歯車アイコン（⚙）をクリックします。

余談

アドレスバーに、以下の文字列を貼ることでも開けます。

about:preferences#home

「他の設定を管理」をクリックします。

「Floorp Homeの背景の設定」項目を、「背景を表示しない」にします。

これで、ランダムで切り替わる美しい壁紙が無効化されます。

【Floorp】新しいタブの壁紙をグラデーションに戻す方法

この記事では、Firefoxベースのブラウザ「Floorp（フロープ）」の新しいタブの背景画像を、以前のオレ ...

https://www.naporitansushi.com/floorp-gradient-return-css/

「userContent」へのアクセス方法

「Floorp」を初めて起動した時、自動的に「userContent」ファイルを生成してくれます。この機能のおかげで、一気に利用までのハードルが下がりました。10.0.0以前は、もっと手間でした。

起動したら、右上のメニューアイコン（三本線、あるいは三点ボタン）→ヘルプ→「他のトラブルシューティング情報」をクリックします。

【ポイント】メニューバーを表示している場合、もっと楽！

メニューバーを表示している場合は、もっとアクセスが簡単です。メニューバー内の「CSS」→「userContent.cssを編集する」をクリックします。自動的にメモ帳が開きます。

「Floorp」のメニューバーから「userContent.css」にアクセスする手順画像

メニューバーを表示したい場合、ブラウザ右上のメニューボタン→その他のツール→「ツールバーをカスタマイズ」をクリックします。ページ下部の「ツールバー」をクリックして、「メニューバー」にチェックを入れます。

プロファイルフォルダーを探して、「フォルダーを開く」をクリックします。

エクスプローラーで、現在開いているプロファイルフォルダー内が表示されます。その中に、「chrome」フォルダーがあるのでダブルクリックで開きます。

中にある「userContent」ファイルが、書き込むファイルです。もう一つ「userChrome」というファイルもありますが、こちらはブラウザ本体の外観のカスタマイズです。

本記事は、新しいタブ（Firefox Home）をカスタマイズするので、使うファイルは、「userContent.css」になります。

「userChrome」について詳しく知りたい方は、下記記事を参考にしてみてください。ブックマークバーのテキストを非表示にしてアイコンだけにする…といったことが可能です。

【Floorp】カスタムCSSの導入方法。デザインをカスタマイズ！

この記事では、Firefoxベースの国産ブラウザ「Floorp」で、カスタムCSSを使う方法について書きます。Fi ...

https://www.naporitansushi.com/floorp-css/

右クリック→プログラムから開く→好きなテキストエディターソフトを選択します。Windows標準ならメモ帳です。個人的には、Microsoftの「Visual Studio Code」がおすすめです。

中を開くと、説明と枠組みが記載されています。そのまま枠組みを活用してもいいのですが、よく分からないという方は、全部削除して、代わりに以下のコードを書き込んでください。下記コードが、新しいタブに対する枠組みです。

@charset "UTF-8";

@-moz-document url-prefix("about:newtab"), url-prefix("about:home") {

  /*ここに CSS を書いていく*/


}

今後素早くアクセスしたい方は、ショートカットアイコンを作成するのがおすすめです。

Floorpホームをカスタマイズする手順

好きな画像を用意する

壁紙に設定したい画像をPCに用意します。サイズは、16:9の割合がいいと思います。（例：1920×1080）

ここでは例として、イラスト素材サイト「イラストAC」から、いくつかアニメ画像を入手して使ってみたいと思います。（会員登録必要）

背景を変更するCSSを書き込む

「Floorpホーム」の背景を変更する基礎のCSSは、以下になります。

/*背景画像の変更*/
body {
  background-size: cover !important;
  background-image: url("file:///〇〇〇") !important;
}

「background-image」の「〇〇〇」の部分を、適用したい壁紙画像のパスに置き換えます。

パスは、画像の右クリック→「パスのコピー」で取得できます。

注意点ですが、「パスのコピー」だと、区切り記号が逆になっています。「\」を「/」に変更します。

「Visual Studio Code」の場合、下記画像のように、1本の下線が引かれたらOKです。パスの中には、「デスクトップ」という風に、日本語が入っていてもOKです。パスの前後の「"」記号は必要なので、消さないようにしましょう。画像の拡張子も必要です。

良い例と悪い例を書いておきます。ちょっとしたミスで全然反映されなくなるので、よーくチェックします。

/*【悪い例】区切り記号の向き*/
body {
  background-size: cover !important;
  background-image: url("file:///D:\デスクトップ\素材\Floorp用壁紙\07.png") !important;
}

/*【悪い例】画像拡張子を書いていない*/
body {
  background-size: cover !important;
  background-image: url("file:///D:/デスクトップ/素材/Floorp用壁紙/07") !important;
}

/*【良い例】区切り記号も拡張子もちゃんとしている*/
body {
  background-size: cover !important;
  background-image: url("file:///D:/デスクトップ/素材/Floorp用壁紙/07.png") !important;
}

「Floorp」を再起動します。壁紙画像が変わっているはずです。

「Floorpホーム」の背景画像を、アニメにしたスクリーンショット（ピンク髪の女の子）

注意点ですが、適用したからといって、元画像を移動・削除してはいけません。同じ場所、同じ名前でそこに置いておきます。変更した場合は、その都度ファイルのパスも書き替えます。

ショートカット（ウェブサイト）を非表示にしたい場合、右上の歯車アイコン→「ショートカット」をオフにします。

いくつか適用してみた画像を貼っておきます。テーマと組み合わせると、自分だけのオリジナルブラウザが構築できます。

「Floorpホーム」の背景画像を変更したスクリーンショット（左上からUFOライン、二頭身の女の子、ストライプ半袖、金髪の女性）

Windows11の壁紙にすることも可能です。

Windows11の初期壁紙は、「C:\Windows\Web\Wallpaper\Windows」にあります。

C:\Windows\Web\Wallpaper\Windows

上記画像のように、背景をぼかしたい場合は、以下のようにします。「backdrop-filter」を書くことで、背景がぼけます。

/*背景画像の変更*/
body {
  backdrop-filter: blur(8px) !important;
  background-size: cover !important;
  background-image: url("〇〇〇") !important;
}

検索ボックス内のテキスト変更

中央に表示されているテキストボックスを透明化＆中のテキストを変更するコードを紹介します。

/*検索ボックス内のテキスト非表示*/
#newtab-search-text::placeholder {
  font-size: 0 !important;
}

/*検索ボックスの背景透明化*/
.search-wrapper .search-handoff-button, .search-wrapper input {
  background: transparent !important;
}