時間を表す要素を強調表示するUserCSS

ツイッターを見ていると、たまに何年も前のニュースに怒っている人を見かける。そういう人がいたら無視したり、ミュートしたり、フォローを解除したり、などいろいろな手でスルーできるけど、自分もいつ昔のニュースに怒ってしまうか分からない。せめて、いつのニュースなのかがすぐに分かれば、少しはそういう事故を防げるのではないか。

基本的に time 要素を強調すれば多くのサイトで通用するけど、日時を表すのに time 要素を用いていないサイトもあるので、個別対応している。 普段使いのChromeにはStylusを入れて、以下のようなUserCSSを適用している。

time {
    font-size: 500% !important;
    color: red !important;
}

/* Yahoo! ニュース */
.hdLogoWrap .source {
    font-size: 500% !important;
    color: red !important;
}

こんな感じで、いつ配信されたニュースなのか明快になる。

gyazo.com *1

おもしろいのは、 time 要素を片っ端から目立たせているので、ツイッターのタイムラインも愉快な見た目になる。

gyazo.com

GIGAZINEを見るとスタイルがめちゃくちゃになっておもしろい。

gyazo.com