はてなスターをｷﾗｯ☆ってさせてみました - 聴く耳を持たない(片方しか)

以前から、はてなスター用の画像を作って公開しているのですが

 自由に使えるはてなスター素材とは - はてなキーワード
頭蓋骨とかを無駄にバリエーション作ってみたり

鮭の切り身をドット絵で描いたり

オウムガイを描いたり

牛肉を描いたり

とかしてて登録はしたものの……、ま、まぁ、こんな画像を使う人おれへんやろー、って正直、私自身思うわけです。

やはり、オリジナルのはてなスターをモチーフにしたものあれば置き換えやすいですし使い勝手がいいだろうかなー、と思ってこんなのを作ってみました。

オリジナルのはてなスター

まずはオリジナルのこちらがはてなスター。

ｷﾗｯとするはてなスター

ｷﾗｯとします。

回転するはてなスター

クルクルと回転します。

この2つのはてなスターの特徴は、オリジナルのはてなスターとピクセルサイズが同じなのでレイアウトの変化がないこと。
あとは以前に作ったものもついでなので紹介

ピョンと跳んで半回転

ピョンと跳んで一回転

どちらも跳ねて回るのは同じで、回転具合が違うという。個人的にはこれ気に入ってます。

これらは、標準のはてなスターを踏襲しつつアレンジしているので、閲覧者にも慣れやすくさらに「おっ！ちょっと他とは違うな」って思わせるに違いないでしょう。

[どうぞご利用ください。]

設定方法

はてなスターの設定方法は、ブログサービスによっても違うのですが
はてなダイアリーの場合、既に設置されていますから変更するのはCSSを追加すればオッケーです。例えば

ｷﾗｯとさせたい場合

.hatena-star-star-image {/* 通常のスターの設定 */
  /* 置き換える画像の指定 */
  background-image: url(http://img.f.hatena.ne.jp/images/fotolife/r/rikuo/20100316/20100316224513.gif);
}
.hatena-star-green-star-image {/* 緑スターの設定 */
  background-image: url(http://img.f.hatena.ne.jp/images/fotolife/r/rikuo/20100316/20100316224506.gif);
}
.hatena-star-red-star-image {/* 赤スターの設定 */
  background-image: url(http://img.f.hatena.ne.jp/images/fotolife/r/rikuo/20100316/20100316224508.gif);
}
.hatena-star-blue-star-image {/* 青スターの設定 */
  background-image: url(http://img.f.hatena.ne.jp/images/fotolife/r/rikuo/20100316/20100316224505.gif);
}
.hatena-star-purple-star-image {/* 紫スターの設定 */
  background-image: url(http://img.f.hatena.ne.jp/images/fotolife/r/rikuo/20100316/20100316224507.gif);
}