Firefoxの固定タブを見やすく使いやすく!userChrome.cssで幅を調整する方法

今回は少し変わったケースについて取り上げます。約1年前、Firefox Quantumは動作や振る舞いにおいて数多くの抜本的な変更をもたらしました。その中で最大のものがWebExtensionsへの移行です。この移行により、多くの親しみやすく強力な拡張機能、特にタブ管理系アドオンの多くが動作しなくなりました。一方で良い面としては、Firefox本体に「タブのピン留め」機能が統合されました。これはなかなか快適に使えます。しかし…

ピン留めされたタブ(固定タブ)はタブバーから切り離され、左側に配置されます。デスクトップのクイック起動アイコンエリアのようなイメージです。ここまでは良いのですが、ここに落とし穴があります。実は固定タブはかなり幅が狭く、素早くクリックして開くという操作がしづらいのです。マウスカーソルを正確に位置合わせする必要があり、操作スピードが落ちてしまいます。しかも、固定タブの幅を変更する簡単な設定オプションは用意されていません。そこで今回のガイドの出番です。

固定タブの幅を広げる

私が初めてFirefoxのUIカスタマイズに触れたのは、Linux PlasmaデスクトップのHDスケーリングについて詳しく議論した際でした。当時はデスクトップ環境のネイティブな設定だけでは対応できず(あるいは可能でも見た目が美しくならなかったため)、手動での上書き設定をいくつか使ってUIサイズを大きくしました。今回は同じようなアプローチで、固定タブを使いやすくしていきます。

FirefoxのUI上書きは、Firefoxプロファイルディレクトリ内にあるuserChrome.cssファイルを通じて行えます。このファイルにはCSS宣言が含まれており、Webページとまったく同じようにブラウザの外観を制御します。フォント、色、境界線、マージン、パディングなど、何でも変更可能です。もちろん、CSSの構文をある程度理解している必要がありますし、Firefoxがインターフェースに使用している各種クラス名についても知っておくと良いでしょう。Windowsでの一般的なパスは以下の通りです。

C:\Users\(ユーザー名)\AppData\Roaming\Mozilla\Firefox\Profiles\
(プロファイル)\chrome\userChrome.css

Linuxの場合は次のようになります。

~/.mozilla/firefox/(プロファイル)/chrome/userChrome.css

固定タブに対しては、以下のコードを追加します。

/* Tabs */
.tabbrowser-tab[pinned] {
padding-left: 20px;
padding-right: 20px;
}

このコードは、固定タブのアイコンの左右にパディングを追加し、固定タブを20ピクセル分広げます。これにより、中央揃えかつ左右対称の、クリックしやすいタブになります。単純にタブのwidthを増やすこともできますが、その場合アイコンは左寄せになり、右側に大きな余白ができて不自然に見えてしまいます。こだわり派の方なら耐えられないでしょう。左右均等のパディングを使うのが、美しくエレガントな解決策です。

これで完了です。驚くほど簡単ですね!

まとめ

以上で、こだわりの要求も満たされました。Firefox Quantumは、一般ユーザーにとっての手軽さは低下したものの、依然としてかなりのカスタマイズ性を保っています。この機能が今後も残り続けることを願います。他のブラウザに対するFirefoxの明確な優位点の一つだからです。WebExtensionsへの移行で多くのものが失われました。柔軟でモジュール化されたブラウザが、競合製品に何の優位性も持たない静的で無機質な殻になってしまうのは残念なことです。

Firefoxの固定タブを使っている方にとって、今回の方法はアクセシビリティ向上の有効な選択肢となるでしょう。タブを広げることで、タブバーとの一貫性が高まり、素早いマウス操作でも正確にクリックできるようになります。さらに、userChrome.cssによる上書きを使えば、ブラウザUIレイアウトのさらなる改善も可能です。例えば、縦方向の間隔やパディングを広げるといった調整も自由自在です。この小さなガイドが皆さんのお役に立てば幸いです。それではまた。

それでは、快適なブラウジングを!