Firefoxのタブをツリー表示できるアドオン「Tab Center Redux（Tab Center Reborn）」の設定方法！

2019/10/19 2022/01/10

長時間に渡るPC作業のせいか、唯一の自慢だった視力がだだ下がり。

老化現象とかいろいろ敵が多すぎる底辺（オメガ）オオカミ”minato”です。

今回はFirefox使いにオススメしたいアドオン（拡張機能）の導入事例を紹介する。

僕はこうやって使ってる＿って話なんだけど。

ちなみに、、、アドオンって何のために導入するのかって部分が大事。

「Tab Center Redux」を導入すると？

結果からいうと「Tab Center Redux」ってアドオンを入れると、ブラウザのタブ表示位置がトップからサイドに切り替わる。

だからなに？

そうなんだよ、僕も最初はそう思ってしまった。

でも今となっては上部タブ形式(デフォ)には絶対戻りたくないと頑なに思う。

だってタブがトップに展開してると「手」とか「目」がすごく疲れてしまうから。

その理由を語る前に、とりあえずアドオンの設定方法を先に解説したい。

「Tab Center Redux」インストール

Tab Center Reborn – 🦊 Firefox (ja) 向け拡張機能を入手

※2021年3月現在、「Tab Center Redux」は後継「Tab Center Reborn」としてリニューアルされたようです。

ブラウザ右上の三本線（ハンバーガーメニュー）をクリックし”アドオン”を選択する。

アドオンの管理画面に移動し「Tab Center Redux」を検索してインストールする。（※Tab Center Reduxで検索しても、”Tab Center Reborn”がヒットします。）

Tab Center Rebornでは、デフォルトでダークテーマの機能が提供されていないようです。一例として以下のようなスタイル（css）を上級者設定より追加する必要があります。


body {
  --icons: var(--grey-10-a80);
  --toolbar-background: var(--grey-70);
  --toolbar-text: var(--white-100);
  --input-background: var(--grey-60);
  --input-border: var(--grey-50);
  --input-text: var(--grey-30);
  --input-text-focus: var(--grey-20);

  --tab-text: var(--white-100);
  --background: var(--grey-80);
  --tab-active-background: var(--grey-60);
  --tab-separator: var(--grey-60);
}

「Tab Center Redux」の設定

「Tab Center Redux」は有効化しただけでは快適に使うことが難しい。

初期状態では上部とサイドでタブが重複して表示される。

これが非常にわずらわしい。

サイドタブに関しても、視認性の悪さや表示スペースに無駄を感じてしまう。

良し悪しは人それぞれの感覚の違いがあるだろう。

今回紹介するカスタマイズは、あくまで僕好みの設定であるという点を理解して欲しい。

では引き続きやっていこう。

「Tab Center Redux」のオプション設定で、”暗いテーマ”にチェック、”コンパクトモード”を常時に変更する。コンパクトモードにすると、タブ内のサムネイルが非表示になる。

これによりタイトルの視認性向上と表示スペースの節約にもなる。

ディスプレイの表示領域は限りあるものなので、明らかに無駄と思えるものは省いていきたいわけだ。

上部タブとタブヘッダーを非表示

次に上部のタブとサイドバー上部の赤枠部分、”サイドバーのヘッダ”も非表示にする。この設定はやや面倒で、Firefoxの”Profiles”フォルダ以下に独自スタイル（CSS）を追加する必要がある。

userChrome.css が反映されない？（2021/12/14 -追記-）

「Firefox 69」のアップデートで userChrome.css を読み込まない設定がデフォルトになったらしい。

というわけで、アドレスバーに「about:config」と打ち込み設定画面を開く。検索ボックスに「toolkit.legacyUserProfileCustomizations.stylesheets」と打ち込み値が「false」の場合「true」に変更しておく。

userChrome.cssの作成

メモ帳や適当なテキストエディタ（TeraPadなど）を開いて、以下のCSSをコピペして貼り付ける。


@charset "UTF-8";

@-moz-document url(chrome://browser/content/browser.xhtml) {

/* サイドバー検索ボックス非表示 */
#sidebar-search-container {
    visibility: collapse!important;
}
/* タブバーを非表示にする */
#TabsToolbar {
  visibility: collapse !important;
}
#tabbrowser-tabs {
  visibility: collapse !important;
}
toolbar#TabsToolbar.customization-target {
  visibility: collapse !important;
}
/* タイトルバーを非表示にする */
#titlebar {
  visibility: collapse !important;
}
/* サイドバーのヘッダも非表示にする場合はこちらも */
#sidebar-header {
  visibility: collapse !important;
}

}

ファイル名を「userChrome.css」としデスクトップなど適当な場所に一時保存する。

作成したファイルを以下の場所に移動する。

【C:\Users\user\AppData\Roaming\Mozilla\Firefox\Profiles\●●●●\chrome】

”●●●●”の部分は、ユーザーIDのような意味合いで各自表記が異なる。

”●●●●”内に初期状態では”chrome”フォルダは存在しないので追加する。

作成した”chrome”フォルダに、さきほど作成した「userChrome.css」を移動（コピペ）する。

Firefoxを再起動して、変更が反映されていればOKだ。（お疲れ様！）

※将来的にFirefoxのアップデートでCSSの記述方法が変わる可能性あり。

サイドバータブ表示で作業効率がアップする？

最後にminatoが感じているサイドタブの良いところを話したい。

しつこいようだがタブの視認性。

要するにタイトルの読み取りやすさがある。
展開したタブ数に関係なく表示幅（調整可能）を一定に保っておけるのは本当に便利だ。

10個程度のタブをほぼ目線を動かさず同時に瞬時に確認出来てしまう。

これが上部タブだど、目線どころか頭を左右に振って確認するような羽目になりかねない。そしてタブが増えるほどタブ一個あたりのスペースが小さくなってしまう。

さらにタブをマウスで切り替える場合も、その移動距離の差は歴然だ。

先程上部タブだと、目や手が疲れると発言したのはそういった理由からだ。

タブの視認性や切り替えが楽だと、必然的に情報収集やそれらを比較する労力、時間的コストにも差がついてしまう。

もう導入しない理由が見つからない、、

ただし、通常のブックマーク表示については妥協する必要がある。

残念ながらサイドタブとブックマークは共存できない。常にどちらか片方しか表示しておけないようだ。

両方表示出来たって話は今のところ聞かない＿。

個人的にはブックマークツールバーで十分対応可能だし、同等以上の快適さを得ているので問題なし。

う～んFirefoxってホント最高ぅ。

その他の記事：Google日本語入力「無変換キー」に半角英数（IME無効化 / F10）を割り当てる方法

-WEBツール

- #Firefox #アドオン #ブラウザ

Firefoxのタブをツリー表示できるアドオン「Tab Center Redux（Tab Center Reborn）」の設定方法！

「Tab Center Redux」を導入すると？

「Tab Center Redux」インストール