スマートフォン Android版FirefoxのCSSカスタマイズ Stylus の使い方・初期設定方法

Stylus

Webブラウザでページを表示する際にはCSSという機能によりデザインが決定されています。そんなCSSを自由に書き換え、デザインを書き換えたり、不要な要素を非表示にすることができるStylusという拡張機能が公開されています。この記事ではAndroidでのStylusの設定方法や使い方をまとめます。

Stylus 設定方法

Androidでは、Chromeなどのブラウザはモバイル版では拡張機能の設定ができません。そのため、webブラウザFireFoxにて拡張機能『Stylus 』を使用します。

Firefoxのインストール

以下のページからFirefoxをインストールします。

Firefox 高速プライベートブラウザー - Google Play のアプリ

プライバシー重視で高速、非営利法人が提供する唯一のブラウザー

play.google.com

Stylus をインストール

拡張機能『Stylus』のインストールを行います。Firefoxのウェブストアにて、配布されているためそちらからインストールを行います。

FireFoxにて以下のページのリンクを開きます。画面の下部に『Firefoxへ追加』というボタンがありますのでそちらをタップします。

Stylusを追加しますか？と問いかけられますので下部の追加を押すことで拡張機能のインストールが完了します。

Stylus firefox

https://addons.mozilla.org/ja/android/addon/styl-u

addons.mozilla.org

CSS設定方法

インストールが完了したら、Firefoxの右上にある『︙』のボタンをタップしてメニューを開き、その中にある『拡張項目』の項目をタップします。

拡張機能マネージャーが開かれますので、その中にある『Stylus』をタップすると、現在のページのCSSの適用状況や設定、管理するページが用事されます。

CSSを適用したいページを開いた状態で、このウィンドウを表示すると『次のスタイルを書く』の項目の下に、現在のページのURLが表示されていることがわかります(上記画像では当ブログ skypenguin.net)。

この状態で、『次のスタイルを書く』ボタンをタップすることで、現在のページに適用するCSSの設定画面に移ります。

このページの画面下部のテキスト入力部分に、必要なCSSコードが入力可能です。

CSSの内容が変わると画面上部の保存ボタンの色が変わります。保存ボタンをタップすることでCSSの設定が可能となります。

CSSの適用範囲の設定

ウェブページを開いた状態で、スタイルを書くを押すと自動的にそのページのCSSを各設定がされますが、この設定項目は変更が可能となっており、CSSを適用するウェブページの指定が可能となっています。

CSSコードを各部分の上にあるボックスにて適用範囲を設定することが可能となっており、初期状態では『次で始まるURL』となっており、そのドメインにある全てのページに適用することになります。

ここをタップすることで、対象とするルールを変更が可能です。

これを『すべて』に変更すれば、全てのWebページに適用するCSSになりますし、『URL』を指定してしまえば、指定したページのみに適用するCSSとすることも可能。ただ、URL指定の場合は、パラメータなどが付加された場合には動かないため、その場合には『次で始まるURL』を使用するとよさそうです。他にも、正規表現を活用した指定もできるようになっています。