【最新版】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が適応されるように設定」してください。

 

>>【最新版】Firefoxで「userChrome.css」が反映されない時の設定方法

 

 

ただ、私的に気に食わないことが2点!!

 

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

 

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

 

 

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

 

 

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

 

 

 

 

ブックマークアイコンの色を変更(復活)!

追記: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
}
}

 

上記については、日々のつぶやきを参考にさせて頂きました!
ありがとうございます。

 

これで色を戻せたら、次は押し間違えないように幅の調整をしましょう!

 

スポンサーリンク

 

 

ブックマークツールバーの高さを変更しよう!

タブは下へ移動できたけど、

 

なんだかブックマークが見づらい・・・

 

Firefox Quantumのブックマークツールバーの高さ

 

 

という方は、以下のcssを当てましょう!

 

#PersonalToolbar {
height: 25px !important;
}

 

この「height」というのは、高さを調整するスタイルです。

 

私は25pxくらいで良いと思いますが、もっと広げたい方は30pxでも良いでしょう。

 

 

「30px」だと以下の様になります。

 

Firefox Quantumでツールバーの高さを変更

 

 

また、もっと文字を大きくしたい!という場合は

 

#PersonalToolbar {
height: 30px !important;
font-size:25px !important;
}

 

フォントサイズを大きくすればOKです!

 

 

↑ 25pxではかなりオーバーな設定ですね

 

 

ちなみに「height」を使わなくとも、「margin」というスタイルを使えば、文字の上下に空白を入れることも出来ます。

 

#PersonalToolbar {
font-size:25px;
margin:10px 0px;
}

 

この「margin:10px 0px」というのは、“上下に10pxずつ空白を持たせる” という意味です。

 

※paddingとの違いなどもありますが、ここで細かい説明は省きます。

 

 

上の設定を当てると・・・

 

 

 

と言うことで、このように色々調整できますので、この辺の匙加減は皆さんで適宜調節してみて下さい♪

 

 

なお、どのタイミングでも設定を反映させる時は、一度Firefoxを再起動させて下さいね!

 

 

 

 

タブの横幅の大きさを変更しよう!

タブを多く開いたときに「1つひとつのタブが小さくなりすぎて、文字が見えない!」という不便さを解消します!

 

 

↑ このように、タブがギュッと圧縮されるので文字が読めない・・・

 

 

この解決法については、別記事「FirefoxQuantum(66以降)で「タブの文字が見えない」対策!<横幅を広げる>」で説明していますので、そちらをご覧下さい!

 

 

 

 

タブを多段にしよう!

タブの多段方法についても説明しています。

 

ちなみに「多段」というのは

 

firefoxQuantumでのタブの多段設定

 

このように、タブが2重、3重と段になって増えていくことです。

 

タブをたくさん開いていく方は、この設定も役立つかもしれません♪

 

>>Firefox Quantum(66以降)でタブを多段(2段,3段…)にする方法!

 

 

 

 

ブックマークを「新規タブ」で開く!

これは必要あるか分かりませんが、個人的に「ブックマークからサイトへ飛ぶときは “新規タブ” で開きたい」ので、その設定を入れました。

 

>>【超簡単】FirefoxQuantumでブックマークを「新規タブ」で開く方法!

 

 

 

 

検索バー(窓)から「新規タブ」で開く!

こちらも個人的に必要なものですが。。

 

「検索結果は “新規タブ” で開きたい」ので、その設定を入れました。

 

>>FirefoxQuantumの検索バーから「新規タブ」で結果を開く!!

 

 

 

 

タブをツリー型にする!※アドオン一部使用

個人的には上部で「多重タブ」にするのが使いやすいですが、なかにはツリー型にしたいと言う方もいらっしゃるので。

 

 

↑ このように左サイドにツリー型にタブが並ぶ

 

>>FirefoxQuantum(66)でツリー型タブを作り、上部タブを消す方法!

 

 

 

 

タブを開く時に「真横」もしくは「右端」どちらで開くかの設定!

ページを閲覧中に「新規タブで開く」を押したときに、タブを

 

  • 既存タブの真右に開く
  • 右端に開く

 

の2種類を設定できます♪

 

 

たとえばページ内の「哺乳類」というリンクを「新規タブ」で開いたときに・・・

 

 

【右端で開かれるパターン】

 

 

【今見ているタブの真右に開かれるパターン】

 

 

デフォルトは「右端に開く」ですが、変えたい方もいらっしゃると思うので、是非参考にしてみて下さい!

 

>>FirefoxQuantumで新しいタブを「右隣」「右端」どちらで開くかを設定!

 

 

 

 

余談@:タブの自動更新を阻止しよう

Firefoxが67にアップデートされましたが、67以降では、パソコンのメモリの空き容量が少なくなったタイミング(現時点では400MB以下と発表されている)で、使用していないタブは「サスペンド状態(省電力モードのようなもの)」に切り替わるようになりました。

 

そのため、再度タブを触ると毎回「自動更新」されるようになりました。

 

これが厄介な方は、自動更新機能を停止しましょう。

 

>>【6/8更新】Firefox67以降でタブの自動更新(再読み込み)を無効化する

 

 

 

 

余談A:タイトルバーを表示する!!

ちなみにFirefox Quantumは、デフォルトではなぜか「タイトルバー」が非表示です!

 

 

本来、上記赤枠部分には「Yahoo! JAPAN - Mozilla Firefox」など、今見ているページ名が表示されます・・・

 

 

これを表示させるのに手間取ったので、これも別記事でまとめています。

 

良ければこちらも参考にしてみてください♪

 

>><超簡単>FirefoxQuantum(66以降)で「タイトルバー」を表示させる方法!

 

 

 

以上、シェアして頂けますと幸いです。

スポンサーリンク