はてなスターの見た目を変える方法

はてなスターデフォルトデザイン+@が一番お洒落

はてなスターってありますよね?

記事に対して「いいね」のような感覚でつけられるはてなブログならではの機能です。

はてなスターを有効にすると、訪問者や読者の方々の存在も分かりますし、自分のブログに来てほしいときなんかも付けたりするので結構面白いツールだと思います。

でも、はてなスターのデフォルトのデザインってシンプル過ぎるのでどこかいじりたくなります。一度、はてなスターの表示をオリジナル画像にしてみたのですが、どうも良い画像もないし、見栄えもよくなりませんでした。

そこで、はてなスターのデフォルトのデザインを維持したまま、少しだけスタイルを変更できないか模索し、現在のデザインにカスタマイズしました。

参考にしたサイトとCSSコード

カスタマイズのために参考にしたサイトは以下のサイトです。

はてなスターの見た目を変えるアレコレ - kyabana's blog

ここにはデフォルトのデザイン+@ではてなスターの見た目を変えられるコードが載っています。素晴らしいです。

私も位置だけは若干いじったものの、あとはほぼコピペさせてもらいました。深謝。

私が設定したコードは以下です。

/*記事一覧表示時のはてなスターカスタマイズ*/
.star-container {
padding-top: 100px;
padding-bottom: 0px;
position:absolute;
}
.star-container a {
display: inline-block;
vertical-align: bottom;
width: 16px;
height: 50px;
position: relative;
}
.star-container .hatena-big-star-star-container {
width: 18px;
height: 55px;
overflow: visible;
}
.star-container .hatena-big-star-star-container > .hatena-star-star {
background: transparent;
position: absolute;
top: 36px;
left: 50%;
margin-left: -7px;
}
.star-container .hatena-star-user {
padding: 2px!important;
border: 1px solid #ccc!important;
background: #fff;
max-width: inherit;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
border-radius: 10px;
width: 14px;
height: 14px;
top: 18px;
left: 50%;
margin-left: -13px;
z-index: 1;
}
.star-container a:hover .hatena-star-user {
border-radius: 16px;
width: 25px;
height: 26px;
top: 0px;
margin-left: -19px;
z-index: 10;
}

/*記事下に表示されるはてなスターカスタマイズ*/

.hatena-star-container {
padding-top: 5px;
padding-bottom: 5px;
}
.hatena-star-container a {
display: inline-block;
vertical-align: bottom;
width: 22px;
height: 95px;
position: relative;
}
.hatena-star-container .hatena-big-star-star-container {
width: 22px;
height: 68px;
overflow: visible;
}
.hatena-star-container .hatena-big-star-star-container > .hatena-star-star {
background: transparent;
position: absolute;
top: 76px;
left: 50%;
margin-left: -7px;
}
.hatena-star-container .hatena-star-user {
padding: 2px!important;
border: 1px solid #ccc!important;
background: #fff;
max-width: inherit;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
border-radius: 10px;
width: 16px;
height: 16px;
top: 50px;
left: 50%;
margin-left: -13px;
z-index: 1;
}
.hatena-star-container a:hover .hatena-star-user {
border-radius: 34px;
width: 64px;
height: 64px;
top: 0px;
margin-left: -38px;
z-index: 10;
}

 

 

(参考サイト:はてなスターの見た目を変えるアレコレ - kyabana's blog

 上記サイトでお気に入りのデザインを見つけてコピペすれば一発です。