新ブログの該当記事に転送中です。少々お待ち下さい。
(転送されない場合は下記リンクからお進み下さい)

『サイトの CSS を自由に改造できるアドオン』
https://at.sachi-web.com/blog-entry-831.html

このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

サイトの CSS を自由に改造できるアドオン

このエントリーをはてなブックマークに追加
stylish_icon.pngStylish(作者:Jason Barnabe様) - Firefox用アドオン
操作画面


こんにちは、さち です。

今回は、サイトの CSS を自由に改造することができる
便利な Firefox 用アドオン「Stylish」について
まとめていきたいと思います。




サイトのCSSを変更できる

サイトの見た目や使い勝手を簡単に変更できます。

サイトのデザインを変更するための記述方法は
サイト作成時に使う CSS(スタイルシート) と同じなので
CSS の経験がある人には分かりやすく使いやすいはず。

簡単に実際の使い方を追ってみましょう。

  1. ニコアニのメニューのフォントサイズを変更してみます。
    操作画面

  2. ニコアニのページを開いた状態で
    アドオンバーの「Stylishアイコン」→「新しいスタイルを書く」と進みます。
    最後に CSS の適用範囲を選びます(今回は「このURL専用」を選択)。
    操作画面

  3. 調査(Ctrl + Shift + I)を使い CSS を調べてみると
    メニューの部分は「#category_menu_major」という ID が
    付けられているのが分かりました。
    操作画面

  4. CSS と同じ記述方法で
    ID「#category_menu_major」のフォントサイズを変更します。
    通常、該当CSSを最優先させる「!important」を付ける必要はないですが
    サイト側で同じプロパティの指定があるとそちらが優先されてしまいます。
    この場合は必ず「!important」を付けましょう。
    操作画面

  5. 左下の「お試し」をクリックすると
    Stylish で記述した CSS の反映をプレビューできます。
    操作画面

  6. 問題がなければ右下にある「保存」をクリック。
    操作画面

  7. フォントサイズを小さくできました。
    操作画面

例では、フォントサイズを変更してみましたが
もちろん「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 はその範囲内でのみ機能します。
上手に活用しましょう。
操作画面


非常に便利はアドオンですので
気に入った方はぜひ使ってみてください。

   → Stylish のダウンロードページへ行く


【参考になるサイト】

   → CSS namespaces - GitHub[英語] (「namespace」の仕様)
   → ユーザスタイルシートによるカスタマイズ(2) - Stylish - えむもじら様 (「namespace」の仕様)




このエントリーをはてなブックマークに追加




ブログ移転に伴い、コメント受付は終了しました。



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ