FirefoxをChrome風にするMaterialFox UPDATED
![サムネイル](/_astro/thumbnail.DSI_IpsF_21Dt94.png)
MaterialFox UPDATEDは、ChromeなどのGoogle製品で採用されているMaterial Designからインスピレーションを得た、Firefox用のユーザーCSSです。
すでに更新が止まっているMaterialFoxをフォークしたもので、頻繁に更新されています。また、MaterialFox UPDATEDは「Chrome Refresh 2023」と呼ばれる最近のChromeのデザイン変更にも対応しています。
![MaterialFox UPDATEDのChrome Refresh 2023のスクリーンショット](/_astro/image-7.D6o1B6-c_Z2wQxO3.webp)
インストール方法
MaterialFox UPDATEDを使えるようにするには、Firefox側でいくつかの設定が必要です。
まずは、Firefoxのアドレスバーにabout:config
と入力して開きます。警告が表示されるので、内容を読んで理解したら[危険性を承知の上で使用する]を押して次に進みます。
![Firefoxのaboutのスクリーンショット。画面中央に警告が表示されている](/_astro/image.DzAvHbmu_ZMyndq.webp)
ページ内の検索ボックスに次のそれぞれの項目を入力し、それらをtrue
に設定します。
toolkit.legacyUserProfileCustomizations.stylesheets
svg.context-properties.content.enabled
layout.css.color-mix.enabled
![Firefoxのaboutの検索ボックスに「toolkit.legacyUserProfileCustomizations.stylesheets」と入力してtrueに設定しているようす](/_astro/image-1.B4-Lz9XY_1sxjuH.webp)
次に、MaterialFox UPDATEDの配布ページを開き、[Assets]のchrome.zip
をダウンロードします。
![MaterialFox UPDATEDの配布ページのスクリーンショット](/_astro/image-2.h5w3mIF9_2wwOpa.webp)
Firefoxに戻り、about:support
を開きます。[プロファイルフォルダー]の[フォルダーを開く]ボタンをクリックするとフォルダーが開くので、そのフォルダーにchrome
フォルダーを作成します。
![Firefoxのaboutページのスクリーンショット](/_astro/image-3.88tS-8Ro_U36zC.webp)
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のデザインです。
![MaterialFox UPDATEDを適用したFirefoxのスクリーンショット](/_astro/image-4.Byos0U00_2bgfix.webp)
![MaterialFox UPDATEDのChrome Refresh 2023のスクリーンショット](/_astro/image-7.D6o1B6-c_Z2wQxO3.webp)
Chrome Refresh 2023を有効化するには、about:config
の検索ボックスにuserChrome.ui-chrome-refresh
と入力します。[真偽値]が選択されていることを確認したらプラスボタンをクリックします。(画像は古いバージョンのためuserChrome.chrome-refresh-2023
となっています)
![aboutでuserChrome.ui-chrome-refreshを真偽値として作成しているようすのスクリーンショット](/_astro/image-5.C784xbRh_1Pyt1X.webp)
userChrome.ui-chrome-refresh
がtrue
に設定されていることを確認してください。Firefoxを再起動しなくても、すぐにChrome Refresh 2023のデザインに変更されます。
![Chrome Refresh 2023が適用されたFirefoxのスクリーンショット](/_astro/image-6.BkLcTPKy_pDPc1.webp)
まとめ
MaterialFox UPDATEDは、ChromeなどのGoogle製品で採用されているMaterial Designからインスピレーションを得た、Firefox用のユーザーCSSです。
頻繁に更新されているので、ぜひ使ってみてください。