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

2022年5月9日Floorp

Floorpのアイコン

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

アニメ好きの方は、アニメの壁紙にすると、良い感じです。

Floorpホームの背景をアニメ画像にした様子
参考：飲み物　飲む　女の子　線画イラスト – No: 22171457／無料イラストなら「イラストAC」

本記事で紹介するCSSを使えば、Floorpブラウザの新しいタブを開いた時のページ「Floorpホーム」をカスタマイズできます。

具体的には、アニメ画像を壁紙にする、ロゴを非表示にする、スピードダイヤル（ウェブサイトのショートカット）の背景を透明にする…などできます。

Floorpの外観をカスタマイズしようと思ったら、「userChrome.css」ファイルが必要です。一方で、新しいタブ（Floorp Home）などの内部ページをカスタマイズは、「userContent.css」ファイルが必要です。

どちらにせよ、Floorpは、通常のFirefoxよりも簡単に利用できるようになっています。

「Floorpホームの背景が少し物足りない！自分で好きな壁紙にしたい！」という方、ぜひ参考にしてみてください。

「Floorpって何それ？」という方は、以下の記事を参考にしてみてください。Firefoxベースの国産ブラウザです。Firefoxの機能をそのまま搭載し、なおかつ垂直タブ、マウスジェスチャー、多段タブ、豊富なカラーテーマ、選べるブラウザの外観など、独自機能も多く搭載しています。

以前のグラデーション画像に戻したいという方へ

バージョン10.〇以降から、背景画像が黒っぽい一色になりました。

Floorp10.3.0バージョンの新しいタブの背景画像（黒）

「味気ないなぁ。以前のグラデーション画像が良かったなぁ」という方は、以下の記事を参考にしてみてください。本記事と同じで、カスタムCSSという機能を使うことで、以前のグラデーション画像に戻せます。

わざわざ開発者の方に当時のコードを教えていただいたので、忠実に再現できます。

「userContent」へのアクセス方法

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

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

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を改造する枠組みのコード画像

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

また、メニューバーを表示している場合、もっと楽にuserContentファイルにアクセスできます。メニューバーは、右上のメニューボタン→その他のツール→「ツールバーをカスタマイズ」から表示できます。

Floorp右上のポップアップメニュー画像

下部にある「ツールバー」を選択→メニューバーにチェックを入れます。右下の「完了」をクリックします。

「ツールバーをカスタマイズ」画面　メニューバーをオンにする

上部にそれぞれのメニューが追加されます。その中の「CSS」→「メニュー」→「userContent.cssを編集」から、いつでもアクセスできます。

メニューバー→CSSのメニュー画像

ただし、勝手にWindows標準のメモ帳になります。Visual Studio Codeなどの外部ソフトで開きたい方には、ちょっと使えないですね。

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

好きな画像を用意する

壁紙を変更する方法は、大きく2通りあります。

  • インターネット上の画像のURLを指定してそのまま使う
  • ローカル内（PC）の画像を適用する

個人的には、ローカル内の画像を適用する方法がおすすめです。

インターネット上の画像だと、元画像に変更があった場合に、影響を受けてしまいます。インターネット上でいい感じの壁紙を見つけたら、一旦PC内に保存してから、Floorpに適用するといいかなと思います。

ここでは例として、イラスト素材サイト「イラストAC」から、いくつかアニメ画像を入手して使ってみたいと思います。（イラストACは会員登録が必要です。していないと、著作権違反になるので注意です）

あらかじめ、PC内の好きな場所に壁紙を配置しておく

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

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

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

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

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

画像の右クリック→パスのコピー

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

パスの区切り記号の「\」を「/」に変更する

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

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

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

Floorpホームの背景画像をアニメにしたスクリーンショット　ピンク髪の女の子
参考：カーディガンを着た女の子驚イラスト – No: 2300582／無料イラストなら「イラストAC」

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

ローカルではなく、インターネット上の画像を使う場合

あんまりおすすめではありませんが、インターネット上の画像を、そのまま使うことも可能です。その場合、基本的な形は一緒ですが、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の画像が反映されます。画像の表示に、毎回インターネットを使うので、オフライン環境では表示されません。

Floorpホーム　コスモスの画像

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

歯車アイコン→ショートカット

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

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

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

おまけです。中央に表示されている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かもんかもん」を変更することで、好きな文言にできます。適用すると、検索ボックスが綺麗に透明になります。自分だけの個性あるテキストにしてみましょう。

検索ボックスのテキストを変更した画像

透明化が不要な場合は、「検索ボックスの背景透明化」の部分を削除するだけです。

バージョン10以前をお使いの方

上記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のウォーターマークを非表示にした比較画像　上からテキスト非表示、ロゴ非表示、両方非表示

感想

以上、Floorpホームの背景を好きな壁紙に変更する方法、おまけで検索ボックス周りのカスタマイズについてでした。

僕はアニメ見ないんですが、ドラえもんの映画は見ます。すごくいいですよね！？大人でも涙ぼろぼろです。最近だと、「のび太の新恐竜」が最高でした。話もそうだけど、絵がすごいですよね！絵が！綺麗で美しいです。

Posted by ナポリタン寿司