Firefoxを使いやすくカスタマイズする

2019年6月11日

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

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

 

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

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

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

 

ページ内検索バーを上に移動(userChrome.css)

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

userChrome.cssの使い方

1.プロファイルフォルダー C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles に Chrome フォルダーを作製します。

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

 

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

 

/* 検索バーを上に */

.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)

 

/* 多段タブ */

: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の再起動後に復活してしまうという不具合が出ることがありました。

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

タブ幅は 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)

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

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

 

設定エディター(about:config)

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

設定方法

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

 

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

 

 

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

 

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

 

設定例

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

browser.tabs.loadBookmarksInTabs > true

 

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

browser.tabs.loadBookmarksInBackground > true

 

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

browser.search.openintab > true

 

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

browser.link.open_newwindow.restriction > 0

新しいタブに開く:

browser.link.open_newwindow > 3

 

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

browser.tabs.insertRelatedAfterCurrent > false

(アドオン「Open Tabs Next to Current」でも可)

 

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

browser.tabs.selectOwnerOnClose > true

 

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

browser.tabs.loadDivertedInBackground > false