Firefoxアドオン「Stylish」を使ったユーザースタイルシートの設定方法
- 2016/12/10
2018/07/03、Stylishはポリシー違反でFirefoxのブロックリストに追加されました。
代替としては、Stylusの使い方をご覧ください。
ユーザースタイルシートを設定する手段の一例として、Firefoxアドオン「Stylish」を紹介します。
なお、StylishはGoogleChromeの拡張機能にもありますが、Firefoxのものとは操作性が異なるようです。
Chrome拡張の方のStylishの使い方については、「Chrome拡張「Stylish」を使ったユーザースタイルシートの設定方法」をご覧ください。
１．Stylishをインストールする
まずは、Stylish :: Add-ons for Firefoxにアクセスしましょう。
そして「Firefoxへ追加」という緑のボタンをクリックしてください。
下の画像のようなダイアログボックスが表示されるので、「インストール」をクリックしてください。
すると下のように表示されますので、「今すぐ再起動」をクリック。
Firefoxが再起動されれば、インストール完了です。
２．編集画面を開く
まずは、ユーザースタイルシートを適用したいページに移動してください。当サイトのスタイルシートであればpixivで使うためのものなので、pixivのどこかのページにアクセスしてください。
そうしたら、ツールバーのアドオンを表示するところにStylishのアイコンが追加されているはずなので、それをクリックしてください。
すると下の画像のような表示が出ますので、「新しいスタイルを書く」→「pixiv.net専用」をクリック。
（ちなみに、このページでは説明しませんが、「このサイト用のスタイルを探す」をクリックすると他の人が作ってくれた便利なスタイルをインストールすることができます）
そうすると、下のようなStylishの編集画面が開きます。
これでユーザースタイルシートを設定する準備が整いました。
３．URLの指定
編集画面の3行目の「@-moz-document」から始まる箇所は、スタイルシートを適用するURLを指定しています。
画像では「@-moz-document」に続くのは「domain("pixiv.net")」になっていますね。
「domain("XXX.com")」は「URLのドメイン名が "XXX.com" のページで有効」という意味です。
ここを「url("http://XXX.com/yyy.htm")」にすると、「URLが "http://XXX.com/yyy.htm" のページのみで有効」になります。
「url-prefix("http://XXX.com/zzz/")」なら、「URLが "http://XXX.com/zzz/" で始まるページで有効」という意味になります。
具体例を挙げてまとめると下記のような感じです。
- 「domain("pixiv.net")」→pixivの全ページに適用される
- 「url("http://www.pixiv.net/novel/")」→pixivの小説トップページのみに適用される
- 「url-prefix("http://www.pixiv.net/member_illust.php")」→pixivの各イラスト個別ページで適用される
細かく設定できるので、自分がスタイルシートを使いたいページのみで適用することが可能です。
３．スタイルを書く
「@-moz-document〜」のあとの {} の中がスタイルを書く場所です。
ここに適用させたいユーザースタイルシートのCSSを入力してください。
一例として当サイトのCSSを入力してみると、下のようになります。
さらに、「@-moz-document」から始まるURL指定と {} を追加すると、前に入力したものとは別のスタイルシートを入力することができるようになります。
新しく入力したスタイルシートには、先程とは異なるURLを指定することができます。
たとえば、一つのスタイルの中で、pixivイラストページ用のスタイルシートと、pixiv小説ページ用のスタイルシートを同時に管理することが可能です。
すべての設定が終わったら、左上の「保存」ボタンをクリックしてください。これでスタイルが保存されます。
スタイルを編集したいときは、Stylishのアイコン→「スタイルを管理」をクリックしてください。
設定したスタイルの編集・無効化／有効化・削除が行えます。