【最新版】FirefoxQuantum(71～)でタブ位置をﾌﾞｯｸﾏｰｸ下に移動<超簡単>

トップページ＞ Firefox Quantumの設定＞【最新版】FirefoxQuantum(71～)でタブ位置をﾌﾞｯｸﾏｰｸ下に移動<超簡単>

【コピペで超簡単！】Firefox Quantumでタブ位置をブックマーク下に移動！

更新：2019年12月4日

Firefox71に自動アップデートされたところ、以下の様にメニューバーまでもがブックマーク下に移動してしまいました。

そのため、ゴッソリcss内容をシンプルに書き換えたところ、無事に元通り表示されたため共有します。

その他、「タブが上に戻ってしまった」という方も、一度コチラをお試しください。

※css内容を更新しています

FirefoxがQuantumへアップデートされ、その後も繰り返し繰り返し…

タブの位置がまたもや上に！！

Firefox Quantumでタブ位置を移動

↑ またもやタブが「メニューバーの下」に移動してしまっています。

これ、本当にうっとうしい。

以前までは「Tabs on Bottom」などのアドオンをONにしておけば、とりあえず下げることが出来たのですが、そのアドオンが使えなくなってしまった・・・

当ページにたどり着いた方も、多くがそのような方ではないでしょうか？

でも大丈夫！！

当ページを見れば、すぐに

Firefox Quantumでタブ位置を移動した後

上記のような「ブックマークツールバーの下」に戻せます！

また、デフォルトで灰色になってしまっている「ブックマークアイコン」の色を復活させる事もできますよ！！

ちなみに以前までは「about:config」の設定からタブの位置を操作できたのですが、今回からなぜか効かず。

と言うことで、以下の方法を試せば速攻解決しますのでお試しアレ！！

まずは「userChrome.css」を用意する！！

ブラウザ右上にある、、

をクリックし、

「ヘルプ」　⇒　「トラブルシューティング情報」

へ進んでください。

「アプリケーション基本情報」の中に「プロファイルフォルダー」があるので、こちらを開きましょう。

ここに「Chrome」という名前のフォルダが無ければ、作成して下さい。

そしてそのフォルダの中に「userChrome.css」というファイルを作成します。

ん？作り方がわからない？

簡単です。

「userChrome.css」の作り方

作成した「Chrome」フォルダ内で右クリック　

↓

新規作成

↓

テキストドキュメント

↓

ドキュメントの名前を「userChrome.css」とします。

この時に、以下のようなダイアログが出たら、「はい」でOK！！

なお、上記ダイアログが出ない場合は名前が変わっただけで、拡張子を変更できてない可能性があります。

ファイルを右クリックし「プロパティ」を開き、プログラムの種類が「カスケードスタイルシートドキュメント (.css)」になっていることを確認してください。

もし「.txt」のままであれば、拡張子を表示させた後に、拡張子ごと削除して語尾に「.css」を付ける必要があります。

「フォルダーオプション」内の「表示」より、まずは「拡張子を表示する設定」へと変更しましょう。

※以下はwin10ですが、OSによって表示内容が異なる可能性があります

フォルダーオプションの表示方法がわからない方は、一旦ググッてください！

cssに書き込もう！【コピペでOK！】

このファイルに書き込んでいきます。

「ファイルを右クリック」 ⇒ 「編集」

でテキストファイルのように書き込めるので、以下を記入します。

※2019年12月4日時点の最新版です

#titlebar { -moz-box-ordinal-group: 3; }

/* メニューを上へ移動 */
#toolbar-menubar { position: fixed; display: inline-flex; }
[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar { top: 1px; }
[sizemode="maximized"] #toolbar-menubar { top: 8px; }

/* ツールバーの上にメニューバーのスペースを確保する */
#navigator-toolbox:not([inFullscreen="true"]) { border-top: solid 22px transparent !important; }

これだけでOKです！

もしも「いま現在、タブそのものが上に戻ってしまっている」という方も、既存の設定を念のため保存しておき、不要な設定を一度削除の上、上記設定を入れてみてください！

あとはファイルを上書き保存したら、FireFoxを再起動して下さい。

もしも「何も反映されない（変わらない）」という場合、そもそも「userchrome.css」が適応されない設定になっている可能性があります。

その場合は、以下の記事を読み「userchromeが適応されるように設定」してください。

ただ、私的に気に食わないことが２点！！

ブックマークアイコンが灰色で見にくい！
ブックマークツールバーの高さが狭くて押し間違えそう！

ということで、これらもケアしていきます！！

ちなみにこのあと説明するものも、すべて「アドオンなし」で簡単にできるもの！

アドオンを入れるとそれだけ「重くなる」ので、今後もアドオンなんかに頼らなくても大丈夫なように、設定してしまいましょう！！

ブックマークアイコンの色を変更（復活）！

追記：2018/07

「ブックマークアイコン色の変更」については、Firefox61以降「@-moz-document」のルールが使用出来なくなったため、以下に紹介している方法では対応できなくなりました。

ほかの方法を模索中ですが、突破口が見つかり次第追記します。

追記：2018/07/15
フォルダの枠だけであれば、以下の一行を書き込むだけで黄色に出来ます。

.bookmark-item[container] {fill:#e8bb00 !important;}

background-color: を使うと文字部分も黄色くなってしまうため、現状はこれで使用しています。

フォルダのみ色づける方法をご存知方は、info@life-purasu.comへご連絡頂けますと嬉しいです！

「ブックマークのアイコン」の色の復活は、先ほどの「userChrome.css」に以下を書き込みます。

~~@-moz-document url(chrome://browser/content/bookmarks/bookmarksPanel.xul) {~~
~~treechildren::-moz-tree-image(title, container),~~
~~treechildren::-moz-tree-image(title, open) {~~
~~list-style-image: url("chrome://global/skin/icons/folder-item.png")!important;~~
~~-moz-image-region: rect(0px, 32px, 16px, 16px)!important~~
}
}

~~@-moz-document url(chrome://browser/content/bookmarks/bookmarksPanel.xul),~~
~~url(chrome://browser/content/history/history-panel.xul),~~
~~url(chrome://browser/content/browser.xul),~~
~~url(chrome://browser/content/places/places.xul) {~~
~~treechildren::-moz-tree-image(title, container),~~
~~treechildren::-moz-tree-image(title, open),~~
~~.bookmark-item[container] {~~
~~list-style-image: url("chrome://global/skin/icons/folder-item.png")!important;~~
~~-moz-image-region: rect(0px, 32px, 16px, 16px)!important~~
}
}