Firefox： UIデザイン を変える「userChrome.css」の使い方

Firefox： UIデザインを変える「userChrome.css」の使い方

Firefox（たまにニコ動）

2021.06.182021.08.23

この記事は約3分で読めます。

記事内に広告が含まれています

こんにちは、さちです。

今回は、Firefox の UIデザインを変えるために必要な「userChrome.css」を使えるようにする方法について書いていきます。

機能を有効にする

Firefox の UIデザインを変えるには「userChrome.css」を使いますが、初期設定ではその機能が無効になっています。有効にしましょう。

アドレスバーに about:config と入力して、Enter キーを押します。
「危険性を承知の上で使用する」ボタンをクリック。
toolkit.legacyUserProfileCustomizations.stylesheets で検索。表示された同名の項目をダブルクリックして、値を「true」にします。

「userChrome.css」を作って、Firefox のプロファイルフォルダー内に「Chrome」フォルダーに配置します。この操作は最初の1回だけ必要です。

「メモ帳」などのテキストアプリを起動して、ファイルを「新規」で作ります。今は何も書かなくて良いです。（「userChrome.css」に書きたいことがあれば、この段階で書いてもOK）
ファイルの種類を「すべてのファイル」にして、ファイル名に userChrome.css と入力。「保存」します。
「userChrome.css」ファイルができました。
Firefox の「メニュー」ボタンをクリック。
「ヘルプ」をクリック。
「他のトラブルシューティング情報」をクリック。
プロファイルフォルダーにある「フォルダーを開く」ボタンをクリック。
「chrome」フォルダーを開きます。（ない場合は、新しく作成する）
「chrome」フォルダーの中に、「userChrome.css」をドラッグ＆ドロップ（移動）します。

「userChrome.css」に CSS のような記述をすることで、Firefox の UIデザインを変えられます。

変更する内容を記述して、上書き保存します。

@charset "UTF-8";

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

  ここにCSSを記述，追記していく

}