はてなスターの見た目を変えるアレコレ
「エイプリルフールに新サービス!? 「はてなだまされまスター」と、はてなスターのカスタマイズ方法」で、はてなスターの構成を取り上げました。記事では新たに画像を用意してはてなスターの見た目を変えていましたが、画像を変えずに見た目を変えることもできるなぁと思い、いくつか試してみました。
もとはこんなんです。
CSSを追加するとこんなになります。
これらは、はてなブログのブログの管理画面 > デザイン > カスタマイズ > デザインCSSの欄に貼付けて「変更を保存する」ボタンをクリックで設定できます。
それぞれのCSSは次のとおり。
星をふきだしに表示する
CSSはこちら
.hatena-star-container { padding-top: 5px; padding-bottom: 5px; } .hatena-star-container a { display: inline-block; vertical-align: bottom; width: 20px; height: 45px; 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 { border-radius: 0; width: 16px; height: 16px; margin-left: -8px; position: absolute; top: 27px; left: 50%; }
星をふきだしに表示して、プロフィール画像をまるく表示する
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; }
星をふきだしに表示して、プロフィール画像をふちどりを付けてまるく表示する
CSSはこちら
.hatena-star-container { padding-top: 5px; padding-bottom: 5px; } .hatena-star-container a { display: inline-block; vertical-align: bottom; width: 37px; height: 66px; 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: -19px; position: absolute; top: 27px; left: 50%; max-width: inherit; padding: 2px!important; border-radius: 19px; border: 1px solid #ccc!important; background: #fff; }
プロフィール画像をふきだしに表示する
CSSはこちら
.hatena-star-container { padding-top: 5px; padding-bottom: 5px; } .hatena-star-container a { display: inline-block; vertical-align: bottom; width: 26px; height: 45px; line-height: 1; position: relative; } .hatena-star-container .hatena-big-star-star-container { width: 20px; height: 20px; 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: 26px; left: 50%; margin-left: -5px; } .hatena-star-container .hatena-star-user { padding: 2px!important; border-radius: 0; width: 16px; height: 16px; }
プロフィール画像を星の上にまるく表示して、マウスオーバーで大きくする
CSSはこちら
.hatena-star-container { padding-top: 5px; padding-bottom: 5px; } .hatena-star-container a { display: inline-block; vertical-align: bottom; width: 22px; height: 68px; 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: 46px; 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: 20px; left: 50%; margin-left: -13px; z-index: 1; } .hatena-star-container a:hover .hatena-star-user { border-radius: 19px; width: 32px; height: 32px; top: 0px; margin-left: -19px; z-index: 10; }
プロフィール画像を星の上にまるく表示して、マウスオーバーでもっと大きくする
CSSはこちら
.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; }
星にマウスオーバーするとプロフィール画像が星の上にまるく表示される
CSSはこちら
.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; opacity: 0; } .hatena-star-container a:hover .hatena-star-user { border-radius: 34px; width: 64px; height: 64px; top: 0px; margin-left: -38px; z-index: 10; opacity: 1; }
プログテーマと一緒にスターの見た目を変えると、より愛着が湧きそうですねぇ。