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

2022年5月9日Floorp

Floorpのアイコン

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

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

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

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

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

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

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

【下準備】「userContent.css」の作成

Floorpのブラウザ自体をカスタマイズする時は、「userChrome.css」ファイルに書き込んでいました。詳しくは、下記記事を参考にしてみてください。

一方で、Floorpホームなどのウェブサイトに対してのCSSは、「userContent.css」という別のファイルが必要になります。既に作成している方は、スキップしてOKです。

作成していない方は、以下の手順で作成していきます。

Floorpを起動して、右上のハンバーガーメニュー→ヘルプ→他のトラブルシューティング情報をクリックします。

ハンバーガーメニュー→ヘルプ→他のトラブルシューティング情報

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

アプリケーション基本情報 プロファイルフォルダー

エクスプローラーでFloorpのプロファイルフォルダーが開きます。「chrome」フォルダーを開きます。

「chrome」フォルダーをクリック
「chrome」フォルダーがない方

既に、ブラウザの外観をCSSでカスタマイズしている方は、その時にchromeフォルダーを作成していると思います。

作成していない方は、新規にフォルダー作成→名前を「chrome」にします。

chromeフォルダー内で右クリック→新規作成→テキストドキュメントをクリックします。

新規作成→テキストドキュメント

名前を「userContent.css」に変更します。拡張子も変更する点がポイントです。拡張子の変更ダイアログが表示されるので、「はい」をクリックします。

メモ帳の名前を「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 を書いていく*/


}
Visual Studio Code 下書きコードを書き込む

下準備は終了です。後は「ここに CSS を書いていく」以降にコードを書き込んでいきます。

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 ナポリタン寿司