こんにちは、tamateです。
皆さんは、「このサイトの見た目、ちょっとカスタマイズしたいな～」と思ったことはありませんか？
私は、関連記事とか、関連動画とかを興味が薄くても見漁ってしまい、気がついたら数時間経っていたということがよくあるので、そういう表示は消したいと思うことがあります。
今回は、そんなときに使えるブラウザ拡張「Stylus」を紹介します。
Stylusとは？ #
公式GitHubによると、
Stylus is a browser extension to restyle the websites via CSS themes, compatible with Chrome, Firefox, and any Chromium-based browsers.
……ということですが、まあ要するに「CSSを自分でいじることができるブラウザ拡張」です。
他のユーザーが作ったテーマの導入や、Google Driveなどでの同期などもできるようになっています。
個人的には、GitHubでソースが公開されているのと、ユーザーのデータを利用しないということを明言しているのがいいですね。CSSをいじるということはすべてのサイトへのアクセスを許可するということになるわけで、配布元が信頼できるかが重要になると思います。オープンソース最高！
導入してみよう #
ブラウザ拡張なので、導入は簡単です。ChromeウェブストアやFirefox向けアドオンといったサイトから検索して導入すればOKです。
Stylus – 🦊 Firefox (ja) 向け拡張機能を入手
偽の拡張機能があるかもしれませんので、検索する際は「おすすめ」がついているかやユーザー数などを確認して本物っぽいかを確かめるのがいいでしょう。
インストールすると、拡張機能の欄にStylusが追加されていると思います。
これをクリックすると、Stylusのポップアップが出てきます。
左下のアイコンを押せば、CSSのカスタマイズを登録できる画面（スタイルマネージャ）に入れます。
「スタイルを新規作成」をクリックすると、新規作成できます。
CSSを適用したいURLを指定して、
CSSを書いて保存すれば、
適用されます！！
実際にどんなことができるのか？ #
私は主に「見たくないものを消す」ということにStylusを使っています。具体的には、Yahoo!知恵袋やQuoraの関連質問とか、YouTubeの関連動画とか……
私はこういうものを自分にとってあんまり関係ない内容のものまで見てしまい、あっという間に数時間経ってしまうんですよね……
YouTubeのような有名なサイトの場合は表示範囲をカスタマイズできる拡張機能があると思うのでそれを使ってもいいと思いますが、Stylusはすべてのサイトを登録できるのでいいですね！
他にも、
-
ダークモードに対応していないサイトをダークモードにしてみる とか
-
動画サイトの配置を変えて動画部分を大きくする とか
さまざまなことができます。ユーザーが投稿しているサイトもいくつかあるので、そのあたりを見ながらどんなことができるか考えてみるのも面白そうですね！
公式GitHubに載ってた、ユーザーがテーマを投稿しているサイト→ https://userstyles.world/explore
CSSをそのままいじれますので、アイデア次第で他にもいろいろできると思います。
私がやっていたちょっと変わった使い方としては、「動画サイトの再生数や高評価数・コメント部分をすべて非表示にして、純粋に動画を楽しむ」というものですかね。「純粋に曲を評価しよう」というイベントがあって、自分好みの曲を集中して探すためにそうしてました。
また、CSSは見た目を変えるのがメインですが、contentプロパティを使えば文字の表示もできます。
注意点 #
とはいえ、Stylusも万能ではないです。
まず、サイトのアップデートなどでHTMLのclassが変わると機能しなくなります。
どのくらいあるかはわかりませんが、フレームワークによってはclassを自動生成するものもあるかと思いますし、その他にも使えない場面があるかもしれません。そういう場合は他の属性で指定して回避するなど工夫する必要がありそうです。
私が使っている範囲だと、YouTubeやニコニコ動画は苦戦した記憶があります。画面レイアウトが特殊だとCSSも複雑になるので、仕方ない部分もあるかも。
また、自分好みにカスタマイズしようとするとCSSの知識がある程度必要になります。とはいえ、ガチガチのWebサイトを作るわけではないので、CSSの初歩だけちょっと勉強すればいろいろできるようになると思います。
さらに、JavaScript部分を変更することはできません。なので、特定のサイトにアクセスしたら自動でリダイレクトする、みたいな運用はできないと思います。JavaScriptをカスタマイズする拡張機能もあった気がするので、そっちを使ってください。
まとめ #
今回はCSSを改造できるブラウザ拡張「Stylus」を紹介しました。要素の非表示、ダークモード化、その他いろいろ……
アイデアと若干のCSSの知識があればあらゆるサイトを自分好みにカスタマイズできますので、ぜひ使ってみてください！