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に保存されているスタイルの一覧を見ることができます。
スタイルの名前をクリックすれば編集画面が開きます。名前の前のチェックボックスのチェックを外すと、スタイルが無効になります。名前の後ろの×をクリックすれば、スタイルが削除されます。