「はてなスター」のアイコンを大きく表示させるカスタマイズ & はてなスターについて思う事

はてなスターの表示（見た目）をちょっと変えるカスタマイズをやってみた。はてなブログをやっていない人にはなんのこっちゃという話だが、ツイッターの「いいね」みたいな機能です。ブログを見たはてなユーザーが記事下のスターボタンを押すと星が付く仕組み。アイコンとユーザー名も表示されて誰がスターを付けてくれたのかが分かります。

はてなスターのアイコンを大きく表示させるカスタマイズ
はてなスターの使い方とスターについて思う事

はてなスターのアイコンを大きく表示させるカスタマイズ

今回はこちらのブログさんの記事を参考に（っていうか丸々コピペ）しました。

２例目の「星（スター）を吹き出し表示にしてプロフィール画像（アイコン）を丸く表示させる」をやってみました。下記の CSS をはてなブログの管理画面から「デザイン」→「カスタマイズ」の一番下の「デザイン CSS」に貼るだけです。

注意：CSS を修正する際には元に復元できるようにバックアップを取っておいてください

.hatena-star-container {
  padding-top: 5px;
  padding-bottom: 5px;
}
.hatena-star-container a {
  display: inline-block;
  vertical-align: bottom;
  width: 32px;
  height: 60px;
  margin: 2px;
  line-height: 1;
  position: relative;
}
.hatena-star-container .hatena-big-star-star-container {
  width: 18px;
  height: 18px;
  left: 50%;
  margin: 0 0 0 -10px;
  position: relative;
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  overflow: visible;
}
.hatena-star-container .hatena-big-star-star-container:after,
.hatena-star-container .hatena-big-star-star-container:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.hatena-star-container .hatena-big-star-star-container:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #ffffff;
  border-width: 3px;
  margin-left: -3px;
}
.hatena-star-container .hatena-big-star-star-container:before {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #cccccc;
  border-width: 4px;
  margin-left: -4px;
}
.hatena-star-container .hatena-big-star-star-container > .hatena-star-star {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px!important;
}
.hatena-star-container .hatena-star-user {
  width: 32px;
  height: 32px;
  margin-left: -16px;
  position: absolute;
  top: 27px;
  left: 50%;
  max-width: inherit;
  border-radius: 16px;
  background: #fff;
}

引用：kyabana's blog

コードをコピーしてデザイン CSS にペーストしたら「変更を保存する」ボタンを押して完了。ブログに反映されるとこんな感じ（この記事のスター見れば分かるか・・）。

これが元のはてなスター部分。

はてなスター旧

こちらがカスタマイズ後。

はてなスター新

ユーザーのアイコンが大きくなって、誰がスターを付けてくれたのか分かりやすくなりました。のっぺらアイコンの人もいますけどw

本当はさらに自分でカスタマイズして、アイコンの上の星の吹き出しを無くしてもっとシンプルにしたかったんだけど、どこをどういじってもできませんでした。。

HTML と CSS はだいぶ昔に基本のタグとスタイルシートの仕組みを覚えた程度で、いまだに何かいじるたびに「アレはどうやるんだっけ？」とググってます。WEB デザイナーとかプログラマーってすごい。ありがとうございました。

はてなスターの使い方とスターについて思う事

なんでこのカスタマイズをしようかと思ったのは、他所のブログで見かけてパッと見がいいなという点がまずあるんだけど、デフォルトのスターアイコンが小さ過ぎて自分には見づらかったんよね。老眼？ノートパソコンやスマホだともっとキツい。。

最近は人のブログを読みに行く時には購読ページからではなくて（読者登録し過ぎて追いきれないです。すみません）、記事に付いたスターからその人のブログを見にいってるんですよね（これも見に行く頻度が低くてすみません）。まー、これで読者さんのブログへ飛ぶ時にクリックしやすくなりました。

で、いろんなはてなブログを見ていると「はてなスター機能」を外してる人も結構いますね。少数派だと思うけど結構いる。「はてなスター」で Google 検索してみると関連ワードがこんなでした。

はてなスター　検索

「外す」「いらない」「スパム」「非表示」などなど、ネガティブなワードも。表示が重くなったり、サイトの評価でスパム判定されたりするんでしょうかね。

そうだとしても自分は、はてなスターは外したくないんよね。ブクマや言及、id コール以上に重要だと思っている機能で。スターがなかったら「はてな」にしてる意味が無いってくらいに気に入っている（アメブロなんかにも「いいね」機能が付いてるみたいだけど）。コメントはしないけど「訪問したよ」「見ました」ってのを相手に報せたいんよね。「見た」だけで「読んで」なかったりする場合も多いけど。

とりあえず自分は訪問したらスターを３つ付けてる。自分が言及されていた時なんかは星５つ（レア）。もちろん、単に既読の意味では付けずに、記事の評価として面白かった時にだけスターを付ける人もいるだろうけど。

昔の mixi の「足跡」機能みたいな感じ？あの機能が廃止された時には多数のユーザーから不満が上がって一揆が起きたもんじゃよ・・はてなスターは決して役立たずの機能なんかじゃない・・！！

SNS 時代の細やかな感情、「コメント」と「既読スルー」の間を埋める便利な機能だと思うのでした。