Chrome / Firefoxの拡張機能 Stylus の基本的な使い方

ウェブブラウザ(Chrome / Firefox)の拡張機能である“Stylus"の使い方の基本的なところを解説します。


〈目次〉


インストール

Chrome

ChromeウェブストアのStylusのページを開き、「Chromeに追加」のボタンを押してインストール。

f:id:ichbin:20190308112938p:plain

Firefox

Stylusのページを開き、「Firefoxへ追加」のボタンを押してインストール。

f:id:ichbin:20190308113054p:plain

「インストール済みのスタイル」を管理する画面を開く

ツールバーに表示されているStylusのアイコンをマウスでクリックし、「管理」のボタンをクリック。*1

f:id:ichbin:20190310135810p:plain

「インストール済みのスタイル」という画面が開きます。

f:id:ichbin:20190308114227p:plain

新しくスタイルシートを作成する

上述の「インストール済みのスタイル」という画面にて、左側にある「新スタイルを作成」のボタンをクリック。

f:id:ichbin:20190308134109p:plain

「スタイルを追加」という画面が開きます。

f:id:ichbin:20190308143405p:plain

左上の「名前を入力してください」と書かれている欄に、このスタイルシートの名前を自由に入力します。
右上の「コード1」という入力欄に、スタイルシートCSS)を入力します。

このスタイルシートを、例外なくすべてのウェブページに適用させたい場合は、左上の「保存」ボタンを押します。設定はそれで完了です。
特定のウェブサイトやウェブページにのみ適用させたい場合は、下記の手順を実行します。

適用先を指定する

「コード1」に入力したスタイルシートを適用する対象(ウェブサイトや特定のURL)を指定する手順です。
「コード1」の入力欄の下にある「+」のアイコンをクリックすると、

f:id:ichbin:20190308135301p:plain

下記の画像のように選択肢が表示されるので、どれか1つを選び、

f:id:ichbin:20190308134928p:plain

「コード1」に入力したスタイルシートを適用させたいウェブサイトやウェブページが適用対象に含まれるように、右側の入力欄にURLやドメインを入力します。
例えば、Twitterを適用対象にしたい場合は、このように書くことができます。*2

f:id:ichbin:20190308135719p:plain

この入力欄の右側にある「+」のアイコンをクリックすれば、適用先を指定するための新しい入力欄がここに追加されます。

ここまで終えたら、左上の「保存」ボタンを押します。

f:id:ichbin:20190308140401p:plain

「保存」ボタンを押した後は、この画面は閉じてもかまいません。

作成済みのスタイルシートを編集または削除する

「インストール済みのスタイル」の画面で右側に表示されている各スタイルの名前をクリックすると、「スタイルを編集」という画面に入ります。
名前の右側に表示されている×のアイコンをクリックすると、そのスタイルを削除できます。

f:id:ichbin:20190308120818p:plain

適用のオン/オフを切り替える

ツールバーから切り替える

上述の手順で作成したスタイルシートの適用先(この例ではhttp://twitter.com/で始まるURL)に当てはまっているウェブページをブラウザで開いた状態で、ブラウザのツールバーに表示されているStylusのアイコンをマウスでクリックします。

f:id:ichbin:20190308144442p:plain

このウェブページに適用されているスタイルシートの名前が表示されており、それぞれの行頭に、適用のオン/オフを切り替えるチェックボックスがあります。

「インストール済みのスタイル」の画面から切り替える

上述の「インストール済みのスタイル」の画面にて、各スタイルシートの名前の左側にあるチェックボックスにチェックを入れるとオン、外すとオフとなります。

f:id:ichbin:20190308143206p:plain

*1:ブラウザのメニューから開く方法もありますが、説明は割愛します。

*2:この例では、選択肢として「次で始まるURL」を選んでいますが、その他の選択肢を選ぶこともでき、各選択肢に応じて右側の入力欄に入力すべき文字列が異なります。