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

2022年5月9日Floorp

Floorpのアイコン

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

「Floorpホーム」の背景画像を好きなアニメ壁紙にしたスクリーンショット

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

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

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

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

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

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

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

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

「Floorp」の新しいタブの背景を無効化する手順画像1
余談

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

about:preferences#home

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

「Floorp」の新しいタブの背景を無効化する手順画像2

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

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

「Floorp」の新しいタブの背景を無効化した画像

「userContent」へのアクセス方法

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

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

「Floorp」の右上のポップアップメニュー画像
【ポイント】メニューバーを表示している場合、もっと楽!

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

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

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

「Floorp」のメニューバーを表示させる手順画像

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

トラブルシューティング情報(about:support)画面

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

「Floorp」のプロファイルフォルダー内画像

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

プロファイルの「chrome」フォルダー内の画像

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

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

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

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

@charset "UTF-8";

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

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


}
「Floorp Home」を改造する枠組みのコード画像

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

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」画像

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

「Floorpホーム」の背景画像を変更するCSSを書き込んだ画面

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

/*【悪い例】区切り記号の向き*/
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ホーム」のショートカットを非表示にする手順画像

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

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

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

Floorpの新しいタブを、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;
}
「Floorpホーム」にあるテキストボックスを透明化した画像
そもそも検索ボックスが不要な場合

「アドレスバーから検索するから、新しいタブ内の検索ボックスは不要!」という場合、設定から非表示にしてみましょう。CSSを使わなくても非表示にできます。

「about:preferences#home」にアクセスして、「ウェブ検索」をオフにします。

「Floorpホーム」の検索ボックスを非表示にする手順画像

これで検索ボックス自体が消えます。「Floorp」のロゴも一緒に消えます。

感想

以上、「Floorpホーム」の背景を好きな壁紙に変更する方法でした。

僕はアニメを見ないんですが、ドラえもんの映画は見ます。すごくいいですよね!?大人でも涙ぼろぼろです。2021年4月に「のび太の新恐竜」を見ました。話もそうだけど、絵がすごいですよね!絵が!綺麗で美しいです。

余談ですが、タブバーを透過させる「Mica for Everyone」の効果を、アドレスバーやサイドバーにも反映する記事も書いています。

2022年5月9日Floorp