Hatena::ブログ(Diary)

はてなスター日記 このページをアンテナに追加 RSSフィード

はてなスタッフのはてなスターに関する日記です。
使い方に関するご質問、不具合報告やご要望は、お問い合わせ窓口で承ります。
使い方のコツなどを知りたい時は、人力検索はてなの「はてなの使い方」カテゴリーをご利用ください。
※コメント欄へのご質問には対応できない場合がございますのでご了承ください。
 | 

2007-07-07 はてなスターをブログに設置するには

もっとカスタマイズをしよう

07:51 | もっとカスタマイズをしようを含むブックマーク

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

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

画像を用意したら、はてなスターを貼り付けたページのヘッダにて、以下のようなCSSを記述します。

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

指定している「http://exapmle.com/star.gif」というURLを、あなたが用意した画像のURLに置き換えてください。ブログサービスを利用している場合は、テンプレートや、CSSを設定する項目を探して、そこに記述してください。ブログによっては、この後再構築をする必要があります。

f:id:hatenastar:20070714163800p:image

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

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

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

スターの表示位置を変更する

ちょっと難易度は高くなりますが、JavaScriptに手を入れることで、スターを出す位置を変更することも可能です。そのためには、Hatena.Star.EntryLoaderクラスのloadEntriesメソッドを書き換えます。このメソッドは、ブログごとに修正が必要になるメソッドです。

コメントとスターのデータを表示している部分は、以下のようになっています。

var cc = Hatena.Star.EntryLoader.createCommentContainer();
header.appendChild(cc);
var sc = Hatena.Star.EntryLoader.createStarContainer();
header.appendChild(sc);

ここでは、タイトル要素の一番後ろに両方をくっつけているため、タイトルの後ろにそれらが表示されるようになっていますが、これを違う場所に埋め込むよう、コードを書き換えることで、好きな場所に表示させることが可能です。

具体的な方法はここでは紹介しませんが、興味があったら、ぜひチャレンジしてみてください。

foodpfoodp 2007/07/21 23:23 h3 以外を用いたタイトルに対処する方法の記述ですが,
Hatena.Star.headerTagAndClassName
じゃなくて,
Hatena.Star.EntryLoader.headerTagAndClassName
かなと思うんですがどうでしょう(PukiWiki で試してみたら,後者の場合にちゃんと動きました).もし何かこちらの勘違いならすみませんが.

yamaco_coyamaco_co 2007/08/17 10:41 BlognPlusにも、はてなスターをブログに設置可能です。
http://www.blogn.org/


Blogn+に、はてなスターを付けてみました。
http://yamaco.jp/weblog/

hatenastarhatenastar 2007/08/27 05:41 foodpさん、ご指摘有難うございます。ご指摘のとおりでしたので、修正しました。

yohmeiyohmei 2007/12/22 16:29 Bloggerにスターを設置してみたのですが、なぜかスター追加ボタンと☆がタイトルの下に設置されてしまいます。☆も縦方向に追加されていきます。。どうやって横にするのかわかりません。。h3タグのところも直したのですが。。

HoppymanHoppyman 2007/12/26 15:02 >yohmeiさん、
ウィジットのテンプレートの .post h3 の前に
.post-title img {
display: inline;
}
を追加したら横に表示できました。

youkosekiyoukoseki 2008/11/09 22:45 E:first-childが二つあるようです。

NobuyanNobuyan 2009/03/14 02:58 初めまして、Nobuyanです。Bigrobe ウェブリブログでプログ(Blog)をやっています。
ウェブリブログで、「はてなスター」を導入する場合はどうすれば良いのでしょうか?
大変恐縮ですが、初心者で分かりつらいので、もし良かったら導入の手順を教えて頂ければ幸甚です。
今後とも宜しくお願い致します。

tom_nounaitom_nounai 2009/11/04 01:41 タグを貼りなおすために登録済みのブログのトークンをもう一度確認したいのですが
どうしたらよいですか?

massatmassat 2010/02/15 18:14 こんにちは。
上記の設置例の中の、

・WordPressに「はてなスター」を設置してみた

のエントリですがBlogの閉鎖を予定しておりまして、リンク削除していただいてよろしいでしょうか?

RanteRante 2010/03/24 21:59 ヤプログでも出してほしいなあ

Platinum-1997Platinum-1997 2011/05/11 16:24 たまに変更するとスター自体が出ないときがある

kuromajosankuromajosan 2012/02/11 16:05 amebloの「フリープラグイン」に入力しても反映されないのですが、違うところに貼り付けるのですか?

kaoritenakaoritena 2012/04/06 18:04 私のブログではてなスター設置箇所に2,3日前から「<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="" width="20" height="20" style="border: none;" />」なコードが出てきちゃうようになったのですが、どうやったら治りますか?
ここの記事のタイトルのところです。
http://www.kaoritter.com/archives/2012/0328_192932.html

ugomemo-ryotarougomemo-ryotaro 2012/07/06 18:02 >kuromajosanさん
<script type="text/javascript">
Hatena.Star.SiteConfig = {
entryNodes: {
'article': {
uri: '.skinArticleHeader2 h1 a',
title: '.skinArticleHeader2 h1',
container: '.skinArticleHeader2 h1'
}
}
};
</script>

conanTMconanTM 2013/02/10 09:59 Twitterではどうすればいいですか?

takuyarei0takuyarei0 2013/03/13 19:14 Twitterではできませんorz
星をつけるURLはあるけど見る方法なんて...。

トラックバック - http://d.hatena.ne.jp/hatenastar/20070707/1184453491
 |