FireFox v89.0／v91.0 にて変更されたデザイン／タブが丸くなるを元に戻す。

商品リンクをクリックし通販サイトへ飛ぶ物は 「 広告 」のリンクです。
記事の執筆に AI な類は使用しておりません。

【 目次 】

はじめに

v89.0 を 設定 で行う場合 ( CSS を使いたくない、v91.0 以降は動きません )
昔のデザインに戻す設定
昔のデザインに戻した画像
スクロールバーが変わったを元に戻す

v91.0 以上は CSS で ( v89.0 でも動作します )
CSS を使用する下準備
CSS を用意する
CSS を指定場所にコピー

v91.0 以上は CSS で ( 最低限の CSS で昔のデザインに戻す )
CSS を用意する ( 最低限バージョン )

おまけ
URLバー、検索バーの背景色、文字色を変更
タブの背景色と文字色、ホバー時に色を変更
ブックマークの縦幅をコンパクトに変更
タブにマウスカーソルを移動させると表示されるツールチップを消す
タブの縦幅をコンパクトに
おすすめリンク／関連記事

はじめに

Firefox v89.0 にてデザイン ( 外見 ) が刷新され
タブの形 ( 丸み ) などが変更されたので
元に戻す方法をブログネタ。

しかし、何だ。
私は変更されたもの、元に戻す記事を書きすぎて吹く。
変化を望まない層ですかな。

【 目次へ戻る 】

昔のデザインに戻す設定

それでは Firefox v89.0 にて刷新・変更された
デザイン・タブなどを元に戻す方法。

URL欄に以下を打ち込んで Enter キー 。
about:config

以下が出るので、理解して 「 承知の上で利用する 」 をクリック。

-----

注意して進んでください！
高度な設定を変更すると、Firefox のセキュリティ
パフォーマンスに深刻な問題を引き起こす恐れがあります。
これらの設定にアクセスするときは、警告を表示する

-----

URL欄の下に、入力欄、虫眼鏡がある部分に
以下を入力するか

proton

以下を１行ずつ打ち込んで ture → false ( 無効 ) に設定。

browser.proton.contextmenus.enabled
browser.proton.doorhangers.enabled
browser.proton.enabled
browser.proton.modals.enabled

← → の様に重なっている場所をクリックで切り替え。



保存ボタンなどの設定はなく切り替えた時点で有効です。

【 目次へ戻る 】

昔のデザインに戻した画像

Firefox v89.0 にて起動するとこの様になる。

この設定をする前



設定後。



【 目次へ戻る 】

スクロールバーが変わったを元に戻す

Firefox の表示部分の背景色の設定により
スクロールバーの色が変化してしまう場合があります。

今までは Win10 のテーマの色、
まぶしくない色だったのに白に戻るなど。
別記事にて書きましたので宜しければお飛びください。

Firefox v89.0 で変化したスクロールバーの色の変更方法 ( 背景色／バー自体 )

【 目次へ戻る 】

CSS を使用する下準備

Firefox v91.0 からは上の方法では proton が無効に出来なく
CSS という設定ファイルを特定のフォルダへ置けば
今までのデザインに戻ります。

下準備。

上の 昔のデザインに戻す設定 にて
proton を false に設定した箇所を ture に戻してください。

これから適用する CSS が proton が有効になっている状態を
想定して作られているので無効 ( false ) だと動かない。

ソース元：
[PSA] Setting browser.proton.enabled to false in v91 will FORCE proton-style and disable customization : firefox

戻したら、CSS のスタイルを適用してね
という機能をＯＮにします。

about:config より
toolkit.legacyUserProfileCustomizations.stylesheets

これを true に。

【 目次へ戻る 】

CSS を用意する

上の設定をしましたら使用する CSS をダウンロードします。

下のリンクのページで 右上の緑色 Code の部分をクリックして Download ZIP で
ファイルを落とします。

GitHub - black7375/Firefox-UI-Fix at photon-style



解凍して userChrome.css を取り出します。

chrome という名のフォルダを作り中に
userChrome.css を入れます。

chrome\userChrome.css
こうなります。

【 目次へ戻る 】

CSS を指定場所にコピー

最後、先ほど作りました以下を指定フォルダへコピーします。
chrome\userChrome.css

※既に userChrome.css が存在している、使用している場合は
　上書きすると消えてしまいますので注意。
　今までの 旧CSS をバックアップして必要なら 新CSS に内容を
　書き加えます、ただ内容が重複した場合どうなるかは不明です

Firefox を起動しまして以下を
アドレスバーにコピペして Enter キー 。

about:support

もしくは右上の 三 → ヘルプ → 他のトラブルシューティング情報



下にスクロールして プロファイルフォルダー を探して
右の フォルダーを開く をクリックするとフォルダが開くので
そこに chrome\userChrome.css としてコピーします。

上の画像の例ですと
～\Firefox\Data\profile\chrome\userChrome.css

コピーしましたら Firefox を全部閉じまして
起動すればこの様に。

v91.0 デフォルト



このページで紹介している CSS を入れた場合



Firefox Portable v91.0 にて確認。

【 目次へ戻る 】

CSS を用意する ( 最低限バージョン )

おまけとしまして、上で入手する CSS は長すぎる。
最低限でいいんだ、という方向け。

CSS を使用する下準備 を終了させてから
以下のファイルを指定箇所に放り込むだけ、同じ流れにて使用。

Firefox v91.0 変更されたスタイルを戻す最低限な userChrome.css ( 2021/08/13 )
MD5：E0FD40E35D7FFBFA4BAA9F01E31BD04D

適用前



適用後



【 目次へ戻る 】

URLバー、検索バーの背景色、文字色を変更

URLバー、検索バーの背景色、文字色を変更も可能で
少々いじったら両方できたのでメモしておきます。

CSS を使用する下準備 を終了させてから
以下のファイルを指定箇所に放り込むだけ、同じ流れにて使用。

Firefox URLバーと検索欄の文字色と背景色を任意の色に変更する
userChrome.css v1.01 ( 2021/08/13 )
MD5：14292FA0819C98AF6279057D37CE05BF

書き換え前



書き換え後



任意の色に書き換えは、メモ帳などで
userChrome.css を開き

background-color: #c0c0c0 !important;
color: #010000 !important;

#より後ろの６つの英数字が色指定です。
background-color が背景色、 color が文字色。

色の指定は Google でカラーピッカーと検索すれば
アプリを入れなくても色の取得が可能。
HEX という値です。

カラーピッカー [ Google 検索 ]

フリーソフトでも以下のようなものがあります。

おすすめのカラーピッカー [ ｋ本的に無料ソフト・フリーソフト ]

【 目次へ戻る 】

タブの背景色と文字色、ホバー時に色を変更

タブの背景色、文字色 ( アクティブ／非アクティブ ) の変更と
非アクティブ時のタブの上にマウスカーソルを乗せると
任意の色のライン ( 横線 ) を表示するものを。

作ったら完成したのでこれも置いておきます。
一応興味があって作ったであり
バージョンが変わって動かないは諦めて下さい。
Firefox Portable v91.0 にて動作確認。

CSS を使用する下準備 を終了させてから
以下のファイルを指定箇所に放り込むだけ、同じ流れにて使用。

FireFox_v91_Tab_Color_line_CSS ( 2021/08/15 )
MD5：A041BB35DD2D2B35D7A72D8D3B65B52C

書き換え前



書き換え後

アクティブタブが濃いグレー
非アクティブタブが薄いグレー
マウスを非アクティブタブに持って行くと赤線を付加。



色は私がテスト時のそのまま適当なので (力尽きた
書き換えて下さい、色の取得方法はこの記事の以下にて。

URLバー、検索バーの背景色、文字色を変更

アクティブのタブの色が変化しないんだけれど？の場合は

Firefox を起動して 右上の 三 → その他のツール →
ツールバーをカスタマイズ

テーマ → システムのテーマ にして下さい。



【 目次へ戻る 】

ブックマークの縦幅をコンパクトに変更

ブックマーク ( Bookmarks ) の縦幅が増えたので元に戻したい場合は
以下のページを参考にしまして、最小限の必要な箇所のみ ( 縦幅だけ ) を変更。
Firefox Portable v91.0 にて動作確認。

Thanks!!
userChrome.css multirow bookmark toolbar not displaying all bookmarks

CSS を使用する下準備 を終了させてから
以下のファイルを指定箇所に放り込むだけ、同じ流れにて使用。

FireFox_v91_Bookmarks_CSS v1.00 ( 2021/09/11 )
MD5：15C83D41A3267ADE3C638710945E3C4A

書き換え前



書き換え後



1px が通常の ( 今までの ) サイズで数値を増やせば縦幅が増えます。

設定の部分が２箇所ありますが２つペアとして設定しないと
選択背景の影がズレるので２つ同じ数値にしてください。

【 目次へ戻る 】

タブにマウスカーソルを移動させると表示されるツールチップを消す

タブの下に表示されるツールチップも邪魔なら消せます。
下の画像でなら



１．何かのページを開いてからタブの上にマウスカーソルを移動する
２．ツールチップが表示される

消す方法は以下。

１．以下を URLバーにコピペして Enter キー
about:config

２．危険を承知の上で使用するを選択 ( 詳細設定を自己責任でするよの意味 )



１．ここに以下をコピペして貼り付け
browser.chrome.toolbar_tips

２．true となっていたら左ダブルクリックか右のアイコンをクリックし
　　false に変更



設定は自動保存されるのでタブを閉じればＯＫ。

【 目次へ戻る 】

タブの縦幅をコンパクトに

タブの縦幅といいますか上下に空きがあるので
気になる場合はコンパクトに出来ます。

設定方法。
全ての Firefox を閉じます。

CSS を指定場所にコピー にて
profile のフォルダを開き prefs.js をメモ帳などで開き
( 念のためバックアップはしてください )

この行の下に ( ～以降は長いので省略してあります )
user_pref("browser.uiCustomization.state", ～

これを追加して保存してください。
user_pref("browser.uidensity", 1);

Firefox を起動してタブが以下のように細くなっていれば成功。

適用前



適用後



なっていない場合は

ブラウザ右上の 三 → その他のツール → ツールバーをカスタマイズ
UI密度 → コンパクト に設定。

戻したい場合は、下の 通常 などを選択する。

-----

とまあ、こんな感じで
Firefox v89.0 のデザイン、テーマ、スクロールバーが
変化した、おかしい、元に戻す方法でした。

タブなどは角張っていたり丸くなったりで
何気に気になる人がいるので
こういう開発者側で変更するは自由として
同じく元に戻せる設定があるのはいいですね。
選択の自由は素晴らしい。

それでは、皆様のブラウジングが快適になりますようにと
ブラウザの神様にお祈りしまして、これにて終了です。

以上。

おすすめリンク

・Amazon / 楽天市場 / Yahoo! でお買い物をする。

関連リンク

・Firefox v89.0 で変化したスクロールバーの色の変更方法 ( 背景色／バー自体 )
・秀丸エディタでブログを書き Firefox で内容を確認するマクロと設定 ( 同じ位置に表示 )
・Firefox Vivaldi Chrome 現在のウィンドウに保存したタブを復元
　日本語訳と使用方法
・【2021年版】 同じバージョンの Firefox Portable を別名で起動する方法 v84.0.2～
・Firefox Vivaldi Chrome ブックマークをHTMLで書き Dropbox / Googleドライブで共有
・Win10 FirefoxでVPN接続時のみ速度が劇遅／通信が詰まる の解決方法
・Firefox v83.0 アドレスバーが拡大したのを元に戻す
・MouseGestureL.ahk Shift＋ホイールでタブ自体を移動 Firefox Vivaldi
・Firefox Chrome Vivaldi ファイル保存ダイアログの保存ボタンをホイール上下で押す
・Firefox タブで開いた画像を簡単保存 日本語訳／使い方 tab image saver
・Firefox v77.0.1 アドレスバーが拡大したのを元に戻す
・Firefox v75.0 アドレスバーが拡大したのを元に戻す
・【2022～2023年版】 Firefox と Waterfox に入れた便利なアドオン
・Firefoxで新しいタブを任意のページで開く ( MouseGestureL.ahk 使用 )
・Firefox 新規タブや読み込み中の背景色をまぶしくない色に変更
・Vivaldi v3.3.2022.39 プライベートウィンドウのテーマを元に戻す ( 使っていたテーマに )
・広告ブロック uBlock Origin で特定の部分／邪魔な表示を消す
　Firefox Chrome Vivaldi Edge
・【設定】NordVPN Proxy SwitchyOmega
　アドオン使用で接続 Firefox Chrome Opera
・Firefox 画像を表示しないアドオンでブラウジングすると
　文字のみに集中し思考力ＵＰ
・Firefox で画像の表示をON／OFFできるBlock Image|Video
　ページの再読み込み不要
・Firefox テーマ ( 外見 ) を変更するアドオン
　「 Firefox Color 」( URL・検索蘭の色も変更可 )
・Firefox stylish (Stylus) アドオンで
　まぶしい背景色を暗く(灰色)にするCSS その2
・Stylish (stylus) アドオン使用
　cssで検索した文字をハイライト Google Yahoo baidu
・【設定】NordVPN Chrome Opera Firefox を使用しプロキシ経由で接続。
・Firefox Portable 動作軽快／日本語化／シークレット・キャッシュ設定など。
・Firefox v92.0 Firefox Color アドオン環境でURLバー、検索バーの枠が表示されない
・Google / Yahoo の検索結果に除外ワードを付加して素早く再検索 Firefox / Edge / Chrome / Vivaldi
・Firefox ツールバーのアイコンから検索サイトを簡単に切り替えるアドオン Classical Search Bar
・Firefox v96.0.1 URLバー ( アドレスバー ) ／ 検索バー の
　横幅を変更する userChrome.css
・Firefox v91～ HTTPサイトでダウンロード元ファイルが読み取れないの改善
・Firefox / Edge / Chrome ブックマークから指定のアプリを開く ( URIスキーム機能 )
・Firefox v98.0 ファイルをダウンロードすると
　アイコンが展開するを止める ( ダウンロードパネル )
・Firefox v98.0 タブを切り替え／F5キーを押した直後に
　OS を巻き込んでフリーズの改善
・Clipboard History でブラウザの検索文字に素早く除外文字を挿入する
　Firefox Chrome Edge Vivaldi
・Firefox v105 ツイッターなどのページでスクロールが引っかかるを改善