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

2021年12月2日Floorp

Floorpのアイコン

この記事では、2021年12月1日に公開されたFirefoxベースのブラウザ「Floorp」で、カスタムCSSを使う方法について書きます。

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

Floorpの開発者ツール

Floorpは、Firefoxベースのブラウザなので、FirefoxのカスタムCSSと同じ方法で、自由にデザインをカスタマイズできます。

具体的には、「userChrome.css」ファイルを作成して、適切な場所に配置→中にCSSを書き込むことで、ブラウザの外観をカスタマイズできます。

例えば、以下のことができます。

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

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

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

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

「Floorpって何?」という方は、下記記事を参考にしてみてください。ベースがFirefoxなので、Firefoxに似ているけれど、選択できるブラウザのテーマ、標準搭載の垂直タブ、通常よりも強力なGesturefyアドオン(マウスジェスチャー)など、独自の機能も搭載しているブラウザです。

FloorpでカスタムCSSを使えるようにする手順

まずは、カスタムCSSを使えるように、下準備をします。2021年12月に公開されたFloorpバージョン8.10から、カスタムCSSを使うまでのハードルが減りました。Firefoxよりも、簡単にCSSを導入できます。

Floorpを開いて、アドレスに以下のコードを入力して、Enterを押します。コピペでOKです。

about:config

「注意して進んでください!」と警告が表示されるので、「危険性を承知の上で使用する」をクリックします。

注意して進んでください!

アクセスできたら、「設定名を検索」に、以下の文字を入力します。

toolkit.legacyUserProfileCustomizations.stylesheets

入力したら、検索結果に「toolkit.legacyUserProfileCustomizations.stylesheets」項目がヒットするので、「false」をダブルクリックして、「true」に変更します。ダブルクリックで変更するのがポイントです。

toolkit.legacyUserProfileCustomizations.stylesheetsを「true」にする

変更できたら、一旦Floorpを「×」で閉じて、次の作業に取り掛かります。

「userChrome.css」を作成

CSSを書き込むファイルを準備・配置します。

配置する場所を確認

Floorpを起動します。右上のケバブメニュー(三点ボタン)→ヘルプをクリックします。

ケバブメニュー ヘルプ

他のトラブルシューティング情報をクリックします。

他のトラブルシューティング情報

Floorpの情報がずらっと表示されるので、プロファイルフォルダーの項目を探します。見つけたら、「フォルダーを開く」をクリックします。

アプリケーション基本情報

エクスプローラーで、Floorpのプロファイル場所が表示されます。ここにファイルを配置していきます。

ファイルを作成

プロファイルフォルダー内に、「chrome」フォルダーがあるかどうかを確認します。あった場合は作成しなくてもOKです。

ない場合は新しくフォルダーを作成します。右クリック→新規作成→フォルダーで作成できます。

新規フォルダーを作成

作成できたら、名前を「chrome」にします。

名前を「chrome」に変更

現時点で、以下のようなフォルダー構成になっていればOKです。恐らく「〇〇〇.default-default」の〇の部分は、人によって違うと思います。

C:\Users\Naporitansushi\AppData\Roaming\Mozilla\Firefox\Profiles\〇〇〇.default-default\chrome

chromeフォルダーを作成できたら、中身を開いてメモ帳を作成します。フォルダー内で右クリック→新規作成→テキストドキュメントで作成できます。

chromeフォルダー内に新規テキストドキュメントを作成

名前を以下のようにします。

userChrome.css
名前を「userChrome.css」に変更

ファイルの名前を変更するだけでなく、拡張子も一緒に変更します。人によっては拡張子を非表示にしているかもしれません。

エクスプローラー上部の表示タブ→ファイル名拡張子で表示できます。

エクスプローラー上部の表示→表示→ファイル名拡張子

「新規テキストドキュメント」だったのが、拡張子も表示されて、「新規テキストドキュメント.txt」になります。全選択(CtrlA)して、「userChrome.css」に変更します。

拡張子(.txt)が表示される

拡張子も一緒に変更するので、名前の変更ダイアログが表示されます。「はい」をクリックします。

名前の変更 拡張子を変更するとファイルが使えなくなる可能性があります。変更しますか?

これでファイルの準備・配置は終了です。

CSSファイルに必要最低限の項目を記述

作成した「userChrome.css」を開きます。Windows標準のメモ帳や、MicrosoftのVisual Studio Codeなどで開きます。

「userChrome」の右クリック→プログラムから開く

以下のコードを丸々コピペします。

@charset "UTF-8";

@-moz-document url(chrome://browser/content/browser.xhtml) {

/*以下、CSSを書いていく*/

}

貼り付けたら、ファイル→上書き保存をクリックします。

userChrome.cssに必要な情報を記述

これで準備完了です。

実際に「userChrome.css」ファイルの「/*以下、CSSを書いていく*/」より下に、CSSを書いていきます。ちなみに、必要なのは最初の2行と最後の記号だけなので、僕の書いた「/*以下、CSSを書いていく*/」の行は消してもOKです。

サンプルのCSS

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

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

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

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

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

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

以下画像のように、間にCSSを書き込んでいくイメージです。最後の「}」は必要な記号なので削除しないようにしましょう。

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

上記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です。

  /*アドレスバーのドロップダウンリスト透明化*/
  #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;
  }

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

ツールバーの背景色変更

Floorpホームなどのウェブページのカスタマイズ

本記事は、Floorpブラウザ自体のカスタマイズです。

一方で、新しいタブで開いた時に表示されるFloorpホームなどのページは、「userChrome.css」ファイルに書き込むことで、カスタマイズできます。背景を好きなアニメの壁紙にする…といったことができます。

セレクタの調べ方

FirefoxでカスタムCSSを使っている方なら知っていると思うんですが、メモ代わりに書いておこうと思います。僕はFirefoxベース初めてだったので、最初はどうやるんだ~と悩みました。

多分いくつか方法はあるんでしょうが、僕が使いやすかった方法2つを紹介します。

キーボードショートカットキー

Floorpを起動して、好きなページを開いてキーボードのCtrlShiftAltIを同時に押します。新しいウィンドウで開発者ツール(ブラウザーツールボックス)が開きます。

Floorpと開発者ツール

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

12月2日追記

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

その他のツール ブラウザツールボックス

URLからアクセス

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

chrome://browser/content/browser.xhtml

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

browser.xhtmlにアクセス

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

F12で開発者ツールを起動

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

ブックマークを編集

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

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

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

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

三点ボタン ポップアップを自動で隠さない

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

ドロップダウンリストを開いたまま作業できる

感想

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

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

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

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

Posted by ナポリタン寿司