userChrome.cssとは？
ブラウザ・Mozilla Firefoxでは、「userChrome.css」というCSSのスタイルシートを適用することで、アドオンなどを使用しなくても柔軟にFirefoxをカスタマイズすることができます。専門の知識は必要ですが、userChrome.cssを使用することによりブラウザのタブ表示を多段タブ化させたり、ダークモード化したりと様々なカスタマイズを行うことができますよ。
userChrome.cssの導入方法は、下記リンク先の記事を参考にしてみてください。
userChrome.cssは使えなくなった？
userChrome.cssを導入しているものの、Firefox Quantumになってから使用できなくなった・バージョンを更新したら効かなくなってしまったと感じるユーザーの方もいらっしゃるかと思います。これは、Firefoxの設定変更によりuserChrome.cssを認識できない状態になってしまっていることが原因です。
Firefoxの設定とuserChrome.cssの中身を書き換えることで、再びuserChrome.cssによるカスタマイズを行うことができるようになりますよ。
userChrome.cssを使う方法
それでは、userChrome.cssを使う方法を説明します。まずはFirefoxを起動して、アドレスバーに「about:config」と入力してEnterキーを押しましょう。
「注意して進んでください！」画面が表示されるので、「危険性を承知の上で使用する」ボタンをクリックして進みましょう。
「高度な設定」ページが開きます。ページ上部の検索欄に「toolkit.legacyUserProfileCustomizations.stylesheets」と入力すると該当の項目が表示されるので、値が「true」になっているか確認しましょう。画像のように「false」になっている場合はuserChrome.cssが効かない状態です。
この場合は「false」をダブルクリックして「true」にすればOKです。
続いて、「userChrome.css」をメモ帳などのテキストエディタで開く必要があります。Firefoxを起動したらウィンドウ右上のメニューボタンをクリックしてメニューを開き、「ヘルプ」をクリックしましょう。
「ヘルプ」のサブメニューが表示されるので、「トラブルシューティング情報」をクリックしましょう。
「トラブルシューティング情報」画面が表示されるので、「アプリケーション基本情報」項目一覧の「プロファイルフォルダー」にある「フォルダーを開く」ボタンをクリックしてプロファイルフォルダーを開きましょう。項目に表示されているパスを元に、エクスプローラーで開いてもOKです。
プロファイルフォルダーが表示されるので、「chrome」フォルダを開いてからuserChrome.cssをテキストエディタで開きましょう。cssの中身が表示されるので、「@-moz-document url(chrome://browser/content/browser」を検索します。検索で表示された場所のパスの末尾が「.xul」になっている場合、現在のFirefoxでは動作しません。この末尾を「.xhtml」に書き換えてからファイルを上書き保存しましょう。
あとはFirefoxを再起動すれば、userChrome.cssが正常に動作するようになりますよ。