Firefox の見た目を、マテリアルデザイン適用済みの Google Chrome っぽい感じにしてくれるテーマ「MaterialFox」

Pocket

今日は、Firefox の見た目を、マテリアルデザイン適用済みの Google Chrome っぽい感じにしてくれるテーマ「MaterialFox」を紹介します。

「MaterialFox」は、Google Chrome の新しいマテリアルデザイン にインスパイアされて作られた Firefox 用のテーマです。

角丸なタブと角丸なアドレスバー、そして少し主張が抑えられたシンプルなツールバーボタンが特徴的なマテリアルデザインテーマを、Firefox 上でも使えるようにしてくれます。

Google Chrome の新しいマテリアルデザイン風なテーマ「MaterialFox」

Google Chrome の新しいマテリアルデザイン風なテーマ「MaterialFox」

Firefox デフォルトのテーマ

Firefox デフォルトのテーマ

通常の Firefox テーマとは異なり、インストールを手動で行う必要がありますが、基本的にはそれほど面倒な手間要らずで実装することが可能となっています。

Google Chrome の新マテリアルデザインが気に入っている人は、一度試してみる価値があるかもしれません。

尚、8/31 時点では、タイトルバーとツールバーの部分のみがマテリアルデザイン化されるようで、他の部分は後々のアップデートに持ち越されるようです。

ダウンロード

MaterialFox のインストール方法

  1. MaterialFox のダウンロードページ を開きます。
  2. ページの右側にある「Clone or download」ボタンをクリック → 「Download ZIP」を選択し、「MaterialFox-master.zip」をダウンロードします。
    「Clone or download」ボタンをクリック → 「Download ZIP」を選択する

    「Clone or download」ボタンをクリック → 「Download ZIP」を選択する

  3. ダウンロードした「MaterialFox-master.zip」を 解凍 し、出てきた「chrome」フォルダを Firefox のプロファイルフォルダ内にコピーします。
    「chrome」フォルダを Firefox のプロファイルフォルダ内にコピーする

    「chrome」フォルダを Firefox のプロファイルフォルダ内にコピーする


    プロファイルフォルダ内に元々「chrome」フォルダがある場合は、既存の「chrome」フォルダを「chrome2」などにリネームしてからコピーを行うとよいでしょう。
    (バックアップ的な意味で)
    元々「chrome」フォルダがある場合は、既存の「chrome」フォルダを適当な名前にリネームしてバックアップしておくとよい

    元々「chrome」フォルダがある場合は、既存の「chrome」フォルダを適当な名前にリネームしてバックアップしておくとよい

    ちなみに、Firefox のプロファイルフォルダは、アドレスバー上に

    about:support

    と入力して「Enter」キーを押す → 「プロファイルフォルダー」欄にある「フォルダーを開く」ボタンをクリックすると開くことができます。

    「プロファイルフォルダー」欄にある「フォルダーを開く」ボタンをクリックする

    「プロファイルフォルダー」欄にある「フォルダーを開く」ボタンをクリックする

  4. 続いて、アドレスバー上に
    about:config

    と入力して「Enter」キーを押します。

    「about:config」と入力して「Enter」キーを押す

    「about:config」と入力して「Enter」キーを押す

  5. 「動作保証対象外になります!」という画面が表示されるので、「次回もこの警告を表示する」にチェックを入れて「危険性を承知の上で使用する」ボタンをクリックします。
    「次回もこの警告を表示する」にチェックを入れて「危険性を承知の上で使用する」ボタンをクリックする

    「次回もこの警告を表示する」にチェックを入れて「危険性を承知の上で使用する」ボタンをクリックする

  6. 高度な設定画面が表示されます。
    高度な設定画面

    高度な設定画面


    この画面の上部にある「検索」欄に、

    svg.context-properties.content.enabled

    と入力します。

  7. 「svg.context-properties.content.enabled」オプションのみが絞り込み表示されるので、これをダブルクリックして「true」にしておきます。
    「svg.context-properties.content.enabled」をダブルクリックし、「値」を「true」にする

    「svg.context-properties.content.enabled」をダブルクリックし、「値」を「true」にする

  8. 私は必要ないかなと思いましたが、必要に応じて「Simple New Tab button」(新規タブを開くためのボタンを、タブバーの右端やツールバーに追加するアドオン)をインストールしておきます。
    「Simple New Tab button」をインストールしたら、ツールバー上で右クリック → 「カスタマイズ」を選択し、ツールバー上に追加された +(新規タブを開く)ボタンを適当な場所に配置しておきます。
    (タブバー上にある既存の + ボタンは、非表示にしておくとよい)
    ツールバー上に + ボタンが追加されるので、適当な場所に配置しておく

    ツールバー上に + ボタンが追加されるので、適当な場所に配置しておく

  9. Firefox を再起動させます。
  10. すると、マテリアルデザイン風なテーマが有効になっています。
    Google Chrome の新しいマテリアルデザイン風なテーマ「MaterialFox」

    Google Chrome の新しいマテリアルデザイン風なテーマ「MaterialFox」

  11. テーマを元に戻す時は、アドレスバー上に
    about:config

    と入力して「Enter」キーを押します。

    「about:config」と入力して「Enter」キーを押す

    「about:config」と入力して「Enter」キーを押す

  12. 「動作保証対象外になります!」という画面が表示されるので、「次回もこの警告を表示する」にチェックを入れて「危険性を承知の上で使用する」ボタンをクリックします。
    「次回もこの警告を表示する」にチェックを入れて「危険性を承知の上で使用する」ボタンをクリックする

    「次回もこの警告を表示する」にチェックを入れて「危険性を承知の上で使用する」ボタンをクリックする

  13. 高度な設定画面が表示されます。
    高度な設定画面

    高度な設定画面


    この画面の上部にある「検索」欄に、

    svg.context-properties.content.enabled

    と入力します。

  14. 「svg.context-properties.content.enabled」オプションのみが絞り込み表示されるので、これをダブルクリックして「false」にしておきます。
    「svg.context-properties.content.enabled」をダブルクリックし、「値」を「false」にする

    「svg.context-properties.content.enabled」をダブルクリックし、「値」を「false」にする

  15. Firefox を終了させます。
  16. あとは、プロファイルフォルダ内にコピーした「chrome」フォルダを削除すれば OK です。
    元々「chrome」フォルダがあってそれをリネームしていた場合は、リネームしていたフォルダの名前を「chrome」に戻しておきます。
Pocket

スポンサード リンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です