1. はじめに
ブラウザのフォント設定をお気に入りのフォントに統一しているのだが、たまにWebページ側でフォントが指定されている場合がある。
普段はそれほど気になるものでもないが、頻繁に利用しているサイトではどうしても気になってしまうため、好きなフォントに変更したい。
表示フォントを変更する拡張機能としてはStylus*1がよく知られている。
自分も今まで利用していたが、最近uBlock Originのフィルタ記法について調べていたところ、uBlock Originでもフォント強制ができるらしいと知った。
というわけで、今回はuBlock OriginでStylusの真似事をしてみようと思う。
2. 環境
3. 準備
3.1 Action operators
この記事*2を読んで知ったが、フィルタ作成時に"Action operators"というものを用いることで、特定の要素をDOMから削除したり(非表示ではなく)、スタイルを変更したりすることができるそうだ。
詳しくはuBlock wiki*3に載っている。
今回はフォントを強制変更したいので、スタイルを変更するためのAction operatorである:style()を用いる。
以下のようにフィルタを記述することで、 カッコ内のスタイルを指定要素に適用させることができる。
ドメイン名##要素:style(ここにCSS記法でスタイルを記述)
4. フィルタ作成例
例として、ニコニコ動画(www.nicovideo.jp)のフォントを強制変更するためのフィルタを作成する。
なお、ここではページ全体(<body>タグ内)のフォントをsans-serifに強制変更することとする。
上記に従いフィルタを作成すると、以下のようになる。
www.nicovideo.jp##body:style(font-family: sans-serif)
これをuBlock Originの「オプション」→「マイフィルター」に追記し、「変更を適用」をクリックする。
しかし、このままではフォントは変更されていない。これは後で読み込まれたCSSファイルによってスタイルが上書きされているためである。
そのため、スタイルに!importantを付与する*4。
www.nicovideo.jp##body:style(font-family: sans-serif !important)
このフィルタを適用したところ、期待通りの動作が確認できた。
追記
上記フィルタを使用した場合、ほとんどの箇所のフォントは変更できるが、ヘッダ(サイト上側の動画、静画、などと書かれた部分)については変更できなかった。
自分はこれで満足なのでこれ以上は求めないが、気になる場合はフィルタのさらなる改造が必要である(と思われる)。
