Chrome拡張およびFirefoxアドオン「Stylus」を使ったユーザースタイルシートの設定方法

  • 2018/07/08

GoogleChromeやFirefoxでユーザースタイルシートを設定する手段の一例として、「Stylus」を紹介します。
StylusはStylishをフォークした拡張機能であり、操作性がよく似ています。

Stylusをインストールする(GoogleChromeの場合)

まずは、ChromeウェブストアのStylus配布ページにアクセスしてください。
次に、右上の「CHROMEに追加」と書かれた青いボタンをクリック。

「Stylus」を追加しますか? というダイアログボックスが表示されるので、「拡張機能を追加」をクリックしてください。

以上でインストールは完了です。

Stylusをインストールする(Firefoxの場合)

まずは、FirefoxのStylus配布ページにアクセスしてください。
次に、「Firefoxへ追加」と書かれた青いボタンをクリック。

「Stylus」を追加しますか? というダイアログボックスが表示されるので、「追加」をクリックしてください。

以上でインストールは完了です。

スタイルを作成する

ここからはGoogleChromeもFirefoxも共通です。
まずは、ユーザースタイルシートを適用させたいサイトに移動してください。当サイトのスタイルであればpixivで使うものなので、pixivのどこかのページにアクセスしてください。
そうしたら、ツールバーの拡張機能を表示するところにあるStylusのアイコンをクリック。

下のようなダイアログボックスが表示されるので、「次のスタイルを書く」の下をクリックしてください。

スタイルの編集画面が表示されます。

名前はお好きなものを付けてください。
画面右側の「セクション」と書かれた下の「コード」の欄が、ユーザースタイルシートのcssを入力するところです。当サイトで配布しているcssであれば、コピペしてここに貼り付けてください。

適用先を指定

コード欄の下の「適用先」で、スタイルを適用するページのURLを指定することができます。
pixivのどこかのページからスタイルを作成した場合、最初は自動でpixivの全ページで有効になるようになっていますが、変更することも可能です。

URLの指定方法は「URL(完全一致)」「次で始まるURL(前方一致)」「ドメイン上のURL」「正規表現に一致するURL」の四つから適したものを選べます。
たとえば、「URL」を選んで「https://www.pixiv.net/」を指定すればpixivのトップページでのみ有効になりますし、「次で始まるURL」で「https://www.pixiv.net/novel/」を指定すればpixiv小説ページの全てで有効になります。
また、「追加」ボタンを押せば複数のURLを指定することができます。うまい具合に指定するページを選ぶことで、ユーザースタイルシートによるレイアウト崩れを防止できます。
「削除」をクリックするとURLは消えます。すべてのURLを削除した場合、スタイルはすべてのWebページに適用されます。

セクションを追加

さらに、「適用先」の下の「他のセクションを追加」というボタンをクリックすると、前に入力したものとは別のcssを入力することができるようになります。

このとき適用先を指定するには、「個別指定」をクリックしてください。

新しく入力したcssには、先程とは異なるURLを指定することができます。
たとえば、一つのスタイルの中で、pixivイラストページ用のスタイルシートと、pixiv小説ページ用のスタイルシートを同時に管理することが可能です。

(上の画像では、例として当サイトのcssを入力しています。)

スタイルを保存する

すべての設定が終わったら、一応「有効」にチェックが入っているか確認してから、「保存」ボタンをクリックしてください。

これでスタイルの作成は完了です。

スタイルの編集や削除

スタイルが有効になっているページでは、Stylusのアイコンの右下に数字が表示されます。

この状態のアイコンをクリックすると、下のようなダイアログボックスが表示されます。

右上のペンのマークをクリックすると、上記の編集画面が表示されます。ゴミ箱のマークをクリックすれば、スタイルが削除されます。

また、アイコンに数字が表示されていない場合でも、「管理」をクリックすればStylusの管理画面を開くことができます。

管理画面では、Stylusに保存されているスタイルの一覧を見ることができます。

スタイルの名前をクリックすれば編集画面が開きます。名前の前のチェックボックスのチェックを外すと、スタイルが無効になります。名前の後ろの×をクリックすれば、スタイルが削除されます。

<Sponsored Links>

▲ ページの先頭に戻る ▲

inserted by FC2 system