はてなブログ「読者になる」ボタンを作る方法!シンプルで軽くする!
はてなブログでは「読者になる」ボタンがありますね。機能としては非常に便利ですが、ボタンとしては小さくて押しにくくないでしょうか。
しかも、これは読者数を読み込んでいるからかと思いますが重いですよね。サイトが「重い」ことの影響は次の記事で書きました。
somegoro.hatenablog.com
さて、この「読者になる」について、機能としては利用したいけれども「重い」ことだったり「小さい」ことについては解決したいですよね。そこで今回は「読者になる」ボタンを自作してしまいます。それではまず、この作業でどのようなボタンが作成できるのか見てみましょう。
自作「読者になる」ボタン(通常状態)
自作「読者になる」ボタン(マウスが上にあるとき)
実物
では、作業に入っていきます。
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の2行目はご自分のIDとURLに書き換えてください。詳細は次の図に記載しています。(クリックすると画像が大きくなります)
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; }
これで「読者になる」ボタンの完成です。
今回はこの辺で。