Firefox 57のタブをツリー型にする

PC関係

Firefox QuantumことFirefox 57で、タブをツリー型にし、さらに画面上部のタブを非表示にする手順をまとめました。

スポンサーリンク

アドオンの導入

サイドバーにツリー型のタブを表示できるようになるアドオン「ツリー型タブ(Tree Style Tab)」をFirefoxにインストールしてください。

するとサイドバーにタブツリーが現れます。ちなみにインストールと同時にツールバーに追加されるボタンをクリックするとタブツリーの開閉ができます。

とりあえずこれだけでツリー型のタブにはできますが、ウィンドウ上部のタブが残ったままで邪魔なので非表示にします。

元々あったタブの表示を消す

画面上部のタブを消すには、userChrome.cssというスタイルシートを活用します。

FirefoxのUIはほとんどCSSで設定されており、userChrome.cssやuserContent.cssというファイルによりスタイルを上書きすることができます。WordPressで言うと子テーマのstyle.cssへの追記と同様のイメージです。

userChrome.cssを作成する

Firefoxの画面右上にある3本線のアイコンをクリックし、メニューのヘルプから「トラブルシューティング情報…」を選択してください。

次に、トラブルシューティング情報の「アプリケーション基本情報」の中にある「プロファイルフォルダー」横のフォルダーを開くを選択してください。すると、プロファイルが格納されているフォルダが開きます。

C:\Users\%ユーザ名%\AppData\Roaming\Mozilla\Firefox\Profiles\%プロファイル名%」を直接開いても大丈夫です。

プロファイルフォルダの中に「chrome」という名前で新しいフォルダを作成し、その中に「userChrome.css」というCSSファイルを作成してください。

この時点でファイルの構成は「…\プロファイルフォルダ\chrome\userChrome.css」となります。

userChrome.cssに追記する

userChrome.cssに以下のコードを入力してください。

/* タブ非表示 */
.tabbrowser-tab[fadein]:not([pinned]) {
    display: none !important;
}

/* 新しいタブを開くボタンの非表示 */
.tabs-newtab-button {
    display:none !important;
}

これにより、画面上部のタブを非表示にし、さらに新規にタブを開く「+」マークのボタンも非表示になります。(「+」ボタンについてはカスタマイズから消すこともできるようです。)

userChrome.cssに追記できたら保存し、Firefoxを再起動すると反映されます。

上記のコードは、タブのみを非表示にするものなので、ツールバーやタイトルバーを表示するようにしている方は表示に無駄なスペースがあったり、違和感があるかもしれません。
そういった場合はタブバー自体を非表示にしてみてください。コードは以下の記事で紹介しています。
Firefoxのタブバーを非表示にするまでの流れを解説
FirefoxのuserChrome.cssのカスタマイズについて、「タブバーを消す」を例に流れを解説していきます。自分で好きなところをカスタマイズできるようになりたい人向けです。カスタマイズに応用して頂ければと思います。手っ取り早く結...

テーマをDefaultにする

LightテーマやDarkテーマ等を利用していた方は、Firefoxの「カスタマイズ」からテーマを「Default」にすると、ウィンドウの色がWindowsで設定しているものになるのでお好みでどうぞ。

というわけでこんな表示になります。

ちなみに

サイドバーにツリー型タブが追加される形になるので、サイドバーのブックマークの表示と同時に表示することはできません。ブックマークとツリー型タブを切り替える必要があります。

サイドバーにブックマークということに拘りが薄い方は、Firefoxのカスタマイズからツールバーに「ブックマークメニュー」を追加して、GoogleChromeのようにポップアップでブックマークを開くようにすると良いかと思います。

その場合は、アドレスバーに「about:config」と入力して設定画面を開き、「browser.bookmarks.openInTabClosesMenu」の値を「false」にするとブックマークを開いてもブックマークメニューのポップアップが消えないようになります。

また、同様の設定画面から「browser.tabs.loadBookmarksInTabs」の値を「true」にするとブックマークを常に新しいタブで開けるようになります。隙あらば自分語りをしますが、私は「新しいタブ」=「中クリック」の民なのでfalseにしています。

このほか、userChrome.cssでできること等は簡単に以下の記事にまとめて行けたらと思っています。

FirefoxのuserChrome.css備忘録
FirefoxのUIに関わるuserChrome.cssを利用したカスタマイズを備忘録的にまとめていきます。随時追記して行ければという感じで。userChrome.cssの場所と作成手順まずは肝心要のuserChrome.cssを作...

ちなみに私はサイドバーブックマークは必須派なのと、縦型表示にこだわりがあまり無いため、タブをツリー型にはしていません。

おわり。

 

コメント