Stylus
Webブラウザでページを表示する際にはCSSという機能によりデザインが決定されています。そんなCSSを自由に書き換え、デザインを書き換えたり、不要な要素を非表示にすることができるStylusという拡張機能が公開されています。この記事ではAndroidでのStylusの設定方法や使い方をまとめます。
Stylus 設定方法
Androidでは、Chromeなどのブラウザはモバイル版では拡張機能の設定ができません。そのため、webブラウザFireFoxにて拡張機能『Stylus 』を使用します。
Firefoxのインストール
以下のページからFirefoxをインストールします。
Stylus をインストール
拡張機能『Stylus』のインストールを行います。Firefoxのウェブストアにて、配布されているためそちらからインストールを行います。

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

Stylusを追加しますか?と問いかけられますので下部の追加を押すことで拡張機能のインストールが完了します。
Stylus firefox
CSS設定方法
インストールが完了したら、Firefoxの右上にある『︙』のボタンをタップしてメニューを開き、その中にある『拡張項目』の項目をタップします。

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

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

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

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

ウェブページを開いた状態で、スタイルを書くを押すと自動的にそのページのCSSを各設定がされますが、この設定項目は変更が可能となっており、CSSを適用するウェブページの指定が可能となっています。
CSSコードを各部分の上にあるボックスにて適用範囲を設定することが可能となっており、初期状態では『次で始まるURL』となっており、そのドメインにある全てのページに適用することになります。
ここをタップすることで、対象とするルールを変更が可能です。
これを『すべて』に変更すれば、全てのWebページに適用するCSSになりますし、『URL』を指定してしまえば、指定したページのみに適用するCSSとすることも可能。ただ、URL指定の場合は、パラメータなどが付加された場合には動かないため、その場合には『次で始まるURL』を使用するとよさそうです。他にも、正規表現を活用した指定もできるようになっています。
コメント
はじめまして。突然のご連絡、失礼いたします。
万博の予約について調べていた際に、又三郎様のブログ「人鳥日記」を拝見し、FirefoxのダウンロードやStylusの設定を見様見真似で試してみたところ、無事に設定することができました。
おかげさまで、予約もスムーズに行えるようになり、本当に感謝しております。ありがとうございます!
そのような中で、最近少し困っていることがあり、厚かましいお願いとは承知のうえで、又三郎様のお知恵をお借りできればと思い、ご連絡させていただきました。
現在、万博の予約サイトをカスタマイズして使用しているのですが、最近では「予約可能なパビリオンのみ表示」にしても、予約解放時間にあらかじめページで待機している方に押し負けてしまうことが増えてきました。
そこで、「説明文だけを非表示にする」という形で少しでも読み込みを早くしたいと考えています。
ただ、私にはCSSの知識が乏しく、ChatGPTにも相談してみたのですが、うまくいかず困っています。
お忙しいところ大変恐縮ですが、「余計な説明文だけを非表示にするCSS」の記述方法をご教示いただけないでしょうか。
不躾なお願いで申し訳ありませんが、どうぞよろしくお願いいたします。
申し訳ないのですが、私の手元だと抽選ページが開けないため、細かく見れないので対応がちょっと難しいです。
少し調べてみたのですが、以下のサイトだとより余計な情報を排除した設定を紹介されているようですので、参考にできるかもしれません。
https://good-fortune-shrine-cascade.com/banpaku-osaka_yoyaku-method/