ブラウザ関連

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

商品リンクをクリックし通販サイトへ飛ぶ物は 「 広告 」のリンクです。

【 目次 】

はじめに

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_proton_false_20210603_0002.jpg

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

【 目次へ戻る 】

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

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

この設定をする前

FireFox_proton_false_20210603_0001.jpg

設定後。

FireFox_proton_false_20210603_0003.jpg

【 目次へ戻る 】

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

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

FireFox_v91_proton_20210812_0001.jpg

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

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

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

【 目次へ戻る 】

CSS を指定場所にコピー

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

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

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

about:support

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

FireFox_v91_proton_20210812_0002.jpg

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

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

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

v91.0 デフォルト

FireFox_v91_proton_20210812_0003.jpg

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

FireFox_v91_proton_20210812_0004.jpg

FireFox Portable v91.0 にて確認。

【 目次へ戻る 】

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

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

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

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

適用前

FireFox_userChrome_simple_20210813_0002.jpg

適用後

FireFox_userChrome_simple_20210813_0001.jpg

【 目次へ戻る 】

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

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

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

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

MD5:14292FA0819C98AF6279057D37CE05BF

書き換え前

FireFox_search_urlbar_color_20210813_002.jpg

書き換え後

FireFox_search_urlbar_color_20210813_001.jpg

任意の色に書き換えは、メモ帳などで
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

書き換え前

tab_color_20210815_0001.jpg

書き換え後

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

tab_color_20210815_0002.jpg

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

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

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

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

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

tab_color_20210815_0003.jpg

【 目次へ戻る 】

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

ブックマーク ( 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

書き換え前

FireFox_Bookmarks_css_20210911_0001.jpg

書き換え後

FireFox_Bookmarks_css_20210911_0002.jpg

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

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

【 目次へ戻る 】

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

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

FireFox_toolbar_tooltip_210912_003.jpg

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

消す方法は以下。

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

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

FireFox_toolbar_tooltip_210912_001.jpg

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

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

FireFox_toolbar_tooltip_210912_002.jpg

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

【 目次へ戻る 】

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

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

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

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

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

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

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

適用前

FireFox_userChrome_simple_20210813_0001.jpg

適用後

FireFox_compact_20210813_0001.jpg

なっていない場合は

ブラウザ右上の 三 → その他のツール → ツールバーをカスタマイズ
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 アドレスバーが拡大したのを元に戻す
【2021~2022年版】 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

関連記事

コメント

コメントがありません。

トラックバック