はてなシナー

この記事お内容は古くなっています。今は、もっとクールな方法があります。はてなスターのボタン画像を変更する - はてなダイアリーのヘルプ

はてなスターのスターをしなもんに置き換えてみる。CSSだけで。

/* しなもん */
span.hatena-star-star-container{
 background-image:url("http://mzp.sakura.ne.jp/files/cinnamon.png");
 background-repeat:repeat-x;
 position:relative;
 left:30px;
 top:4px;
 border:1px solid white;
}

span.hatena-star-star-container img[src="http://s.hatena.ne.jp/images/add.gif"]{
 position:absolute;
 left:-30px;
 top:0;
}

img[src="http://s.hatena.ne.jp/images/star.gif"]{
 opacity:0.0;
 width:18px;
 height:13px;
}

• 背景にしなもんを表示して、スターを消す
• visibility:hidden; で消してしまうと、Firefoxでかさねたときのポップアップがなくなる
• SafariとFirefoxで動いた。IEは動かない
• だいぶがんばったけど、Operaだと上手く動きませんでした
  • positon:absoluteでうまく位置指定がいってない
  • クリックできない