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
以下を1行ずつ打ち込んで 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 のスタイルを適用してね
という機能をONにします。
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;
#より後ろの6つの英数字が色指定です。
background-color が背景色、 color が文字色。
色の指定は Google でカラーピッカーと検索すれば
アプリを入れなくても色の取得が可能。
HEX という値です。
カラーピッカー [ Google 検索 ]
フリーソフトでも以下のようなものがあります。
おすすめのカラーピッカー [ k本的に無料ソフト・フリーソフト ]
【 目次へ戻る 】
タブの背景色と文字色、ホバー時に色を変更
タブの背景色、文字色 ( アクティブ/非アクティブ ) の変更と非アクティブ時のタブの上にマウスカーソルを乗せると
任意の色のライン ( 横線 ) を表示するものを。
作ったら完成したのでこれも置いておきます。
一応興味があって作ったであり
バージョンが変わって動かないは諦めて下さい。
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 が通常の ( 今までの ) サイズで数値を増やせば縦幅が増えます。
設定の部分が2箇所ありますが2つペアとして設定しないと
選択背景の影がズレるので2つ同じ数値にしてください。
【 目次へ戻る 】
タブにマウスカーソルを移動させると表示されるツールチップを消す
タブの下に表示されるツールチップも邪魔なら消せます。下の画像でなら

1.何かのページを開いてからタブの上にマウスカーソルを移動する
2.ツールチップが表示される
消す方法は以下。
1.以下を URLバーにコピペして Enter キー
about:config
2.危険を承知の上で使用するを選択 ( 詳細設定を自己責任でするよの意味 )

1.ここに以下をコピペして貼り付け
browser.chrome.toolbar_tips
2.true となっていたら左ダブルクリックか右のアイコンをクリックし
false に変更

設定は自動保存されるのでタブを閉じればOK。
【 目次へ戻る 】
タブの縦幅をコンパクトに
タブの縦幅といいますか上下に空きがあるので気になる場合はコンパクトに出来ます。
設定方法。
全ての Firefox を閉じます。
CSS を指定場所にコピー にて
profile のフォルダを開き prefs.js をメモ帳などで開き
( 念のためバックアップはしてください )
この行の下に ( ~以降は長いので省略してあります )
user_pref("browser.uiCustomization.state", ~
これを追加して保存してください。
user_pref("browser.uidensity", 1);
Firefox を起動してタブが以下のように細くなっていれば成功。
適用前

適用後

なっていない場合は
ブラウザ右上の 三 → その他のツール → ツールバーをカスタマイズ
UI密度 → コンパクト に設定。
戻したい場合は、下の 通常 などを選択する。
-----
とまあ、こんな感じで
Firefox v89.0 のデザイン、テーマ、スクロールバーが
変化した、おかしい、元に戻す方法でした。
タブなどは角張っていたり丸くなったりで
何気に気になる人がいるので
こういう開発者側で変更するは自由として
同じく元に戻せる設定があるのはいいですね。
選択の自由は素晴らしい。
それでは、皆様のブラウジングが快適になりますようにと
ブラウザの神様にお祈りしまして、これにて終了です。
以上。
おすすめリンク
・Amazon関連リンク
・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 画像を表示しないアドオンでブラウジングすると
文字のみに集中し思考力UP
・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 ツイッターなどのページでスクロールが引っかかるを改善
- 関連記事
-
- 2023/09 Vivaldi v6.2 で設定した事のまとめ/余分な機能の停止など (2023/09/08)
- タイッツーの背景色を灰色 ( グレー ) にし文字を大きくする CSS / Stylusアドオン使用 (2023/08/05)
- パソコン/タイッツーで開いた画像のタブを MouseGestureL.ahk で閉じる (マウスジェスチャー) (2023/08/03)
- Firefox 終了時にブックマークをファイル出力/Twitter フォロワーを一気にタブで開く (2023/07/06)
- 2023/03 パソコン版ツイッターで検索やトレンドが 「申し訳ありません。問題が発生しました。」 (2023/03/23)
- Firefox 装飾キーとマウスホイール回転の動作を変更 ( Alt / Ctrl / Shift / Win キー ) (2023/01/19)
- Firefox SwitchyOmega でVPN接続が詰まる/パケロス的に読み込まないの改善 (2022/10/03)
- Firefox v105 ツイッターなどのページでスクロールが引っかかるを改善 (2022/09/26)
- パソコン版ツイッター投稿画面の 全員 ( オーディエンス ) /認証済み組織の表示を消す Firefox Chrome Vivaldi Edge (2022/06/17)
- Clipboard History でブラウザの検索文字に素早く除外文字を挿入する Firefox Chrome Edge Vivaldi (2022/06/08)