Firefoxを使いやすくカスタマイズする ～ アドオン、多段タブ etc.

2023年1月13日

2017年11月にFirefox Quantumがリリースされて1年半。
アドオンで自由にカスタマイズできるのが特徴だったFirefoxは、拡張機能がWebExtensionsに変更されて使用できるアドオンが減り、その影響かシェアも減っているようです。

それでもFirefoxを使い続けるのは、Chromeではできない多段タブ※が裏技的ですが使える、フォントのレンダリングがFirefoxのほうがきれい（多少ましなレベルですが）など、Chromeより勝る面もあり、私は現在でもFirefoxがメインのブラウザーです。

（※ Webkit/Blink系ではSleipnir4が多段タブ可能。Ancia Chromeも多段タブが使えますが、β版のまま2017年以降更新が止まっています）

また、私がブラウザーを選ぶ基準のひとつがページ内検索の使いやすさです。
（ページ内検索についての記事 ↓）



Firefoxを使う大きな理由の一つだった、「Googlebar Lite」が使えなくなってしまい、完全な代替方法はいまのところありません。
WaterfoxやPale Moonも完全な代替にはならないので、用途によってブラウザーを使い分けています。

できるだけ旧Firefoxのようなブラウザーを使いたいという場合はWaterfoxがよいと思います。



この記事では私がFirefoxで使っているアドオンや設定を紹介します。

アドオン

AfterSearchWE

ウェブ検索後に検索ワードをAfterSearchバーに自動表示してページ内検索ができます。

ダウンロード

AutoPagerize

複数ページを連続して表示します。

ダウンロード

Bitwarden – 無料パスワードマネージャー

パスワード管理。私の使い方では無料版でも十分です。

ダウンロード

Gesturefy

マウスジェスチャー。必須ですね。

ダウンロード

Google Image Search

画像を右クリックして画像検索。同じような名称のアドオンがいくつかあります。

ダウンロード

ResizeIT 2

ウィンドウのサイズと位置を記録してショートカットキーで移動できるアドオン。
ウィンドウを希望する位置に配置し、[Use Current]ボタンを押すとサイズと位置が記録されます。ショートカットキーを　Alt+1　などにしてチェックボックスにチェックを入れます。

ダウンロード

Stylus

ページのデザイン変更。Windowsの読みにくいフォントを読みやすくするなどできます。
使い方はこちら。

ダウンロード

Tab Mix – Links

リンクを新しいタブで開くなどの機能を追加。

使い方

インストールしたら about:config　を開き、　browser.link.open_newwindow　などの設定値を記載してあるものと合わせます。

あとはお好みで。
私は　Force to open in new tab:　を　Links to other sites　にして使っています。こうすると同じサイト内は同じタブで開き、外部サイトは新しいタブが開きます。

ダウンロード

Undo Close Tab Button

閉じたタブの履歴を表示します。

Do not show a list～のチェックを外し、表示したい履歴数を設定します。

ダウンロード

ツリー型タブ

右または左ペインにタブを表示。ウィンドウの上下幅をできるだけ広くしたいときにタブを横に移動できます。
タブは userChrome.css で非表示にできます（下の記事を参照してください）。

ダウンロード

UI

検索バーをメニューバーに設置

Firefoxは検索バーとアドレスバーを別々に表示することができます。アドレスバーのみを開いて検索バーを兼ねることもできますが、検索結果は開いているタブを上書きするため、検索結果の新しいタブを開くことができません※。
しかし検索バーとアドレスバーを両方表示させるとバーの幅が短くなります。

メニューバーを常時表示させておくと、カスタマイズの画面で検索バーをメニューバーにドラッグアンドドロップできるので、バーの幅を長くとりたい場合はこの方法でできます。

※Firefox60以降で設定可能になっています（設定エディターの項を参照）

タイトルバーにはアドオンのアイコンなども移動できるので、あまりクリックしないアイコンなどはタイトルバーに移動しておけば邪魔になりません。

なお、最小化ボタンの左側に検索バーがあると、ウィンドウをドラッグして移動するのに必要なポインターを当てるスペースが無いので、カスタマイズの画面で「伸縮自在のスペース」を入れておくと移動しやすくなります。

メニューバーは Alt キーを押すと表示されます。
表示 ＞ ツールバー ＞ メニューバー にチェックを入れると常時表示になります。

ページ内検索バーを上に移動（userChrome.css）

Ctrl+F で最下部に表示されるページ内検索バーを上部に表示するようにします。幅が可変だと検索時に検索文字の位置が動いてしまうので、幅をウィンドウいっぱいにして固定しています。

/* 検索バーを上に */

.browserContainer > findbar {
-moz-box-ordinal-group: 0;
left: 1em;
border: 1px solid threedshadow !important;

/* Hide the "border" at the top by removing the box-shadow and background-image */
border-top: none !important;
box-shadow: none !important;
background-image: none !important;

/* Uncomment to add a transition from the top */
transition: 400ms !important;
z-index: 0 !important;
}

/* width and font */
.findbar-textbox {
width:auto !important;
font-size:14px !important;
font-family : "源ノ角ゴシック Code JP" ;
}

.findbar-closebutton {
margin-inline-start: 0.5em !important;
vertical-align: middle !important;
margin-bottom: 0.25em !important;
height: inherit !important;
}

userChrome.cssの使い方

1．プロファイルフォルダー　C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles　に　Chrome　という名前のフォルダーを作成します。

2．コードをコピーしてテキストエディター等に貼り付け、ファイル名を　userChrome.css　としてUTF-8/BOM無しでChromeフォルダーに保存します。複数ある場合は同じファイルに追記していきます。

※ userChrome.css　と　userChrome.js　はアップデート時に仕様が変わることがあり、動作しなくなる場合があります。

2019年9月12日追記：userChrome.cssを設定しても反映しない場合
Firefox69以降はuserChrome.cssがデフォルトで無効になったということです（それ以前からuserChrome.cssを使用している場合は有効のまま引き継がれます）。
有効にする方法は下のほうにある「設定エディター（about:config）」の項に追記しました。

userChrome.cssの使用例

/* 音の出ているタブに色を付ける */
.tabbrowser-tab[soundplaying="true"] .tab-background {
  background-color: #ffc0cb !important;
}

/* アクティブタブに色を付ける */
.tab-background[selected="true"] {
  background-color: #BCFEFF !important;
  background-image: none !important;

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) {
  background: #F4D531 !important;
}

多段タブ

ネットで調べものなどをしていると多くのタブを開いて使うことがよくありますが、タブが一段しか表示できないブラウザーだとタブの幅が縮んでしまい、何のページかわからなくなることがあります。

タブをサイドバーに表示する縦型タブのアドオンなどもありますが、それを使うとウィンドウの幅自体が狭くなってしまいます。

たくさんタブを開く場合は多段タブが便利です。

多段タブにするには userChrome.css または userChrome.js の追加・変更をします。

多段タブ（userChrome.css）

userChrome.cssを作成（または追記）で多段タブにできます。

2020年1月10日追記：Firefox72で確認したところ動作しなくなっていました。ESR（68.4.1）では動作します。
2020年4月17日追記：Firefox75で動作するものは こちら 

/* 多段タブ */

:root { –multirow-n-rows: 5} /* タブの段数 */
#tabbrowser-tabs {
min-height: unset !important;
padding-inline-start: 0px !important;
}
#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(–tab-min-height) * var(–multirow-n-rows));
scrollbar-color: var(–toolbar-bgcolor) var(–lwt-accent-color);
scrollbar-width: thin;
}
#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
}
.tabbrowser-tab { height: var(–tab-min-height); }
#tabbrowser-tabs .tabbrowser-tab[pinned] {
position: static !important;
margin-inline-start: 0px !important;
}
.tabbrowser-tab > stack { width: 100%; height: 100%; }
#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after { display: none !important; }
.tabbrowser-tab[fadein]:not([pinned]) {
min-width: 120px !important;
max-width: 120px !important;
flex-grow: 1;
} 
.tabbrowser-tab:not([selected=”true”]) .tab-close-button { display: none !important; }

CSSでの多段タブはドラッグしてタブを移動するのがやりにくいので、Ctrl+Shift+PageUp/Downで移動したほうがいいかもしれません。

多段タブ（userChrome.js）

userChrome.js　のタブはドラッグで移動することができます。有志の方が公開されているファイルをいくつか試してみましたが、閉じたタブがFirefoxの再起動後に復活してしまうという不具合が出るものもありました。

現在はこちらの方が紹介されているものが使いやすいと思います。

※ 2019年9月7日追記：
上記のサイトで紹介されているものはFirefox69.0で動作しなくなりました。
69.0対応版は https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme で公開されています。

修正方法がわからない場合は下のファイルをダウンロードして解凍し、中身をプロファイルフォルダー　C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles　の中にある　Chrome　という名前のフォルダーに入れれば多段タブ（＋ページ内検索バーを上に移動etc.）になります。
（Chrome　フォルダーが無い場合はフォルダーごとプロファイルフォルダーに入れて下さい）

アイコン

chrome.zip

1 ファイル 5.56 KB
ダウンロード

※ 2019年12月4日追記：上記のものはFirefox71.0で動作しなくなりました。
修正版は以下をダウンロードしてください。

アイコン

Chrome FF72.zip

1 ファイル 5.88 KB
ダウンロード

※ 2020年1月8日追記：Firefox72.0へのアップデートでまた動作しなくなりました。
修正版は下のリンクに移動してください。
また、72以降はuserChrome.jsの導入手順が変更されています。
当サイトで紹介している方法と、userChrome.js用スクリプトなどで紹介されている方法は異なります。

タブ幅の変更

タブ幅は　MultiRowTabLiteforFx.uc.js　の中身をこんな感じで変更しています。
幅が短すぎたり長すぎたりするとうまく反映しないようです。

    :root {
        --min-tab-width: 130px;
        --max-tab-width: 150px;
        --tab-growth: 1}

    .tabbrowser-tab[fadein]:not([pinned]) {
        flex-grow: var(--tab-growth);
        min-width: var(--min-tab-width) !important;
        max-width: var(--max-tab-width) !important}

タブを非表示 （userChrome.css）

サイドバーにタブを表示する場合、タブバーが必要なければ非表示にできます。

#tabbrowser-tabs {
  visibility: collapse !important;
}

多段ブックマークバー

こちらのCSSを userChrome.css に追記します。
（「bookmarks_toolbar_multiple_lines_fx〇〇.css」のバージョン（〇〇）が該当するものをクリック）



NURO光

設定エディター（about:config）

about:config は設定画面にない細かな設定を変更できます。

設定方法

アドレスバーに　about:config 　と入力します。「危険性を承知の上で使用する」をクリック。

検索欄に設定名を入力すると一致するものに絞り込まれます。
変更する値が「true」か「false」のときは行をダブルクリックすると変更されます。

数値を変更する場合は、ダブルクリックするか、右クリックから「値を変更」をクリックして数値を変更します。

設定名が無いときは右クリックし、新規作成から作成します。

設定例

userChrome.cssを有効にする

toolkit.legacyUserProfileCustomizations.stylesheets 　>　true

ブックマークを新しいタブで開く

browser.tabs.loadBookmarksInTabs 　>　true

ブックマークをバックグラウンドで開く

browser.tabs.loadBookmarksInBackground 　>　true

アドレスバーでのURL入力・検索結果を新しいタブで開く

browser.urlbar.openintab 　>　true

検索バーでの検索結果を新しいタブで開く

browser.search.openintab 　>　true

ポップアップウィンドウをタブで開く

browser.link.open_newwindow.restriction 　>　0

新しいタブに開く:

browser.link.open_newwindow 　>　3

新しいタブを今開いてるタブの後ろに開く

browser.tabs.insertRelatedAfterCurrent 　>　true

（アドオン「Open Tabs Next to Current」でも可）

親タブから開かれた子タブを閉じたとき親タブにフォーカスする

browser.tabs.selectOwnerOnClose 　>　true

リンクを開いたらタブのフォーカスを移す

browser.tabs.loadDivertedInBackground 　>　false

マウスホイールでタブを切り替える

toolkit.tabbox.switchByScrolling 　>　true

タブを一覧表示するボタンを常時表示する

browser.tabs.tabmanager.enabled 　>　true

※ userChrome.cssに以下の追記が必要です
/* “List all tabs" button */
#alltabs-button,tabs tab:not([fadein]) {display: block ;}

参照サイトなど


[PR] パソコン操作をもっと速く楽にするため小ネタ満載
￥500（Kindle Unlimitedは無料）
高速化・快適化するためのパソコン再入門 Kindle版
150章/369ページ￥500(税込)(Kindle Unlimitedは無料)
深月 隆寛（著）
Amazon

ブラウザー,高速化Firefox,ブラウザー,多段タブ,高速化

Posted by みつき