自分 advent calendar 2019 の 4日目の記事です(3日坊主とはならなかった,いぇい!)
Firefox には userChrome.css と userContent.css という仕組みがあって,それぞれブラウザUI と表示するサイトに自分で書いた css を適用できます.stylish とかほど大仰でなく,導入しやすい上に痒いところに手が届くので便利なわりに,案外言及が少ない気もするので紹介します.
(最近デフォルトでは読まなくなったらしい? →PSA: Firefox v69 users will have to set a pref to enable userChrome.css and userContent.css : FirefoxCSS 僕いつ設定したっけな…)
設定の仕方
~/.mozilla/firefox
の下に,各 profile を収めたディレクトリがあります(profile って何?という場合は,多分 [適当な文字列].default
というディレクトリ).この下には addons.json
, storage/
, などなど色んなファイルが格納されていますが.ここに chrome/
というディレクトリを作ります (~/.mozilla/firefox/profile_name.default/chrome/
).ここの直下に userChrome.css
, userContent.css
というファイルを作ればよい.
あとはデフォルトでは読み込まないようになったみたいなので,上記 reddit を参考に設定を変更します.
設定例
いくつか自分が使っている設定を紹介します.
たとえば,private browsing をよく使うのですが,「今開いてるこのウィンドウがどっちなのか」が案外わかりづらい.
これを,private なときは上部の色を変えて分かりやすいようにしてみたいとします.
Reddit のこの投稿を参考に userChrome.css
を編集
#main-window[privatebrowsingmode="temporary"] #navigator-toolbox { background-color: #CE85FF !important; } #main-window[privatebrowsingmode="temporary"] #nav-bar { background-color: #CE85FF !important; }
edit 13 Jan 2020: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
を含めていましたが,そもそも不要であった説があるほか,FF72.0 以降(多分)この行があると正しく機能しなくなっています.
こんな感じになります.
あるいは,Tree Style Tab を使っていて,タブを表示しているサイドバーの幅をもっと小さくしたいとき,wiki に記載あるとおり
#sidebar { min-width: 0px !important; }
さらに,たとえば twitter がアイコンの角を丸めるのが許せないとき.今度は userContent.css
に
/* 最近 twitter は class 名とかが入り組んでてピンポイントで狙いづらい */ @-moz-document domain(twitter.com) { .r-sdzlij { /* avator icon and others*/ border-radius: 0px !important; } }
ログインしてないときに(するつもりはない) medium が出してくるヘッダフッタが邪魔すぎるとき
@-moz-document domain(medium.com) { div.metabar { visibility: collapse; } div.js-stickyFooter { visibility: collapse; } }
などなど,ちょっと調べると色んな不満を直せるのでとてもよいのです.詳細は省きますが,ブラウザUIにもインスペクタが及ぶように設定することができ,どの要素に当てればよいかは(ググってわからなければ)それで検討できます.