Chrome拡張StylebotでCSSのカスタマイズをして「注意」マークを付ける。

ふと、webサーフィン(笑)をしていて思ったのですが、読者に記事を募集し原稿料を払うという形式がニュースサイトなどにあります。
中には質がかなりいいかげんなライターも時折いて、誤情報やデマなどに振り回されない為に注意して記事を読むよう、そのライターの名前の前に「注」と大きく表示するCSSのカスタマイズをやってみました。

Google Chrome拡張機能の Stylebot を使って、サイト毎のカスタムCSSを割り当てることができます。
他には有名どころで Stylish なども同様のことができます。
Safariでも Stylish for Safari という機能拡張があります。

細かいインストール方法や設定は飛ばして、おおまかな内容の紹介。
カスタマイズしたいwebページに飛び、CSSボタンを押すとウインドウが開きます。
左上にあるボタンを押し、カスタマイズしたいwebページの箇所をクリック｡するとそこのCSS要素がSelect an Elementに代入されます。
あとは分かりやすいインターフェイスで書かれているので、CSSの知識がある人ならパッと見てすぐに解るかと思います。
CSSは良く分からないという人でも、ライブプレビューが出来るので、結果を見ながら簡単にいじる事が出来ます｡CSSの勉強にも役立つかもしれません。
もう少し自分で細かく設定したいという人でもCSSの直書きも出来るので、融通が利かなくて困る事はないかと思います。
もちろんこれを使って広告を表示させない事も出来ますよ｡

さて今回は注意したい要素に「注」を付ける…ということなので、Edit CSSに以下のソースを書いてみました。

a[href^='http://○○○']:link:before {
    content: "注";
    font-weight: bold ;
    background-color: #f71912 ;
    font-size: 300%;
}

リンク先が○○○のaタグの前に「注」を表示するCSSです。
この書き方は、リンク先によって表示方法を変えたい時に…リンク先がPDFや圧縮ファイルだったりする時にクリックしてしまわないよう区別をする時にも便利です。
例えばzipファイルだと、URLの最後が.zipになっているものという意味で、

a[href$='.zip']:link {
}

と正規表現で書く事ができます。

最後に､これを実際使って表示すると、この様な感じにデカデカと「注」という文字がwebページに加えられます。
beforeの替わりにafterだと後に付きます。

本当はこういう事をしなくても、常に気を付けてネットを回るという習慣を付ける事が大切なのでしょう｡