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

この記事では、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のカスタムCSSファイルの開き方
Floorpを起動します。初回起動時、自動的にCSSフォルダーを生成してくれます。この機能のおかげで、一気に利用までのハードルが下がりました。10.0.0以前は、もっと手間でした。
Floorpを起動したら、右上のメニューアイコン(三本線、あるいは三点ボタン)→ヘルプ→「他のトラブルシューティング情報」をクリックします。

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

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

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

本記事は、ブラウザ本体の外観をカスタマイズするので、使うファイルは、「userChrome.css」になります。
「userContent」について詳しく知りたい方は、下記記事を参考にしてみてください。新しいタブの背景を、好きなアニメの壁紙にする…といったことができます。
右クリック→プログラムから開く→好きなテキストエディターソフトを選択します。Windows標準ならメモ帳です。個人的には、MicrosoftのVisual Studio Codeがおすすめです。
中を開くと、説明と枠組みが記載されています。「この下にCSSを書いてください」の下から書いていきます。

今後素早くアクセスしたい方は、ショートカットアイコンを作成するのがおすすめです。
また、メニューバーを表示している場合、もっと楽に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です。
/*アドレスバーのドロップダウンリスト透明化*/
#urlbar {
background: transparent !important;
backdrop-filter: blur(10px) !important;
}
完全に透過したい場合は、「backdrop-filter: blur(10px);」の行を削除しましょう。僕は見やすいように少しぼかしています。

特定の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;
}
変更前と変更後の画像を貼っておきます。統一感が出ます。

セレクタの調べ方
Firefoxで、カスタムCSSを使っている方なら知っていると思うんですが、いちおメモ代わりに書いておこうと思います。僕は、Firefoxベースのブラウザが初めてだったので、どうやるんだ~と悩みました。
多分いくつか方法はあるんでしょうが、僕が使いやすかった方法2つを紹介します。
キーボードショートカットキー
Floorpを起動して、好きなページを開いてキーボードのCtrl+Shift+Alt+Iを同時に押します。新しいウィンドウで開発者ツール(ブラウザーツールボックス)が開きます。

あとは、セレクタ選択モードでタブとかツールバーあたりをクリックしたら、調べられます。
URLからアクセス
以下のURLをアドレスバーに入力して、Enterを押します。
chrome://browser/content/browser.xhtml
アクセスしたら、タブやツールバーが二重になって表示されます。

このページでキーボードのF12を押します。開発者ツールが開きます。同じように、セレクタ選択モードでタブやツールバーを選択できるようになります。

次回以降アクセスしやすいようにブックマークに登録しておくといいかもしれません。

ドロップダウンリストについて
アドレスバーのドロップダウンリスト、ケバブメニューなどのクリックしてから表示されるポップアップについては、セレクタを調べようにも、自動で閉じちゃうので選択できません。
そこで、ポップアップを自動で隠さないように設定します。
開発者ツール(ブラウザツールボックス)を起動します。右上の三点ボタンをクリック→「ポップアップを自動で隠さない」にチェックを入れます。

ポップアップ(ドロップダウンリスト)が、セレクタ選択できるようになります。

感想
以上、FloorpでカスタムCSSを使う方法についてでした。
下準備は少し大変なんですが、できたら自由にブラウザをカスタマイズできます。ぜひ色々UIを変更して、使いやすいようにしてみましょう。
余談ですが、VivaldiブラウザでもカスタムCSSが使えます。ちょっと方法は違いますが、ファイルを配置してCSSで書き込んでいくという点は一緒です。
注意点として、セレクタが違うので、Floorpで使えてもVivaldiでは使えないパターンがほとんどです。その逆も然りです。