Stylish（作者：Jason Barnabe様） - Firefox用アドオン
こんにちは、さち です。
今回は、サイトの CSS を自由に改造することができる
便利な Firefox 用アドオン「Stylish」について
まとめていきたいと思います。
サイトのCSSを変更できる
サイトの見た目や使い勝手を簡単に変更できます。
サイトのデザインを変更するための記述方法は
サイト作成時に使う CSS（スタイルシート） と同じなので
CSS の経験がある人には分かりやすく使いやすいはず。
簡単に実際の使い方を追ってみましょう。
- ニコアニのメニューのフォントサイズを変更してみます。
- ニコアニのページを開いた状態で
アドオンバーの「Stylishアイコン」→「新しいスタイルを書く」と進みます。
最後に CSS の適用範囲を選びます（今回は「このURL専用」を選択）。
- 調査（Ctrl + Shift + I）を使い CSS を調べてみると
メニューの部分は「#category_menu_major」という ID が
付けられているのが分かりました。
- CSS と同じ記述方法で
ID「#category_menu_major」のフォントサイズを変更します。
通常、該当CSSを最優先させる「!important」を付ける必要はないですが
サイト側で同じプロパティの指定があるとそちらが優先されてしまいます。
この場合は必ず「!important」を付けましょう。
- 左下の「お試し」をクリックすると
Stylish で記述した CSS の反映をプレビューできます。
- 問題がなければ右下にある「保存」をクリック。
- フォントサイズを小さくできました。
例では、フォントサイズを変更してみましたが
もちろん「display: none;」の記述も使えるので
Adblock Plus の代わりに要素の非表示用として使うのもよいかも。
ちなみに、Stylish で作成した各サイト用の CSS の適用は
簡単にアドオンバーから一時的に外すことができます。
CSS の適用範囲について
Stylish で記述した CSS の適用範囲については
「@-moz-document」の後の記述（赤線の部分）で決まります。
ここが少しつまずきやすいので別途まとめておきます。
■url("http://www.nicovideo.jp/")
記述した URL と完全一致するページのみに適用されます。
例では、ニコニコ動画のトップページ（http://www.nicovideo.jp/）にのみ
適用されます。
■url-prefix("http://www.nicovideo.jp/")
記述した URL と前方一致したページに適用されます。
例では、ニコニコ動画のトップページ（http://www.nicovideo.jp/）以外に
各動画ページ（http://www.nicovideo.jp/watch/sm1234）等にも適用されます。
■domain("nicovideo.jp")
記述した URL（ドメイン） を含むページすべてに適用されます。
例では、ニコニコ動画のトップページ（http://www.nicovideo.jp/）や
各動画ページ（http://www.nicovideo.jp/watch/sm1234）はもちろん
さらに、ニコニコチャンネル（http://ch.nicovideo.jp/）や
ニコニコ静画（http://seiga.nicovideo.jp/）等のサブドメインにも適用されます。
■regexp("^http:\/\/www\.nicovideo\.jp\/watch\/sm[1-9][0-9]*")
入力した正規表現にマッチするURLのページに適用されます。
例では、「sm + 数字」のURLを持つ動画ページにのみ適用されます。
@-moz-document の { } 内に書いた CSS はその範囲内でのみ機能します。
上手に活用しましょう。
非常に便利はアドオンですので
気に入った方はぜひ使ってみてください。
【参考になるサイト】
→ CSS namespaces - GitHub[英語] （「namespace」の仕様）
→ ユーザスタイルシートによるカスタマイズ(2) - Stylish - えむもじら様 （「namespace」の仕様）
コメント