【Firefox】 「UI」のデザインを自分で調査して変更する方法

この記事は約4分で読めます。
記事内に広告が含まれています

要素を選択する

こんにちは、さち です。

このブログでは、FirefoxUI デザイン変更する方法について、記事を何度か書いてきました。

ただ、UI デザインの好みなんて人それぞれ。自分でカスタマイズしたいという人もいると思います。

そこで今回は、自分で Firefox の UI を調査して、デザインを変更する方法について書いていきます。

スポンサーリンク

HTML・CSS の知識が必要

Firefox の UI を変更するには、「HTML」と「CSS」の基礎知識が必要です。

分からないことがあったら、まずは HTML・CSS について検索して調べてみましょう。

逆に言えば、HTML・CSS をある程度理解している人なら、Firefox の UI を変更するのはそんなに難しくありません。

UI のデザインを変更する方法

今回やってみること

Firefox の UI の変化

今回はサンプルとして、「ホーム」アイコンの背景色オレンジに変更してみます。

【前準備】 userChrome.css を用意する

Firefox の UI の変更には「userChrome.css」を使用します。

userChrome.css を使うには事前の準備が必要です。準備と使う方法については、下記リンク先の記事で解説しているので読んでみて下さい。

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

 

【本作業】 UI 調査・デザイン変更をする

操作手順の中に登場する「127.0.0.1」は、自分自身(操作中の PC)を指す特別な IPアドレス です。怪しいところにつながるわけではないので安心して下さい。
  1. Ctrl + Shift + Alt + I キーを押して、「ブラウザーツールボックス」を起動します(「≡(メニュー)」→「その他のツール」→「ブラウザーツールボックス」でもOK)。「リモートデバッグ接続要求」が表示されたら、「OK」をクリックします。
    ブラウザーツールボックスの画面
  2. 「ブラウザーツールボックス」の左端にある「ページから要素を選択」アイコンをクリックします。
    ブラウザーツールボックスの画面
  3. ホーム」アイコンをクリックします。
    インスペクターの画面
  4. 「ホーム」アイコンの要素を選択できました。「インスペクター」の内容がよく分からない場合は HTML について調べてみて下さい。
    ブラウザーツールボックスの画面
  5. 要素に CSS を追加してみましょう。今回は background: orange !important; と追記します。分からない場合は CSS について調べてみて下さい。
    ブラウザーツールボックスの画面
  6. 「ホーム」アイコンの背景色がオレンジになりました。CSS の記述はこれで問題なさそうです。(変化がない場合は、手順「5」の「インスペクター」から周辺にある別の要素を調べて、最前面の要素を探して試す)
    Firefox の UI
  7. userChrome.css を開き、先ほどと同じ CSS を記述をして、上書き保存をします。(「ホーム」アイコンを指定するセレクタ #home-button は、手順「4」「5」で見られる既存の記述を参考に決めた)
    #home-button {
      background: orange !important;
    }
  8. Firefox を再起動すると、実際の UI の方でも「ホーム」アイコンの背景色がオレンジになりました。
    Firefox の UI
ブラウザーツールボックスの右側にある「…(カスタマイズとヘルプ)」→「ポップアップを自動で隠さないを使うと、ホバーなどで開く UI を表示したままにできます

【別の方法】 browser.xhtml を使う

  1. アドレスバーに chrome://browser/content/browser.xhtml と入力して、Enter キーを押します。
    アドレスバーの画面
  2. すると、普段コンテンツが表示される領域に、Firefox の UI が出現します。(UI が2段重なった状態になりますが正常です)
    browser.xhtml の画面
  3. 「ウェブ開発ツール(F12 キー)」を表示。要素と CSS を調べて、userChrome.css に記述・保存。Firefox を再起動すると UI に CSS が反映されます。
    Firefox の UI

ただし、browser.xhtml では調査できる UI に制限があるので、基本的に「ブラウザーツールボックス」を使った方が良いです。

コメント

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