はじめに

 Firefox89.0からレイアウトが一新され大幅に変わりました。世間的な評価は分かりませんが、個人的にはどうもタブが見辛くなってしまったのでその対処法を記します。 具体的な目標は、「アクティブなタブ、非アクティブなタブ、未ロードのタブの色をそれぞれ分けたい」です。

FirefoxにUIカスタム用のcssを読み込ませる

  • プロファイルフォルダーを開く
  •  Firefoxのメニューから「ヘルプ」-「他のトラブルシューティング情報」を開き、「プロファイルフォルダー」の「フォルダーを開く」からプロファイルフォルダーを開きます。
  • cssファイルを配置する
  •  プロファイルフォルダーを開いたら、そこに「chrome」フォルダーを作成します。その「chrome」フォルダー内に「userChrome.css」と名前を付けてテキストファイル(拡張子cssのcssファイル)を新規作成します。尚、通常はWindows10で右クリックから新規作成をすれば自動的にそうなるはずですが、文字エンコードはUTF-8のBOM無しで作成する必要があります。
  • userChrome.cssを編集して保存する
  •  メモ帳などでuserChrome.cssを開いて、下記の内容で編集・保存します。色はお好みで調整して下さい。
    /* アクティブなタブの文字属性 */
    .tabbrowser-tab[selected] .tab-text {
    font-weight: bold !important;
    }
    
    /* 非アクティブなタブの背景色 */
    .tab-background:not([selected=true]) {
    background-color: #DEDEDE !important;
    }
    
    /* 未ロードのタブの文字色 */
    .tabbrowser-tab[pending="true"] .tab-text {
    color: #FF0000 !important;
    }
    /* 未ロードのタブの背景色 */
    .tabbrowser-tab[pending="true"] .tab-background {
    background-color: #FBFAE9 !important;
    }
    
  • userChrome.cssの読み込みを有効にする
  •  Firefoxのアドレスバーに「about:config」と入力します。「設定名を検索」と書いてある検索バーに「toolkit.legacyUserProfileCustomizations.stylesheets」と入力します。デフォルトでは「false」となっているはずなのでダブルクリックして「true」に変更します。
  • Firefoxの再起動
  •  最後にFirefoxを再起動して結果が反映されていれば成功です。反映されていなければ、cssの内容が間違っていないか、文字エンコードが異なっていないか等をチェックしましょう。

おまけ

 新しいタブを開いたときのページの検索ボックスに文字を入力しようとすると、画面上部のアドレスバーに入力が移るようになってしまっていますので、これを元に戻します。

 Firefoxのアドレスバーに「about:config」と入力します。「設定名を検索」と書いてある検索バーに「browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar」と入力します。デフォルトでは「true」となっているはずなのでダブルクリックして「false」に変更します。about:configだけの作業ですので、これはFirefoxを再起動しなくても即時反映されます。