Stylusとは Webページのデザインを変更するChrome拡張機能:スタイルシートを任意に変更[使い方]

どんなWebページもHTMLでその構造を記述し、CSS(スタイルシート)でそのデザインを記述する形になっており、ブラウザがそれを解釈して画面に表示している。

そして、CSSは各種設定を上書きすることができるため、自分の好きなように書き換える=デザインを変更することも可能だ。

StylusとはそのCSSを任意のものに変えられる、Google Chrome向けの拡張機能。

CSSの知識がなくても、UserStyles.worldで他のユーザーが提供してくれている「UserCSS」(一種のテーマやデザインテンプレートのこと)を導入すれば、誰でも簡単にデザインを変更することができる。

【スタイルのインストール方法】

各UserCSSのページへ移動
>Installボタンをクリック

なお、UserStyles.world以外のUserCSSをインストールすることもできる。

UserStyles.org Archive(UserStyles.orgで問題が出たため、その内容をアーカイブする目的でつくられたサイト)

Userstyles.orgはStylishという別の拡張機能向けだがStylusでも使える。ただし、やめたほうがいい(注意点参照
freestyler.wsは別の拡張機能用のため直接CSSをインストールすることはできない
openusercss.orgは残念ながら終了

これらのサイトへいちいち飛ばなくても、最新のStylusならば拡張機能アイコンをクリックして表示されるポップアップの下部にある検索欄から直接サーチして、簡単にインストールすることもできる。

自分でカスタマイズする場合はCSSを扱う以上、その基礎的な知識がどうしても必要になるが、形式は単純なので背景色を変えるだけなどのシンプルなことならば誰にでも可能。

基本的にはサイト(ドメイン・URL)単位でそれぞれ適用することになるが、ひとつのスタイルをすべてのサイトや複数のドメインのサイトに適用することもできるようになっている。

逆にひとつのサイトに複数のスタイル(テーマ)を適用することも可能で、その個別のものや全体を簡単にオン/オフすることができる。

Chrome拡張機能のページ

* ChromeだけでなくFirefox、Operaにも対応。
* ChromiumベースのMicrosoft Edgeでも動くはず。

ポイント

  • カラーピッカー機能(CSSの色表示の部分をクリック/ショートカットキー)
  • インストールしたUserCSSの自動アップデート

使い方

「エディターモード」を開く。

デザインを変更したいページにアクセス
>ブラウザ画面右上の拡張機能「Stylus」のアイコンをクリック
>「次のスタイルを書く」以下に表示されるURLのドメイン名部分(左側)かそれ以降の部分(右側)をクリック

あとは画面右側にある「コード」テキストエリアの入力欄に任意のCSSを記述し、画面左上の「保存」ボタンを押すだけ。

「自動プレビュー」のチェックボックスがオンになっていれば、ページをリロードしなくても変更がすぐに反映されるため確認しやすい(Webページの画面をいちいちリロードする必要はない)。表示がおかしくなった場合のみ更新してみよう。

「書式整形」は、CSSのテキスト部分をきれいに整形(フォーマット)してくれる。

【適用するサイトを変更】

通常は初期設定のままで問題ないが、特定のスタイルの適用範囲を変えたい場合、右ペイン下部のスタイルを適用したいURLの指定部分を変更する。

左のプルダウンメニューから適用対象を選択
>右の入力欄にURLやドメインを入力

・URL:URL内のどこかに一致、または完全一致
・次で始まるURL:URLの先頭部分のみ一致(「https://example.com/abc/」のように通信プロトコルやドメイン以降も含む)
・ドメイン上のURL:ルートドメイン名、またはサブドメイン名のみ一致(「https://」や「https://example.com/abc/tx.html」などドメイン以降の部分は含まない)
・正規表現に一致するURL:プログラミングでよく使われる正規表現という形式で指定

* 条件のひとつである「正規表現」とはテキストを検索する条件を設定するものなのだが、初心者にはかなりややこしく通常はプログラマ向けのものなので無理に使うのはやめておこう。

「+」ボタンをクリックすることで、同じ方法で複数の条件を追加することも可能。

例:
すべてのサイトに適用
プルダウンメニュー「正規表現に一致するURL」
入力欄「.*」

特定のURLのみに適用
プルダウンメニュー「URL」
入力欄(URLをそのまま記述)

公式サイトの情報

Stylus公式サイト

Stylusの使い方やそのためのCSSの書き方、そしてUserCSSの作り方などかなりくわしいことが掲載されているが、そのほとんどが開発者向けの内容で初心者には難しい。

この拡張機能の使い方に慣れて、CSSの基本がわかってきたら内容が理解できるようになっているはず。

注意点:Stylishとは別物

このStylusという拡張機能、元々はStylishという別の拡張機能から派生したものだが、そのきっかけとなったのが後者の提供者SimilarWeb社が勝手にユーザーの全閲覧履歴を収集していたことにユーザーが反発したためだった。

上記の理由からStylishはChromeウェブストアから強制的に削除されたものの、のちに復活し、しかも一部の行動履歴を今も収集しつづけている。個人を特定しない形でのデータ収集だと説明しているが、要は懲りずに別の形で継続しているということだ。

ストアのページを見るとインストール数が多くて評価が高いように思えるが、これらはほとんどが問題発覚以前のもの。本来なら問題行為をしていた時期のレビューなどは削除すべきなのだが、この辺、Chromeウェブストアは(というよりGoogleは)いい加減なので信用しないほうがいい。

機能的には変わりがないどころか、Stylusのほうが軽快で使いやすいくらい。

名前が似ていてややこしいがStylishではなくかならず「Stylus」のほうを使うようにしよう。

ただ問題がひとつ残っており、他のユーザーが作成したスタイルを数多く提供しているサイト「Userstyles.org」の運営は、問題を起こしたStylishの運営元と同じままなので、提供されているスタイルの導入はともかく拡張機能を間違えてインストールしないように気をつける必要がある(Userstyles.orgの拡張機能へのリンクはすべてStylishのほうになっている)。

上記のとおり、すでに同様のサイトが別に複数運営されているので、できるだけそちらを使うようにしよう。ちなみに、拡張機能のStylus設定画面などでは、もうUserStyles.orgは残っていないので安心だ。