ADD STARのアイコン編成

HTML・CSS講座


今回ははてなダイアリーのADD STARの変更と発展について解説していきます
まず初めに

●ADD STARとは



日々ブログを読んでいていいなと思っても、
コメントを書いたりトラックバックを送るのは敷居が高く、
気持ちが十分に書き手に伝わらずに終わってしまうことも多いでしょう。


はてなスターは既存のブログにワンクリックで☆がつけられます。
あなたのいいなと思った気持ちを☆に変えて、世界のブログに☆をつけよう！
ブログに☆を付けよう


ブログに書かれた各エントリーに表示された「Add Star」ボタンを
クリックすることで、簡単に☆を付けることができます。

ADD STAR スター
ちなみにこれがADD STARでこれをクリックして出来たんがスター


ソースがこちら

黄

.hatena-star-star-image {background-image: url();}
緑

.hatena-star-green-star-image {background-image: url();}
赤

.hatena-star-red-star-image {background-image: url();}
青

.hatena-star-blue-star-image {background-image: url();}

ADD
.hatena-star-add-button-image {background-image: url();}
コメ無し
.hatena-star-comment-button-image {background-image: url();}
コメ有り
.hatena-star-comment-button-image-active {background-image: url();}



詳細&補足

  • ソースは　url()のカッコ内にて画像のURLを入れる
  • このソースはCSS欄に記入してください
  • 紫がありませんがソース上パープルと打てば作れます
  • コメントはスターフレンドように作られているコメ欄です

画像を提供してくれてるはてなキーワードはこちら

自由に使えるはてなスター素材とは編集




作者


一応こんなものかな、何か不具合点があればお知らせください
いよいようそメモシアターが来るなww