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

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

Firefox ロゴ

こんにちは、さち です。

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

スポンサーリンク

機能を有効にする

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

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

「userChrome.css」の操作

初回の設定

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

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

編集する

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

  1. 前項の「chrome」フォルダーにある「userChrome.css」を開きます。
    「userChrome.css」ファイル
  2. 変更する内容を記述して、上書き保存します。
    @charset "UTF-8";
    
    @-moz-document url(chrome://browser/content/browser.xhtml) {
    
      ここに記述,追記していく
    
    }
  3. Firefox を再起動すると、「userChrome.css」に書いた内容が反映されます。

関連記事

Firefox: 「89」以降の新デザイン(Proton)の余白を狭くする
こんにちは、さち です。 Firefox の UIデザイン が、バージョン89から「Proton」という新しいものに変更されました。 しかし、この「Proton」、以前のデザインと比べて色々な部分の「余白」が大きいと感じます...

コメント

タイトルとURLをコピーしました