こんにちは！
クラウドソリューション開発部の石崎です。
前回に引き続き、Firefoxの良いところをお伝えしたいと思います。
今回はFirefoxの特徴の一つである高いカスタマイズ性が、実際にどのくらいすごいのかをご紹介します。
ユーザースタイルシートの有効化
Firefoxは基本設定だけでもボタンを任意の位置に配置できるなど高いカスタマイズ性がありますが、それだけではありません。
実はFirefoxはブラウザの外観自体がHTML（に似たXML）とCSSで構築されていますので、以下の手順でCSSを記述すればさらに自由度の高いカスタマイズが可能となります。
Firefox設定変更
初期設定ではユーザースタイルシートが無効化されていますので、これを有効化します。
- アドレスバーに about:config と入力して「高度な設定」画面を開きます。
- 検索欄に「toolkit.legacyUserProfileCustomizations.stylesheets」と入力します。
- 上記の設定がfalseになっている場合はダブルクリックしてtrueに変えます。
- 「高度な設定」画面を閉じます。
CSSファイル配置
- アドレスバーに about:profiles と入力して「プロファイルについて」画面を開きます。
- ルートディレクトリーの「フォルダーを開く」ボタンをクリックします。（複数のプロファイルが存在する場合は「既定のプロファイル」が「はい」となっているほうです）
- フォルダーが開いたら、「chrome」という名前のフォルダーを新規作成します。
- 「chrome」フォルダーの中に「userContent.css」と「userChrome.css」という2つのテキストファイルを新規作成します。
それぞれのファイルの役割は以下の通りです。
- 「userContent.css」ではWebページが表示される領域のCSSを変更できます。Stylus拡張機能でも同じようなことができますが、userContent.cssでは about:home など、ブラウザに組み込まれていてStylusでは変更できない画面も変更可能です。
- 「userChrome.css」ではWebページ表示領域の外側の領域（タブバー、アドレスバー、サイドバーなど）のCSSを変更できます。「Chrome」とはGoogle Chromeのことではなく、アプリにおいてメイン表示領域の外側のUI部分を指す用語になります。
これら2つのファイルに任意のCSSを記述することで、Firefox本体のデザインや挙動を変化させることができます。
なお、CSSを変更した後はFirefoxを再起動する必要があります。
サンプルCSS
以下では、サンプルとして私が実際に適用しているCSSを紹介します。
現時点の私のFirefoxバージョンは145ですが、バージョンが変わると不具合が起きる場合があります。その際は該当箇所を修正するかコメントアウトしてください。
userContent.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* ①「新しいタブ」画面のFirefoxロゴと「最近のアクティビティ」ラベルを消す */ @-moz-document url("about:home"), url("about:newtab") { .logo-and-wordmark-wrapper, .section-top-bar { display: none !important; } } /* ②ソース表示画面の配色を変更 */ @-moz-document url-prefix("view-source:") { #viewsource { font-size: 90%; } #viewsource > span:has(.error) { background-color: #f007; } .start-tag, .end-tag { color: lightgreen !important; } .comment { color: #777 !important; } .entity { color: #ffa !important; } .attribute-name { color: deepskyblue !important; } .error { font-weight: normal !important; background-color: initial !important; } } |
①「新しいタブ」画面のFirefoxロゴと「最近のアクティビティ」ラベルを消す
「新しいタブ」画面のFirefoxロゴと「最近のアクティビティ」ラベルはスペースの無駄に感じたので非表示にしました。それによって私のディスプレイ（縦1080px）ではショートカットアイコン2行、最近のアクティビティ3行をスクロールせずに表示できるようになりました。
②ソース表示画面の配色を変更
Firefoxのソース表示画面には構文ミスを強調表示してくれる機能がありますが、あまり目立たないため行全体を強調表示させるようにしました。文字色は青系にしてより強調表示が目立つようにしました。フォントサイズも小さく調整しています。
userChrome.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
/* タブバー */ #TabsToolbar { /* ③タブバーの左端に拡張機能のボタンを配置した場合に左上をクリックできるようにする */ #TabsToolbar-customization-target toolbaritem:first-of-type[id*="browser-action"] { margin-inline: 0 !important; toolbarbutton.webextension-browser-action { padding-block: 4px !important; } } /* ④コンテナータブの線を消して文字色を変える */ .tabbrowser-tab[usercontextid] > .tab-stack { & > .tab-background > .tab-context-line { height: 0 !important; } & > .tab-content > .tab-label-container > .tab-label { color: var(--identity-icon-color); } } } /* アドレスバー(ツールバー) */ #nav-bar { #page-action-buttons { /* ⑤「タブをタスクバーに追加します」、「常にコンテナーでサイトを開く」、「Open Side View」ボタンを非表示にする */ & > #taskbar-tabs-button, & > #pageAction-urlbar-_testpilot-containers, & > #pageAction-urlbar-side-view_mozilla_org { display: none !important; } /* ⑥翻訳ボタンを常に表示する */ & > #translations-button { display: flex; /* 強制的に表示した時は薄くして状態変化も無効化 */ &[hidden] { opacity: 0.5; & > #translations-button-icon { fill: currentColor !important; } & > #translations-button-circle-arrows, & > #translations-button-locale { display: none; } } } } } /* ⑦サイドバーのサイズを0%から90%まで許容 */ #sidebar-box { min-width: auto !important; max-width: 90vw !important; } /* ⑧ページ内検索の入力欄を拡大 */ .findbar-textbox { width: 60em !important; } /* ⑨メニューのフェードイン・フェードアウト効果を無効化 */ panel, menupopup { transition: none !important; } |
③タブバーの左端に拡張機能のボタンを配置した場合に左上をクリックできるようにする
タブバーの左端に拡張機能のボタンを配置した場合、ウィンドウ最大化時にディスプレイの左上隅をクリックしても反応しないバグを修正しました。（3年くらい前までは反応したのでバグと言わせていただきます）
④コンテナータブの上の線を消して文字色を変える
コンテナータブのデザインが目立ちすぎてアクティブなタブと見間違えやすいため、タブの上に線を引くのではなく文字色を変えるスタイルに変更しました。
⑤「タブをタスクバーに追加します」、「常にコンテナーでサイトを開く」、「Open Side View」ボタンを非表示にする
アドレスバー内の右端に表示されるPWA化ボタンや、私が入れている拡張機能のボタン（Multi-Account ContainersとSide View）は不要なため非表示にしました。
※私はPWAで開きたいサイトもあるためCSSで消しましたが、PWA機能を一切使わないのであれば about:config で「browser.taskbarTabs.enabled」をfalseにすることでもボタンを消せます。
⑥翻訳ボタンを常に表示する
今年ようやくFirefoxに日本語翻訳機能が実装されましたが、全体が日本語で一部が英語などのページでは翻訳ボタンが表示されないため、常に表示させるようにしました。強制的に表示した場合は翻訳元と翻訳先の言語選択が逆になっているため、強制的に表示されていることが分かるように薄く表示しています。
⑦サイドバーのサイズを0%から90%まで許容
サイドバーのサイズは通常0にできず、最大サイズも75%までに制限されていますが、これを0%から90%まで変えられるようにしました。
⑧ページ内検索の入力欄を拡大
ページ内検索の入力欄の幅を18emから60emに拡大しました。
※下記のCSSを適用すればウィンドウサイズに合わせて拡大させることもできますが、右側に表示されるヒット件数などの文字によってサイズが変わってしまうため、固定幅にするほうがおすすめです。
|
1 2 3 4 5 6 7 |
.findbar-container > hbox { width: 100%; .findbar-textbox { width: 100% !important; min-width: 18em !important; } } |
⑨メニューのフェードイン・フェードアウト効果を無効化
メインメニューや右クリックメニューがゆっくり表示され、ゆっくり消えていく効果を無効化しました。
要素の調査方法
独自のCSSを記述するためには、変更したい箇所のHTML要素（タグ名やID、クラス名）を知る必要があります。
userContent.cssの適用対象は通常のWeb画面と同様にF12キーを押して開発ツールで調査できますが、userChrome.cssの適用対象については以下の手順で調査します。
- F12キーを押して開発ツールを開きます。
- F1キーを押して設定を開きます。
- 「ブラウザーとアドオンのデバッガーを有効化」と「リモートデバッガーを有効化」にチェックを入れます。
- メインメニューの「その他のツール」の中に「ブラウザーツールボックス」という項目が追加されるのでクリックします。
- 「リモートデバッグ接続要求」というダイアログが出るのでOKを選択します。
これでFirefoxの外観部分を調査できる開発ツール（ブラウザーツールボックス）が起動します。
メニューなど、フォーカスを外すと消えてしまう要素を調査したい場合は、ブラウザーツールボックス内のメニューにある「ポップアップを自動で隠さない」にチェックを入れれば調査が可能になります。
最後に
いかがだったでしょうか？Firefoxが「カスタマイズ性が高い」と言われる理由がお分かりいただけたかと思います。CSSの知識さえあれば新しく覚えることは何もありませんので、皆さんもFirefoxで自分好みのWebブラウザを作ってみてください！
エコモットでは一緒にモノづくりをしていく仲間を随時募集しています。弊社に少しでも興味がある方はぜひ下記の採用ページをご覧ください！
