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

2021年12月2日Floorp

Floorpのアイコン

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

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

Floorpの開発者ツール

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メニューバーの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;
}

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

ブックマークバーをアイコンのみ表示、フォルダーはテキストも表示した画像

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

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

アドレスバー、及びドロップダウンリストを透明、すりガラス状にする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;
}
「Googleで検索、またはURLを入力します」非表示前と後の比較画像

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

ツールバーの背景色を統一化する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を起動して、好きなページを開いてキーボードのCtrlShiftAltIを同時に押します。新しいウィンドウで開発者ツール(ブラウザーツールボックス)が開きます。

Floorpと開発者ツール(ブラウザーツールボックス)の画像

あとは、セレクタ選択モードでタブとかツールバーあたりをクリックしたら、調べられます。

2021年12月2日追記

ケバブメニュー(三点ボタン)→その他のツール→ブラウザーツールボックスからでもアクセスできました。

Floorpのメニュー→その他のツール画像

URLからアクセス

以下のURLをアドレスバーに入力して、Enterを押します。

chrome://browser/content/browser.xhtml

アクセスしたら、タブやツールバーが二重になって表示されます。

「browser.xhtml」画像

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

F12で開発者ツールを起動した画像

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

ブックマークを編集ダイアログ画面

ドロップダウンリストについて

アドレスバーのドロップダウンリスト、ケバブメニューなどのクリックしてから表示されるポップアップについては、セレクタを調べようにも、自動で閉じちゃうので選択できません。

そこで、ポップアップを自動で隠さないように設定します。

開発者ツール(ブラウザツールボックス)を起動します。右上の三点ボタンをクリック→「ポップアップを自動で隠さない」にチェックを入れます。

開発者ツールのミートボールメニュー内の項目画像

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

ドロップダウンリストを開いたまま作業している画像

感想

以上、FloorpでカスタムCSSを使う方法についてでした。

下準備は少し大変なんですが、できたら自由にブラウザをカスタマイズできます。ぜひ色々UIを変更して、使いやすいようにしてみましょう。

余談ですが、VivaldiブラウザでもカスタムCSSが使えます。ちょっと方法は違いますが、ファイルを配置してCSSで書き込んでいくという点は一緒です。

注意点として、セレクタが違うので、Floorpで使えてもVivaldiでは使えないパターンがほとんどです。その逆も然りです。

Posted by ナポリタン寿司