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

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

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

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • Windows:目的毎,ファイルの種類(拡張子)毎に既定アプリを変更 (11/25)
  • Windows:ヘッドホン(イヤホン)から音が出ないときの対処法 (11/23)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    サイトの 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」の仕様)









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




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





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

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

    ブログパーツ