仕事は母ちゃん

どーってことない脳内と日常の垂れ流しです

ユーザースタイルシートではてなスターの色を変えてみる

この土日は地元のお祭りでした。朝6時には起きて動き回ってたのでぐったりなさっこさんですこんにちは。まあ一番疲れてるのは長男と四男ですけどね。獅子舞は見た目以上に大変だし、太鼓を叩くのも交代要員がいないので大変なのでござる。

獅子頭持ってるのが長男な写真。子供は真ん中にいるのが四男でござる。

休憩中に三男が持ってきたPSPで遊ぶ四男。疲れていてもゲームする元気はあるんやな…。

夫も手伝いとして参加してたので、次男と三男以外は忙しい週末を過ごしてたわけですが。忙しいと現実逃避したくなるもので、ユーザースタイルシート使って黄色いノーマルなはてなスターの色を変えてやろうというしょうもないことをやってたので、方法をご紹介。ただし、Chromeさんでのやり方なので、他のブラウザは知らんです。ごめんねぇ。

まずはStylishというExtensionをインストールします。

Stylish - Chrome Web Store

するとChromeにアイコンが表示されます。

f:id:plutan:20151012164421j:plain

アイコンを右クリックして「オプション」をクリック。

f:id:plutan:20151012164456j:plain

こんな画面が表示されるので「新しいスタイルを作成」をクリック。

f:id:plutan:20151012164529j:plain

これでユーザースタイルシート作成画面が表示されます。

f:id:plutan:20151012164717j:plain

作成するユーザースタイルシートに適当な名前をつけてCSSを記述します。

f:id:plutan:20151012171819j:plain

で、CSSですが、こんな意味があります。

img[src*="s.hatena.ne.jp/images/star.gif"]{
    -webkit-filter: hue-rotate(-140deg);/*色相変更*/
}
span.hatena-star-inner-count{
    color:#e699ff !important;/*スター数の文字色変更*/
}

色相は数値を変更することで色が変わります。数値をどういじればわからん、という人はこちらが参考になるかと。

文字色は色コードを変更することで変えられますが、こちらは下記のサイトを参考にしてください。

Mariのいろえんぴつ 〜色と素材のサイト〜 上田まり子

で、サンプルの通りユーザースタイルシートを作成して適用するとどうなるかというと、こうなります。

f:id:plutan:20151012173238j:plain

まあ自分だけで楽しむものですが、気分転換してみたいときはスターの色を変えてみるのもありじゃないですか?ありですよね?それでは今から家事に邁進しますので、本日はこれにて。

追記

上記の方法でどのサイトに埋め込まれてるはてなスターの色も全て指定された色になります。はてなブログのaddスターアイコンも色変えたい!という場合は

img[src*="s.hatena.ne.jp/images/star.gif"],img[src*="blog.st-hatena.com/images/theme/star/hatena-star-add-button.png"]{
    -webkit-filter: hue-rotate(-140deg);
}

という感じで。