はてなのおおきなおほしさま

ビックスター！

　twitterをながめていたら、こちらのサイトについてのツイートを目にいたしまして、ぶらり途中リンクの旅に出かけてみました。

　そして文末へと至りましたら…あらっステキ！

　はてなスターをつけた方のプロフィールアイコンが大きくて丸くって、スターアイコンは吹き出しの中にハートマーク。

　わたしもこれがいいっ！

　これにしたいっ！！

と思ってさっそく右クリックで「要素を調査」(←狐さんで見ていたので)。

　コードをひっぱってきてアレを変えたりコレを消したりいろいろ試してなんとか完成！

　ハートマークにしてかわいらしくする勇気はなかったのでスターはそのままに表示位置を変えました。

つながるリンクの流し星

　他の方のブログを読んでいて、さいごに「はてなスター」つけようとしたとき、そこにかわいらしいアイコンや特異なオーラを放つアイコンを目にすると気になってポチッとその方の(プロフィールサイトから運営)サイトに飛んでみるということありませんか？

　そんなときにもデフォルトよりもすこし大きい方が目立ちますし押しやすいですよね。

　スマホ表示ではなおのこと大きい方が押しやすいことでしょう。スマホ使ってないので実際のところどうなのかしりませんけれど。

　押しやすいからというだけでなく、単にデザイン的にもこれぐらい大きい方がわたしは好みだなぁ〜。

　それに、このブログを読んであまつさえスターまでつけてくださる奇特な方が少数ながらいらっしゃいますが、そのなかのほぼすべてのみなさまが運営なさっておられるブログがステキなこと慧眼であること。

　こんな食べ散らかしたしょうもないブログなんて読んでるんじゃない。そんなヒマがあるのなら、こちらにおわす少数精鋭の方々のブログをお読みなさいな。

　こっちの水は苦いぞぉ。あっちの水は甘いぞぉ。ということでそちらへと誘導したい、流したいという想いもわずかながらに、ミジンコほどには抱いておりましたゆえ、今回のカスタマイズへと至りましてございます。

　とかなんとか言っちゃって、明日になったら元に戻っているかもしれませんが、そのときはご容赦ください。

スターコード

　例のごとくプログラミングの知識はないので、書いたり消したりを繰り返し、どこを変えるとどう変わるのか1つ1つ探り探りの手探りで、やっとこさっとこ、この形へと着地しました。

　最終的に落ち着いたコードはこんな感じです。

　これを「デザインcss」に書き加えます。

※2016年12月24日修正

　以前のコードではコメント欄のスターの位置の具合が悪かったので修正しました。

.hatena-big-star-star-container {
    left: 20px;
    margin: 0 0 0 -10px;
    overflow: visible;
}
.hatena-big-star-star-container > .hatena-star-star {
    margin:16px;
    background:0;
}
.hatena-star-user {
    width: 32px;
    height: 32px;
    top: -10px;
    left: -5px;
    max-width: inherit;
    border-radius: 16px;
}
.hatena-star-container a {
    display: inline-block;
    vertical-align: bottom;
    width: 32px;
    margin: 2px;
}

　デザインcssに書き加えただけではスマホ表示時は変わらなかったので、先ほどのコードをスマホ用に微調整したものを、このブログでもたびたび登場する<style type="text/css">〜</style>で囲んで「スマートフォン」の「フッタ」(※Proでない方は「記事下」かどこか他の所にしてね)に書き加えました。

※2016年12月24日の修正後、<style type="text/css">〜</style>のなかのコードは前出のパソコン表示用のコードと同じになりました。ですから「PCと同じHTMLを表示する」としている方もわざわざ「スマートフォン用にHTMLを設定する」としなくても簡単にはてなビックスターにできるかと思います。

<style type="text/css">
.hatena-big-star-star-container {
    left: 20px;
    margin: 0 0 0 -10px;
    overflow: visible;
}
.hatena-big-star-star-container > .hatena-star-star {
    margin:16px;
    background:0;
}
.hatena-star-user {
    width: 32px;
    height: 32px;
    top: -10px;
    left: -5px;
    max-width: inherit;
    border-radius: 16px;
}
.hatena-star-container a {
    display: inline-block;
    vertical-align: bottom;
    width: 32px;
    margin: 2px;
}

</style>