地雷持ちが快適にpixivを楽しむための備忘録。

Chrome拡張「Stylish」を使ったユーザースタイルシートの設定方法

2018/07/03にStylishはポリシー違反でFirefoxのブロックリストに追加され、その後Chromeウェブストアからも削除されました。
現在まだStylishが使えているという方も、セキュリティの観点から削除することをおすすめします。
代替として、Stylusの使い方をご覧ください。

GoogleChromeでユーザースタイルシートを設定する手段の一例として、Chrome拡張「Stylish」を紹介します。
なお、StylishはFirefoxのアドオンにもありますが、Chromeのものとは操作性が異なるようです。
FirefoxのStylishの使い方については、「Firefoxアドオン「Stylish」を使ったユーザースタイルシートの設定方法」をご覧ください。

まずは、ChromeウェブストアのStylish配布ページにアクセスしましょう。
そうしたら、右上の「CHROMEに追加」と書かれた青いボタンをクリック。

“「Stylish」を追加しますか？”というダイアログボックスが表示されるので、「拡張機能を追加」をクリックしてください。
右上のボタンが緑色の「CHROMEに追加済み」というものに変われば、インストール完了です。

これでStylishを使うことができるようになりました。

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

すると下の画像のようなポップアップが表示されますので、右上の点が縦に３つ並んでいるボタンをクリックしてください。

次に「スタイルを作る」をクリック。

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

名前は適当に分かりやすいものを付けてください。
画面右側の「セクション」と書かれた下の「コード」の欄が、ユーザースタイルシートのCSSを入力するところです。（画像では一例として当サイトのCSSを入力しています）
コード欄の下の「適用先」は、スタイルを適用するページのURLを指定する箇所です。

最初は自動でpixivの全ページで有効になるようになっていますが、変更することも可能です。
URLの指定方法は「URL（完全一致）」「次で始まるURL（前方一致）」「ドメイン上のURL」「正規表現に一致するURL」の四つから適したものを選べます。また、URLを追加することもできます。
「削除」をクリックするとURLは消えます。すべてのURLを削除した場合、スタイルはすべてのWebページに適用されます。

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

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

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

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

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

作成したスタイルを操作したいときは、この状態のアイコンをクリックして、ポップアップ上部右側の「インストールされたスタイル」をクリックしてください。

そのページで適用されているスタイルが表示されます。

「無効にする」ボタンを押すとスタイルが無効になります。
ペンのマークをクリックすると、上記の編集画面が表示されます。
ゴミ箱のマークをクリックすれば、スタイルが削除されます。

すべてのスタイルを管理したいときは、右上の点のマークを押して「スタイルを管理」をクリックしてください。

今までに作成・インストールしたスタイルの一覧を見ることができます。