はてなブログ「読者になる」ボタンを作る方法！シンプルで軽くする！

はてなブログでは「読者になる」ボタンがありますね。機能としては非常に便利ですが、ボタンとしては小さくて押しにくくないでしょうか。

f:id:somegoro:20160515195010p:plain

しかも、これは読者数を読み込んでいるからかと思いますが重いですよね。サイトが「重い」ことの影響は次の記事で書きました。
somegoro.hatenablog.com

さて、この「読者になる」について、機能としては利用したいけれども「重い」ことだったり「小さい」ことについては解決したいですよね。そこで今回は「読者になる」ボタンを自作してしまいます。それではまず、この作業でどのようなボタンが作成できるのか見てみましょう。

自作「読者になる」ボタン（通常状態）

f:id:somegoro:20160515195022p:plain

自作「読者になる」ボタン（マウスが上にあるとき）

f:id:somegoro:20160515195028p:plain

実物

読者になる

では、作業に入っていきます。

HTMLに次の文を書きましょう。

<div class="content-inner-follow-buttons" >
<a class="hatena" href="http://blog.hatena.ne.jp/somegoro/somegoro.hatenablog.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/somegoro/somegoro.hatenablog.com/subscribe', '', 'width=500,height=400'); return false;">
<i class="blogicon-hatenablog lg"></i>
<span class="inner-text">読者になる</span>
</a>
</div>

上記HTMLの２行目はご自分のIDとURLに書き換えてください。詳細は次の図に記載しています。（クリックすると画像が大きくなります）
f:id:somegoro:20160718034232p:plain

CSSに次の文を書きましょう。

.content-inner-follow-buttons{
width: 100%;
text-align: center;
letter-spacing: -.40em;
}
.content-inner-follow-buttons .follow-title {
letter-spacing: normal;
width:100%;
}
.content-inner-follow-buttons a {
display: inline-block;
letter-spacing: normal;
position: relative;
width: 60%;
font-size: 18px;
text-align: center;
text-decoration: none;
padding:20px 0;
margin:3px;
overflow: hidden;
z-index:2;
}
.content-inner-follow-buttons .inner-text {
font-size:16px;
padding-left:5px;
}
.content-inner-follow-buttons .hatena {
color: #38393C;
border: 1px solid #38393C;
background: #ffffff;
}
.content-inner-follow-buttons a:hover {
color:#fff;
transition: all .3s;
}
.content-inner-follow-buttons a:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:-100%;
left:0;
z-index:-1;
transition: 0.2s;
}
.content-inner-follow-buttons .hatena:hover:after {
top:0;
background:#38393C;
}