FirefoxをChrome風にするMaterialFox UPDATED

投稿日： 2023年12月18日 23:25

MaterialFox UPDATEDは、ChromeなどのGoogle製品で採用されているMaterial Designからインスピレーションを得た、Firefox用のユーザーCSSです。

すでに更新が止まっているMaterialFoxをフォークしたもので、頻繁に更新されています。また、MaterialFox UPDATEDは「Chrome Refresh 2023」と呼ばれる最近のChromeのデザイン変更にも対応しています。

MaterialFox UPDATEDのChrome Refresh 2023のスクリーンショット — MaterialFox UPDATEDを適用したFirefoxのスクリーンショット

インストール方法

MaterialFox UPDATEDを使えるようにするには、Firefox側でいくつかの設定が必要です。

まずは、Firefoxのアドレスバーにabout:configと入力して開きます。警告が表示されるので、内容を読んで理解したら［危険性を承知の上で使用する］を押して次に進みます。

ページ内の検索ボックスに次のそれぞれの項目を入力し、それらをtrueに設定します。

toolkit.legacyUserProfileCustomizations.stylesheets
svg.context-properties.content.enabled
layout.css.color-mix.enabled

Firefoxのaboutの検索ボックスに「toolkit.legacyUserProfileCustomizations.stylesheets」と入力してtrueに設定しているようす

次に、MaterialFox UPDATEDの配布ページを開き、［Assets］のchrome.zipをダウンロードします。

Firefoxに戻り、about:supportを開きます。［プロファイルフォルダー］の［フォルダーを開く］ボタンをクリックするとフォルダーが開くので、そのフォルダーにchromeフォルダーを作成します。

chrome.zipを解凍し、その中のファイルやフォルダーをchromeフォルダーにコピーします。

バージョンによって変わる可能性がありますが、コピー後は概ね次のような構造になっているはずです。

📁[ユーザープロファイルフォルダー]
└── 📁chrome
     ├── 📁fonts
     │    └── [フォントファイルたち]
     ├── 📁icons
     │    └── [アイコンファイルたち]
     └── custom_example.css
     └── userChrome.css
     └── user-chrome.css
     └── userContent.css
     └── user-content.css

最後に、Firefoxを再起動します。これでMaterialFox UPDATEDが適用されます。

その他の設定

MaterialFox UPDATEDには、いくつかの設定が用意されています。これらは、about:configで該当する項目をtrueまたはfalseにすることで設定できます。

ここでは一部の設定のみ紹介しますが、すべての設定は公式リポジトリーで確認できます。

Chrome Refresh 2023の有効化

Google Chromeは2023年にデザインを大幅に変更しました。このデザイン変更は「Chrome Refresh 2023」と呼ばれています。MaterialFox UPDATEDは、デフォルトでは変更前のデザインを採用しています。好みに応じて、Chrome Refresh 2023のデザインに変更できます。

次の画像はそれぞれ、Chrome Refresh 2023の適用前と適用後のMaterialFox UPDATEDのデザインです。