スターの見た目変更記録

ブログのスターを表示させる際にちょっといじったのは前に書いたのですが、具体的な内容を書きそびれていたので、忘れないうちに書いておきます。

記事の下から記事タイトルの横にスターを移した

HatenaStar.js と、Hatena.Star.SiteConfig をいじっている hatenablog.js が、ページのずっと下の方で読み込まれるので、こちらは DOMContentLoaded のタイミングで以下のように書き換えています。

if (Hatena.Star) Hatena.Star.SiteConfig.entryNodes['article.entry'].container = 'h1';

追記: 引用ツールを表示させないとはてなスターの引用が失敗するようなので表示させたら、ツールの方からスターをつけられない不具合が発覚したので、修正しました。

DOMContentLoaded より早い実行タイミングがあればそっちにしたいところです。

スターの画像を変えた

こういう画像に変えました。

使用イメージはこんな感じです。私のプロフィールアイコンは四隅が透過色なのですが、何故かその部分が黒くなっているみたいです。後で詳しく調べたいです。追記: .hatena-big-star-star-container > .hatena-star-star と .hatena-big-star-star-container に border-radius:0px; を追加したらはじっこも白くなりました。

はてなブログは元々プロフィールアイコンの上にスターを置くのがデフォルトで、そんなことしちゃっていいなら私も置いちゃうよということで、半透明のスターを描いてアイコンに重ねました。

CSS は、はてなのデザイナーさんのブログ記事を参考にして書きました。

.hatena-star-inner-count,
.hatena-star-inner-count-green,
.hatena-star-inner-count-red,
.hatena-star-inner-count-blue,
.hatena-star-inner-count-purple {
  font-size: 16px!important;
  display: inline-block;
  vertical-align: middle;
}
article.entry .hatena-star-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206085555.png');
}
article.entry .hatena-star-green-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206085552.png');
}
article.entry .hatena-star-red-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206085554.png');
}
article.entry .hatena-star-blue-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206085550.png');
}
article.entry .hatena-star-purple-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206085553.png');
}
article.entry .hatena-star-temp-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206091214.png');
}
article.entry .hatena-star-star-container a {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  position: relative;
}
article.entry .hatena-big-star-star-container {
  width: 16px;
  height: 16px;
  position: relative;
  border-radius:0px;
}
article.entry .hatena-big-star-star-container > .hatena-star-star {
  background: transparent;
  border-radius:0px;
}
article.entry .hatena-star-star {
  padding: 0px;
  border: none;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  left: 0;
}
article.entry .hatena-star-user {
  padding: 0px;
  border: none;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
}

ボタンをいつものに戻した

はてなブログのスター付加ボタンはデフォルトだとこういうちょっと大きめのボタンなのですが、なんだか気後れしてしまうのでいつものボタンに戻しました。

span.hatena-star-add-button-image {
  background-image: url('http://s.hatena.ne.jp/images/add_rd.gif');
}
span.hatena-star-comment-button-image {
  background-image: url('http://s.hatena.ne.jp/images/comment_rd.gif');
}
span.hatena-star-comment-button-image-active {
  background-image: url('http://s.hatena.ne.jp/images/comment_active_dark.gif');
}

たった今色違い画像の存在に気付いたのでそっちに差し替えました。馴染んでて嬉しいです。

スターコメントを表示させて、スターを促すツールチップを隠した

スターコメントが非表示にされていたので、出しました。スターコメントは人力検索やはてなブックマークでも非表示にされてて不憫だなと思います。

もういっこのセレクタは、なんかでっかい緑色の吹き出しが出てきてびっくりしたので反射的に display:none; しました。

span.hatena-star-comment-container {
  display: inline-block;
}
div.star-navigation-tooltip{
  display: none;
}

置き換わってほしいとちょっと強めに願う場合はセレクタに要素名を足したり子孫セレクタにしたりして、優先順位を若干高めさせています。!important よりは弱めの願い方です。

Hatena::Let でもスターをいじるブックマークレットをいくつか投稿したので、一緒に紹介しようと思っていたのですが、記事が長くなってしまったのでこれ単体で出すことにします。

関連記事