【Floorp】カスタムCSSの使い方。自分で好きなようにデザインを変えてみよう!

2021年12月2日Floorp

Floorp のアイコン

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

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

Floorp の開発者ツール

Floorp は、Firefox ベースのブラウザなのでFirefox のカスタムCSS と同じ方法で自由にデザインをカスタマイズできます。具体的には、「userChrome.css」と呼ばれるファイルを作成して、適切な場所に配置することで機能するようになります。

CSS はサイトのデザインをカスタマイズできるコードです。例えばタブの背景を自分の好きな色にしたり、余計な項目を非表示にできます。

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

参考:【Floorp】Firefoxベース&大幅進化して帰ってきた!早速使ってみた感想 | ナポリタン寿司のPC日記

12月18日追記

Floorp 公式がカスタムCSSの導入方法・サンプルについて、記事を公開しました。僕のサイトでは紹介していないCSS なども公開されているので、気になった方は見てみてください。

参考:Floorp カスタム CSS について! – Ablaze Support

使い方

CSS を使えるように、下準備をします。

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

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

about:config

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

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

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

設定名を検索
toolkit.legacyUserProfileCustomizations.stylesheets

入力したら検索結果に1つだけヒットする項目があるので、「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」になりました。これ全てを選択して「userChrome.css」に変更しましょう。

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

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

名前の変更

これでファイルの準備・配置は終了です。あとはもう1ステップです。

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

作成した「userChrome.css」を開きます。そのままメモ帳で開いてもいいですが、「Visual Studio Code」などで開いてもOKです。

開いたら真っ白だと思うので、以下のコードを丸々コピペします。

@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 です。黄緑ハイライトの部分を好きな色(HTML カラーコード)にすることで変更できます。

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

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

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

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

ツールバーの背景が青色になる

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

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

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

0だと完全なカクカクになります。少しだけ角丸は残しておきたい場合は、「5px」のようにpx単位で指定しましょう。

上記CSS を適用した後と適用前の比較画像を貼っておきます。

タブ背景の角丸を調整した比較画像

上タブを非表示

垂直タブを使っていて、上タブはいらないという方向けです。

/*上タブ非表示*/
.tabbrowser-tab {
	display: none;
}
/*新しいタブを開くボタン非表示*/
#tabs-newtab-button {
	display: none;
}

上タブ(水平タブ)と「新しいタブを開く」ボタンが非表示になります。

水平タブを非表示にしたFloorp

本当はタブバーそのものを非表示にしたかったんですが、右上の最大化・最小化・閉じるボタンまで消えちゃったのでこれにしてます。

参考:【Vivaldi】垂直タブの使い方。ブラウザヘビーユーザーにちょーおすすめ! | ナポリタン寿司のPC日記

マウスホバーでブックマークバー自動展開

/*マウスホバーでブックマーク展開*/
#PersonalToolbar {
    visibility: collapse !important;
    opacity: 0;
    transition: all 0.5s;

}

/*マウスホバーでブックマーク展開 - ホバー時の動き*/
#navigator-toolbox:hover > #PersonalToolbar {
    visibility: visible !important;
    opacity: 1;
    transition: all 0.5s;
}

もしアニメーションが不要な場合は、「opacity」と「transition」の行を丸ごと削除します。瞬時に表示されるようになります。

このCSS は、以下のサイトを参考にさせていただきました。感謝です。

参考:Firefox ブックマークツールバーをどうにかしてやる|PC全般 メモ|また(option)かね

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

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

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

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

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

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

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

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

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

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

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

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

ツールバーの背景色を統一化する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 と開発者ツール
12月2日追記

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

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

URL からアクセス

僕の環境だと、なぜかショートカットキーが発動しないことがあったので結局こちらの方法に落ち着いています。

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

chrome://browser/content/browser.xhtml

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

browser.xhtml にアクセス

このページでキーボードのF12を押します。開発者ツールが開きます。

同じようにセレクタ選択モードでタブやツールバーを選択できるようになります。

F12で開発者ツールを起動

次回以降アクセスしやすいようにブックマークに登録しておくといいかもしれません。毎回URL を入力するのめんどくさいですもんね。

ブックマークを編集

まとめ

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

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

ちなみにVivaldi でもカスタムCSS を使うことができます。ちょっと方法は違いますが、ファイルを配置してCSS で書き込んでいくという点は一緒です。

参考:【Vivaldi】自分で作成したCSS を適用する方法。より高度なカスタマイズをしてみよう! | ナポリタン寿司のPC日記
参考2:【Vivaldi】Chrome拡張機能をマウスオーバーで展開させるCSS | ナポリタン寿司のPC日記

注意点として、セレクタが違うのでコピペしても動作しないのが多いです。

Posted by ナポリタン寿司