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

2022年8月6日Floorp

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

CSSで自分の好きなように外観をカスタマイズできます。

Floorpは、Firefoxベースのブラウザなので、FirefoxのカスタムCSSと同じ方法で、自由にデザインをカスタマイズできます。Firefoxと基本的には一緒ですが、Firefoxよりも、簡単に利用できます。予めファイルを自動生成してくれるので、手間が省けます。

例えば、カスタムCSSでは、以下のことができます。

ブラウザのタブ、ブックマークバー、ツールバーなどの背景色・文字色変更
ブックマークバー項目のテキストだけ非表示にして、アイコンのみ表示
不要な要素の非表示

CSSを理解している必要がありますが、自分の好きなようにカスタマイズできます。本記事では、カスタムCSSの導入方法、いくつかのCSSサンプルを紹介します。

「CSS、ちょっと勉強しているけど、ブラウザの外観もカスタマイズできちゃうの！？やり方知りたい！」という方、ぜひ参考にしてみてください。CSS全く理解できていない初心者さんには少し難しいかと思います。

本記事は、FloorpのカスタムCSSについて書いていますが、やっていることは、FirefoxのカスタムCSSと一緒です。よって、Firefox派生のブラウザなら、同じようなことが可能だと思います。

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

ベースがFirefoxなので、Firefoxに似ていますが、選択できるブラウザのテーマ、標準搭載の垂直タブ、通常よりも強力なGesturefyアドオン（マウスジェスチャー）、豊富なテーマなど、独自の機能も沢山搭載しているブラウザです。

【Floorp】Firefoxベースのカスタマイズ性が高いブラウザ

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

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

1. FloorpのカスタムCSSファイルの開き方
2. サンプルのCSS
3. セレクタの調べ方
4. 感想

FloorpのカスタムCSSファイルの開き方

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

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

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

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

中にある「userChrome」ファイルが、カスタムCSSを書き込むファイルです。もう一つ「userContent」というファイルもありますが、こちらは新しいタブ（Floorp Home）などのページに対してのファイルです。

本記事は、ブラウザ本体の外観をカスタマイズするので、使うファイルは、「userChrome.css」になります。

「userContent」について詳しく知りたい方は、下記記事を参考にしてみてください。新しいタブの背景を、好きなアニメの壁紙にする…といったことができます。

【Floorp】ホームページ(新しいタブ)を好きな壁紙に変更する方法

この記事では、Firefoxベースのウェブブラウザ「Floorp（フロープ）」の新しいタブ（about:home）の背 ...

https://www.naporitansushi.com/floorp-home-wallpaper-change/

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

中を開くと、説明と枠組みが記載されています。「この下にCSSを書いてください」の下から書いていきます。

「userChrome」ファイルをVisual Studio Codeで開いた画面

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

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

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

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

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

サンプルのCSS

いくつかサンプルのCSSを貼っておきます。

Floorpで、カスタムCSSを使うコツとしては、装飾の最後に「!important;」をつけることです。なぜかつけないと、反映されないことが多かったです。「!important;」は優先的に読み込むという意味です。

CSSを書き込んだら、その都度、上書き保存してFloorpを再起動させます。再起動しないと、反映されません。

ブックマークバーの背景色変更

ブックマークバー（ツールバー）の背景色を変更するCSSです。「#007199」の部分を、好きな色（HTML カラーコード）にすることで変更できます。

/*ブックマークバー背景色変更*/
#PersonalToolbar {
	background-color: #007199 !important;
}

上記CSSだと、ちょっと暗い青色になります。

タブ背景の角丸具合を調整

タブ背景の角丸具合を調整します。デフォルトだと、少し丸すぎるという方におすすめです。

/*タブ背景丸みを減らす*/
.tab-background {
	border-radius: 0 !important;    /*0は、角丸0*/
}

0だと完全なカクカクになります。少しだけ角丸は残しておきたい場合は、「5px」のようにpx単位で指定しましょう。上記CSSを適用した後と、適用前の比較画像を貼っておきます。

ブックマークバーの間隔調整

ブックマークバーにあるブックマークアイコンの左右の間隔を調整するCSSです。

  /*ブックマークバーの間隔調整*/
  toolbarbutton.bookmark-item:not(.subviewbutton) {
    margin-right: 10px; /*数値を大きくすれば余白が大きくなる*/
  }

上記CSSは、「10px」にしていますが、数値を大きくすればより間隔が広くなります。

参考までにデフォルト、10px、30pxに変更した画像を貼っておきます。

ブックマークバーのテキスト非表示

ブックマークバー（ツールバー）のテキストだけを非表示にして、アイコンのみ表示にするCSSです。

/*ブックマークバーのテキスト非表示*/
.bookmark-item .toolbarbutton-text {
  display: none !important;
}

僕は、ファビコンで判断しているので、文字は不要です。

フォルダーアイコンは、表示したい場合

ブックマークに直接登録しているサイトは、ファビコンのみ表示にして、フォルダーはアイコン＋テキスト表示にすることも可能です。

その場合は、以下のCSSになります。

/*ブックマークバーのテキスト非表示（フォルダーはテキストも表示）*/
.bookmark-item:not([type="menu"]) .toolbarbutton-text {
  display: none !important;
}

フォルダーアイコンは、どれも一緒で区別しにくいので、テキストを表示した方が見やすいです。

詳しくは、別記事で紹介しているので、気になった方は参考にしてみてください。

【Floorp】ブックマークバー項目をアイコンのみ表示するCSS

この記事では、Firefoxベースのブラウザ「Floorp（フロープ）」で、ブックマークバー（ツールバー）の ...

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

アドレスバーのドロップダウンリスト透明化

アドレスバー、及びドロップダウンリストを透明、すりガラス状にするCSSです。

  /*アドレスバーのドロップダウンリスト透明化*/
  #urlbar {
    background: transparent !important;
    backdrop-filter: blur(10px) !important;
  }

完全に透過したい場合は、「backdrop-filter: blur(10px);」の行を削除しましょう。僕は見やすいように少しぼかしています。

2022年5月追記

特定のFirefoxバージョン以降、「backdrop-filter」が使えなくなっているようです。いつか改善されるといいなぁと思います。

アドレスバーの「今回だけ使う検索エンジン」の非表示

アドレスバーのドロップダウンリストの一番下に表示される「今回だけ使う検索エンジン」を非表示にするCSSです。

/*今回だけ使う検索エンジン*/
.search-one-offs {
	display: none !important;
}

検索ボックスの「Googleで検索、またはURLを入力します」テキスト非表示

ツールバー内にある検索ボックスの「Googleで検索、またはURLを入力します」の文字を非表示にするCSSです。Google以外の検索エンジンを使っていても使えます。

ここの部分は、プレースホルダーと言います。プレースホルダーだけ非表示にするので、入力した文字は、正常に表示されます。

/*検索ボックス内のテキスト非表示*/
#urlbar-input::placeholder {
	opacity: 0 !important;
}

ツールバーの背景色を統一化＆ブックマークバーの高さ調整

ツールバーの背景色を統一化するCSSです。おまけで、ブックマークバーの高さを調整するコードも書いています。少し短くなってきゅっとなります。

  /*ツールバーの背景色を統一する*/
  #navigator-toolbox :is(toolbar, #nav-bar-customization-target):not(#toolbar-menubar) {
    background-color: var(--toolbar-bgcolor) !important;
    min-height: 27px !important; /*ブックマークバーの高さ*/
  }

  /*ツールバーとアドレスバーの境界線を削除*/
  #navigator-toolbox {
    --tabs-border-color: none !important;
  }

変更前と変更後の画像を貼っておきます。統一感が出ます。