はてなスターをアニメにしたよ

日頃巡回するブログの中で、はてなスターが普通の☆じゃないブログがあって「いいなー」と思っていたんですが、調べてみたら存外簡単に出来たので、やり方をメモっておきます。

今回は右のような丸っこいスターを作ってみました。たまに手を振ります（そう見えるかな？）。手を振る間隔はもっと長めに設定してあるのですが、右の画像はデモ用に早めに手を振ります。

GIFアニメーションを作る

まずは貼り付けるためのGIFアニメーションを作ります。これはパラパラ漫画みたいなものです。なお、アニメーションじゃなくても良い場合は画像をそのまま設定すればいいので次のセクションに進んでください。

まずドットで適当に絵を描きます。僕はEdgeっていうフリーソフトを使いました（http://www.tkb-soft.hmcbest.com/program/win/edge/index.htm）。大体右の画像みたいな感じ。絵心無いですね。12x12ピクセルで24倍表示でドットを打っていきました。スターの周りに淡い色を足すとなんとなくそれっぽく見える気がします。この調子で必要な絵を書いていきます。小さいから結構早く書けるんじゃないかなー。
これらの画像をgif画像として保存したら、それらを使ってパラパラ漫画を作ります。必要なソフト探していたら、下のような便利なサイトに当たりました。「簡単なGIFアニメを作ってみよう！」の「GIFアニメ作成ソフト」をクリックしてください。gif画像を適当にアップロードして時間を調整するだけですぐにgifアニメーションが作れます。

うまく出来たら、作成したGIFアニメーションをダウンロードします。

はてなスターに設定する

使いたいスター画像が作れたら、適当なところにアップロードします。はてなのアカウントを持っている人なら、はてなフォトライフでいいと思います。アップロードしたら、「Myフォト」からスターの画像を開いて下さい。右クリックしてプロパティを選べば、画像のURLが出てくるはずです。
画像をアップロードしたら、はてなスターのボタン画像を変更する - はてなダイアリーのヘルプに従いはてなスターの設定を行います。はてなダイアリーを使っている人なら、管理メニュー→デザイン→詳細→スタイルシートに

.hatena-star-star-image {
  background-image: url(ここにＵＲＬ);
}

でＯＫです。カラースターとかも設定できるんですね。ほへー。一時スター（Add Starボタンを押した後に、一瞬付くスター）くらいは作っておくかなぁ。