Firefox89.0タブ位置の変更

以前のFirefoxタブ位置の変更の記事のコメント欄に89.0に更新したら挙動がおかしくなったとの連絡をいただきました。
私はブラウザは自動での更新をしていないにしていないため、89.0にアップデートしてみるとタブが一番下へ…。
そして複数のタブを開いても表示されず(タブが見えていないので画面の切り替えができない)、でも実は見れない(切り替えができない)だけで実は表示されていた…みたいな変な状況に……。
2021060201.jpg

そこで「userChrome.css」を削除すると今度はタブは表示されるようになりましたが、またまたタブが上部に行ってしまってました……(T_T)
2021060205.jpg

タブを下にやる方法を探っていたところ、最初にコメントくださったデコポン様より何度かコメントが入り、解決策を探してくださいましたので、情報を共有したく今回も記事にいたします。

某匿名掲示板の受け売りなのですが、
https://www.reddit.com/r/FirefoxCSS/comments/nq2d0q/tabs_on_bottom_for_firefox_89/
上記設定をそのまま使いました。
今のところ、良い感じです。

とのことで、リンク先のCSSを「userChrome.css」に上書きすると希望通り、タブが下へ移動してくれて、従来どおりの表示に戻ってくれました。
デコポン様、ありがとうございましたm(__)m

「userChrome.css」は、
①ブラウザの右上[アプリケーションメニューを開きます]をクリック
②「ヘルプ」をクリック
2021060303.jpg

③「他のトラブルシューティング情報」をクリック
2021060304.jpg

④「プロファイルフォルダー」の「フォルダーを開く」をクリック
2021060305.jpg

⑤「chrome」フォルダの中にあります。
(「chrome」フォルダがない場合はこの名前のフォルダを作ってください。)
2021060306.jpg

⑥「userChrome.css」をメモ帳などで開き、上記サイトのコードに書き換えてください。
(「userChrome.css」ファイルがない場合は上記サイトのコードをメモ帳などに貼り付けこの名前のファイルを作ってください。)
2021060307.jpg

以上で、Firefoxを再起動させるとタブが下に戻っています。


※以下は個人的な好みなので参考程度にどうぞ。

私はメニューバーが表示されるようにしているのですが、メニューバーの文字の配置がちょっと上に寄っているような気がしてしまい、もう少し上部のスペースがほしいと感じました。【赤枠部分】
また、タブも少し細く感じましたので、少し高さを増やしてみました。【青枠部分】
左側の画像が元々の数値のまま、右側の画像が自分の好みの数値にしたものです。

●ブラウザを最大にしたときの表示です。
元々の数値のまま(左側)と自分の好みに変えたもの(右側)で少し高さが変わったのがわかっていただけますでしょうか。
2021060308.jpg

ブラウザを最大にした時のメニューバーの表示【赤枠部分】を変えるには「userChrome.css」の20行目
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
の「8px」の数字を大きくします。
ちなみに「13px」に変更したものが右側の画像です。

2021060315.jpg

●ブラウザを小さくした時の表示です。
2021060309.jpg

ブラウザを小さくした時のメニューバーの表示【赤枠部分】を変えるには[userChrome.css」の18行目
:root{ --uc-titlebar-padding: 0px; }
の「0px」の数字を大きくします。
ちなみに「8px」に変更したものが右側の画像です。

●タブの高さを変更する場合。【青枠部分】
93行目(下から見ていった方が早いです)
/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important;
の「25px」の数字を大きくします。

2021060316.jpg

また、今回からタブが浮いている(?)ような状態になっているようですが、これは「about:config」の設定で変更できます。
2021060314.jpg

ブラウザのアドレスバーに「about:config」と入力し、エンターで確定すると「注意して進んでください!」の画面が出ます。
「危険性を承知の上で使用する」をクリック。
検索欄に「proton」と入力するといくつか候補が表示されるので、その中から「browser.proton.enabled」を見つけます。
初期値は「true」になっています。
「true」の場合は上画像左側のように少し隙間ができて浮いたような感じ。
これをダブルクリックまたは⇔アイコンをクリックして「false」に変更すると、従来通りのタブ表示(上画像右側)のようになります。
2021060204.jpg

【2021年6月8日追記】

「browser.proton.enabled」自体が次かその次のバージョンで使えなくなるという情報がありました。
上記の「about:config」を使わずにタブをくっつけるやり方はこちらの記事です。

Firefox89.0 about:configの設定を使わずにタブをくっつける方法、他userChrome.css覚書


関連記事

23 Comments

デコポン  

れん様

お世話になります。

「メニューバーの文字の配置がちょっと上に寄っているような気がしてしまい、もう少し上部のスペースがほしいと感じました。」

私もこの部分が気にはなっていたのですが、修正方法がわからず・・・(;^_^A。
修正後、バランスの良い配置になりました。有難うございます。

2021/06/03 (Thu) 23:53 | EDIT | REPLY |   

れん  

デコポン様

デコポン様、こちらこそお世話になりますm(__)m

とりあえず、自分の気になった部分だけを修正する部分を探し出しましたが、いろんな数値を触るともっと自分好みのものができるかもしれませんね!

デコポン様のお陰でとても助かりました!
毎回ありがとうございます!

これでFirefoxがアップデートしても、しばらく大丈夫ですかね…(^_^;)
もっと簡単に(about:configとかで)上か下か選べるようになるといいのに…と毎回思います。
「タブバーは下派」の人って多いと思うんですけどね~(*^_^*)

2021/06/04 (Fri) 13:30 | EDIT | REPLY |   

スペースGO  

ありがとうございます

今回の更新で全く同様の不具合がでて途方にくれていたところでした。
PCに全くくわしくない私でも丁寧な解説で無事、復旧しました。
本当にありがとうございます。

⑥のところの「下記サイトのコードに書き換えてください」のところは
上記サイトのコードの誤記ではないでしょうか?そこだけすみません。

2021/06/04 (Fri) 17:15 | EDIT | REPLY |   

れん  

スペースGO様

スペースGO様、コメントを残してくださってありがとうございますm(__)m

復旧できたとのこと、この記事がお役に立てて嬉しく思います!
沢山の人が「タブは下がいい」って思っているんですから、もっと簡単に選べるようになればいいのにな…と毎回思います。

それから、ご指摘ありがとうございます!!
そうですね( *´艸`)「上記サイト」ですよね!
修正しておきました。
(助かりました!)

間違いまでお教えいただき、ありがとうございましたm(__)m

2021/06/04 (Fri) 18:02 | EDIT | REPLY |   

リスティス  

今回も感謝です!

Ver65~ タブが下に戻されるたびに、こちらのサイトへ駆け込み寺のように訪れ対処させていただいております。
今回も近い形に戻せて大変感謝しております。いつもありがとうございます。

自分の場合は、リンク先のCSSを丸ごと入れ替えた後に
 ・メニューバーの高さが厚くなったのが気に食わなかったので、
   #navigator-toolbox{ padding-top: calc(29px ←20pxにしてスリムに
 ・タブの厚み自体も
   /* TABS: height */*|*:root //省略// --tab-min-height: 25px ←22pxに

後は追記されているタブの浮き上がりをfalseにして、何とか前verに近い高さまで縮められました。
欲を言えばアドレスバーの高さを縮めたいのですが、CSSかconfigかよくわからなかったのでひとまず放置です。またご教示いただければ嬉しいです。m(_ _)m
今回も大変助かりました。ありがとうございます!

2021/06/05 (Sat) 20:50 | REPLY |   

a-chan  

今回も感謝!

私も同様に今朝の改悪に直面して途方に暮れていました。
またまたこちらのブログと情報提供者の方々に感謝です。

メニューバーの厚みもリスティス様の真似をして20pxにしたのですが、-□×のボタンが不自然になってしまいますね。
厚みはそのままで我慢するので文字の位置が中央になれば良いのですが…。

今回も本当に助かりました、ありがとうございます。

しかし、この改悪いつまで続くのでしょうか?。

2021/06/05 (Sat) 23:00 | REPLY |   

リスティス  

誤記すみません(。>﹏<。)
×:タブが下に戻される 〇:タブが上に戻される

2021/06/05 (Sat) 23:06 | REPLY |   

リスティス  

a-chan 様
自分はタイトルバーを上に別置きしてる派だったので気づかずすみませんでした。
素人書き換えの不精をしてしまいました💦

6行下のコード
  height: 29px; ←20pxに
そのまた5行下のコード
  //省略//… container{ height: 29px; ←20pxに

変更すれば、自分の別PC新規環境ではうまく-□×もペタンコになってくれたのですがどうでしょうか…?

――――――――――――
管理人 れん 様
上記を試すため別PCへ入れてみて気づいたのですが、今回もまずはblog-entry-1523.htmlに書いていただいていた通り、
「about:config」の「toolkit.legacyUserProfileCustomizations.stylesheets」を「true」にする
をしていないと、CSSを入れても全く反応しませんでした。

あと、↑記事ご記載 『⑤「chome」フォルダの中にあります。』 ×:chome 〇:chrome かと… 画像は正しいです
細かな指摘をすみません>﹏<。

2021/06/05 (Sat) 23:47 | REPLY |   

れん  

リスティス様

リスティス様、こんにちは。
タブの件ではこちらにご訪問くださっていると知り、とても嬉しく思います!

リスティス様の3件分の返信をこちらにまとめてさせていただきますね。

リスティス様は細めのスタイルがお好きなのですね(*^_^*)
いつもはCSSをそのままつっこむだけで、あんまりスタイルは気にしなかったのですが、こんかいは触り始めるとちょっと楽しくなりました( *´艸`)

アドレスバーの高さはどこの数値を触れば変更できるのか、いろいろと試してみましたが、今のところよくわかりません。
アドレスバーをクリックするとちょっと膨張?してくるのも止めたいのですが、こちらも今のところわからず……。
引き続き探ってみたいと思っていますので、もしもわかりましたら、こちらのコメント欄に返信するか、新しく記事にしますね。
リスティス様の方でもわかりましたら、ぜひご教授いただければ…と思っていますので、よろしくお願いいたします。

そうなんですよ、新規(?)の場合は「toolkit.legacyUserProfileCustomizations.stylesheets」を「true」にしないと動かないみたいなんですよね…。
PCを初期化してFirefoxのタブを下に…と思ったらまずそこでつまずいてしまってました。

それから!
誤記のご指摘ありがとうございました。
「チョメ」ってなんやねん!
って感じですね……e-330
いつも「Chrome」がうまく打てなくて……。
hとoの間にrが入ったり…。

コメントありがとうございました!
これからもよろしくお願いいたします!

2021/06/06 (Sun) 11:36 | EDIT | REPLY |   

れん  

a-chan様

a-chan様、いらっしゃいませm(__)m
このコメントとは別に「拍手」でのコメントもいただきありがとうございます!

「-□×のボタン」の位置、私のメニューバーの高さでは許容範囲でしたが、気分的にはもう少し上がいいかな…と思って私も修正しています。
リスティス様からa-chan様へ返信でご回答いただいていますが、
#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }
この部分ですね。

下記画像は私の好み?に設定したものですので、ここの数値を触るとこんな感じになるという程度のご参考までに。
https://blog-imgs-144.fc2.com/s/a/k/sakuraxren/2021060508.jpg

リスティス様のコメント返信
6行下のコード
  height: 29px; ←20pxに

の部分は私は変更していないので、
この画像は29pxのままと22pxに変更したものです。

いろんな数値を試してみて、お好みのFirefoxが出来上がるといいですね!

何年か前にもコメントをいただき、再度のご訪問&コメント、ほんとに嬉しく思いました!
ありがとうございましたm(__)m

2021/06/06 (Sun) 12:00 | EDIT | REPLY |   

a-chan  

感謝

リスティス様、れん様、追加情報ありがとうございます。
メニューの文字位置と-□×が綺麗に揃いました。
これを基本にもう少し自分好みになる様に微調整してみようと思います。

ブラウザーの操作性と見た目が悪いのは精神衛生上良くないので、それを改善する情報を提供していただいける皆さんには、本当に感謝です。
何度もお世話になっていながらコメントを残すことしかできませんが、覚えていただけていたのもうれしく思います。

2021/06/06 (Sun) 12:14 | REPLY |   

れん  

a-chan様

a-chan様、再度のコメントありがとうざいますm(__)m

-□×の位置が思ったようになってよかったですね!

今までブラウザの見た目を触ろうって思うことはなかったのですが、今回の件でちょっと触るのが楽しくなりました。
なので、私もちょっと自分好みに触ってみようか…と思ったりしています(*^_^*)

a-chan様もぜひ納得いくお気に入りのブラウザの見た目に挑戦してみてくださいね!

これからもよろしくお願いいたしますm(__)m


2021/06/06 (Sun) 20:53 | EDIT | REPLY |   

れん  

リスティス様へ アドレスバーの高さ

リスティス様、遅くなりました。
アドレスバーの高さの変更方法がわかりましたのでお知らせいたします。
(もう見に来られないかもしれませんが…)

#urlbar {
min-height: 28px !important;
}


をuserChrome.cssに書き足してください。
数字はお好みで。
隣に検索バーも置かれている場合は

#searchbar {
min-height: 28px !important;
}


も。

後ほどいろいろとわかった設定の備忘録記事を書くつもりでおります。



2021/06/08 (Tue) 11:03 | EDIT | REPLY |   

tosh  

タブがスクリーンの最下部になってしまいました

れん様

お世話になります。
バージョン88.01→89にアップデートしてからタブ位置がスクリーンの最下部に移ってしまいました。
もともとタブはアドレスバーの下に配置していました。
バージョン89でも同じようにタブをアドレスバーの下に置きたいのですが、userChrome.cssをどのように設定すればが分かりません。
もしご存知でしたら、対策をご教示頂けますでしょうか。

宜しくお願いします。

2021/06/13 (Sun) 15:59 | REPLY |   

れん  

tosh様

tosh様、いらっしゃいませ。

まず確認させてください。

https://blog-imgs-144.fc2.com/s/a/k/sakuraxren/2021061301.jpg
(↑クリックして見てくださいね。)
私の場合ですが、画像のように
1番上メニューバー
2番 アドレスバー
3番 ブックマークツールバー
4番 タブ
の表示ですが(3番のブックマークツールバーはぼかしをかけていてすみません)、ご質問では
1番 メニューバー
2番 アドレスバー
3番 タブ
4番 ブックマークツールバー
の順番にしたいという意味でしょうか?

それともこの記事に書いてあることで良いので、userChrome.cssの設置方法を詳しく知りたいということでしょうか?

どちらで答えればよかったのかわかりませんでしたので、先に確認させていただければ…と思います。

よろしくお願いいたします。



2021/06/13 (Sun) 16:24 | EDIT | REPLY |   

tosh  

れん様

れん様

早速のご返信ありがとうございます。

すみません、このサイトをよく読んでいませんでした。
こちらの記事通りuserChrome.cssをデコポンさんの設定にしてみます。

私もれん様と同様、バージョン89.0にすることでタブがスクリーンの真下に移動されてしまいました。
(ただし私の場合は、タブがスクリーン最下部左に配置されておりました。)

希望としては、
1番 メニューバー
2番 アドレスバー
3番 タブ
4番 ブックマークツールバー
の順番にしたいです。

宜しくお願いします。

2021/06/13 (Sun) 16:50 | REPLY |   

れん  

tosh様

tosh様、ご連絡ありがとうございます。


記事のやり方では
3 ブックマークツールバー
4 タブ
になるのですが、ブックマークツールバーが下に来た方が良いのですよね?
以前はそうなっていたのですか?
以前そうなっていたのでしたらできると思うのですが、試行錯誤してみないとよくわかりません。

しばらくお時間をいただいてもよろしいでしょうか?
(わかるかどうかなんとも言えませんが……。)

わかりましたらまたこちらでご報告させていただきますね。

2021/06/13 (Sun) 17:08 | EDIT | REPLY |   

tosh  

れん様

れん様

ご対応ありがとうございます。

記事の内容でタブ位置がアドレスバーの下に戻るか試みました。
残念ながら、タブはスクリーン最下部左のままで変化はおきませんでした。

たぶん私の設定の何かしらが悪さをしているはずなので、firefoxをクリーンインストール→再インストールして対応しました。

お騒がせして申し訳ございませんでした。
宜しくお願いします。

2021/06/13 (Sun) 21:50 | REPLY |   

れん  

tosh様

tosh様、度々のご連絡ありがとうございます。

firefoxをインストールし直してタブ位置は直ったのなら良いのですが…。
ちょっと手間がかかってしまったようですね…。

さて、tosh様のご希望の並び順(タブをブックマークツールバーとアドレスバーの間に持ってくる)にできないものかといろいろとCSSを探ってみたり、検索をかけて探してみたりしましたが、私にはわかりませんでした。
お力になれず申し訳ありません。
今後も調べてみるつもりですので、またわかりましたらこちらでご報告させていただきます。
(多分わからない気が……。あてにしないでいてください(^_^;))

よろしくお願いいたします。

2021/06/14 (Mon) 15:10 | EDIT | REPLY |   

通りすがり  

初めまして。
タブを下にしたくたどり着きました。

無事タブを下にできたのですが、タブがあった場所の幅が気になりまして。
userChrome.cssの margin-top: 34px !important;の数値を小さくすると最大化している場合は幅がなくなったのですが、ブラウザを小さくした時の幅をなくす数値が発見できません。

もしご存知でしたら、ご教示くださると大変助かります。
不躾なお願いとなり恐縮です、よろしくお願いいたします。

2021/07/02 (Fri) 05:57 | REPLY |   

れん  

通りすがり様

通りすがり様、こんにちは。

まず、確認させてください。
通りすがり様が使われてたuseChrome.cssはこちらのブログで紹介させていただいたものでしょうか?

と言いますのは、こちらで紹介させていただいたcssの中身で通りすがり様が書かれている「margin-top:」を検索をかけても見つからないのです。
cssもいろいろとありますし、他で見つけられたcssを使用されているのであれば、現時点ではどのようなcssを使われているのかわからず、どうすればよいのか見当がつきません。

もしお手間でなければ通りすがり様の使われているuserChrome.cssを拝見させていただけませんか?

当ブログ右側の「メールはこちら」からcssを添付としてお送りいただければと思います。
その際差し支えなければメールアドレスを記入していただけると、こちらから確認したいことなどの連絡が取りやすくなり大変助かります。

ただ、私ではわかりかねる場合も多々あり(どちらかというとわからない方が多いです)、cssをお送りいただいても解決するかどうかはなんとも言えませんが、それでもよろしければ…。

よろしくお願いいたします。

2021/07/02 (Fri) 11:38 | EDIT | REPLY |   

通りすがり  

れん様、ご返信ありがとうございます。

眠気のなか作業をしていたせいか、リンク先のCSSを上書きするという一文を見逃しておりまして。
おそらく、他のサイトで見た方法で元のCSSに書き足す形でタブを下にできていたみたいでした。
大変失礼な話で申し訳ありません。

あらためてリンク先のCSSを上書きし、れん様が他の方に返信している方法でuserChrome.cssに書き足しまして、無事タブがあった場所アドレスバーの高さの変更が出来ました。

私の見逃しでお手間をとらせてしまい申し訳ございませんでした。
丁寧なご対応ありがとうございました。
またなにかあった際にはお知恵を拝借できればありがたく存じます。
れん様のサイトにたどり着けて助かりました。

2021/07/02 (Fri) 12:27 | REPLY |   

れん  

通りすがり様

通りすがり様、返信をいただきありがとうございました。
解決されたみたいで良かったです♪

他にもcssを触って変更できるものを
https://sakuraxren.blog.fc2.com/blog-entry-1528.html
の記事で紹介しております。
自分の好み分だけでしか紹介しておりませんが……。
もしも参考になるようでしたら、いろいろとお試しくださいね。

2021/07/02 (Fri) 13:23 | EDIT | REPLY |   

Post a comment