はてなスターのボタン画像を変更する

Hatena::Diary

はてなダイアリー ヘルプ

はてなスターのボタン画像を変更する

はてなスターでは、標準ではオレンジ色のhttp://s.hatena.ne.jp/images/star.gif星の画像が表示されるようになっていますが、この星の画像は、自分の好きなものに変更することができます。画像を、あなたのブログやサイトにもっとよくあうものに変更すれば、はてなスターをより楽しく使うことができるでしょう。

画像を変更するには、まずは使いたい画像を用意して、それをどこかにアップロードしておく必要があります。ブログサービスであれば、画像をアップロードする仕組が用意されている場合も多いので、それを利用するのもよいでしょう。はてなのフォトシェアリングサービス「フォトライフ」を使うこともできます。


画像を用意したら、自分のはてなダイアリー上部の「管理」をクリックして、管理ページの左メニューから [デザイン] → [デザイン編集] を選択します。そして、ページ上部のタブをクリックして「詳細」に切り替えます。

f:id:mizuno_takaaki:20070914172916p:image

そして、「スタイルシート」の項目に以下の内容を追記します。その際に、URLをあなたが用意した画像のURLに書き換えてください。

.hatena-star-star-image {
  background-image: url(http://example.com/star.gif);
}

f:id:mizuno_takaaki:20070914172915p:image

たとえば、☆をハート()に変える場合は以下のような指定を行います。

.hatena-star-star-image {
  background-image: url(http://f.hatena.ne.jp/images/fotolife/h/hatenadiary/20070914/20070914173909.gif);
}

そのほか、☆画像を変更した日記一覧をはてなスター日記でご紹介しています。よろしければご覧ください。

カラースター画像の指定の仕方

通常のノーマルスターに加え、各色のカラースターに応じた画像を指定することが可能です。カラースターの画像を変更するには、CSSを以下のように設定します。上から順に、下記のカラースターを指定します。

  • グリーンスター
  • レッドスター
  • ブルースター
  • 一時スター(Add Starボタンを押した後に、一瞬付くスター)
.hatena-star-green-star-image {
  background-image: url(http://example.com/example_0.gif);
}
.hatena-star-red-star-image {
  background-image: url(http://example.com/example_1.gif);
}
.hatena-star-blue-star-image {
  background-image: url(http://example.com/example_2.gif);
}
.hatena-star-temp-star-image {
  background-image: url(http://example.com/example_3.gif);
}

そのほかの画像の変更方法

ちなみに、Addボタンや、コメントボタンも同様にして変更が可能です。それぞれ、以下の内容を同じように追記してください。この場合も、URLを自分がアップロードした画像に置き換えてください。

http://s.hatena.ne.jp/images/add.gifAddボタン
.hatena-star-add-button-image {
  background-image: url(http://example.com/add.gif);
}
http://s.hatena.ne.jp/images/comment.gifコメントボタン(コメントなし)
.hatena-star-comment-button-image {
  background-image: url(http://example.com/comment.gif);
}
http://s.hatena.ne.jp/images/comment_active.gifコメントボタン(コメントあり)
.hatena-star-comment-button-image-active {
  background-image: url(http://example.com/comment_active.gif);
}

省略数字のスタイルも変えてみよう

はてなスターでは、ついたスターの数が増えてくると、すべてのスターが表示される代わりについたスターの数が表示されるようになります。このスタイルを変更することもできます。

その場合も、CSSで記述します。

.hatena-star-inner-count {
  color: #f4b128;
  font-weight: bold;
  font-size: 200%;
  padding: 0 8px;
}

このように設定した場合には、数字の色を「#f4b128」に、フォントのスタイルを太字(bold)に、フォントのサイズを200%に、そして上下のスペースを0ピクセル、左右のスペースを8ピクセルに指定しています。

f:id:mizuno_takaaki:20070914174713p:image

ほかにも、以下のように数字の後ろに画像を表示させることもできます(この場合は、その画像をアップロードしておく必要があります)。

.hatena-star-inner-count {
  background-image: url(http://example.com/background.gif);
}

ページ内に複数の画像を指定する

スタイルシートの設定を使い分けることで、同じページ内に複数の画像を指定することも可能です。たとえば、blueクラスとredクラスで追加ボタンの画像を変更したいときは、以下のように指定することができます。

div.blue .hatena-star-add-button-image {
  background-image: url(http://example.com/add_blue.gif);
}
div.red .hatena-star-add-button-image {
  background-image: url(http://example.com/add_red.gif);
}

関連する情報