はてなブログカスタマイズ購読ボタンの設置

最近ブログのカスタマイズにはまっている管理人です。
今回は、はてなブログの購読ボタンを設置したいと思います。

カスタマイズ内容

カスタマイズは、以下のページをベース(ほぼそのまま)にさせていただきました。ありがとうございます！！
www.notitle-weblog.com

カスタマイズ内容は、読者でない場合は「読者になる」と表示。読者になっている場合には「読者です」と表示され、カーソルをボタンの上に重ねると「読者をやめる」と表示するようになります。
はてなブログの場合、「読者になる」へのリンクや「読者になるボタン」のclassなどが定義されていますので、それらを利用してボタンの設置やCSS を設定して見た目を変更してあげることになります。

「読者になるボタン」の設置

はじめに読者になるボタンの設置です。設置したいところに以下の HTML を貼り付けてください。
以下の URL が読者になるページへのリンクとなります。 URLをhrefに指定すること読者になるページに遷移することができますので、色々な場所へ「読者になる」ボタンを作ることが可能となります。
「読者になるボタン」の表示名は任意に変更することが可能です。

<div class="hatena-module hatena-module-profile">
<!-- 読者になるボタン-->
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box reader-button-inner">
<a href="https://blog.hatena.ne.jp/はてなブログのID/はてなブログのURL/subscribe" class="hatena-follow-button js-hatena-follow-button">
<span class="subscribing">
<span class="foreground">読者です</span>
<span class="background">読者をやめる</span>
</span>
<span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once>
<span class="foreground">読者になる</span>
<span class="background">読者になる</span>
</span>
</a>
<!-- 読者数カウント-->
<div class="subscription-count-box js-subscription-count-box">
<i></i>
<u></u>
<span class="subscription-count js-subscription-count"></span>
</div>
</div>
</div>

設定は「デザイン設定」から行います。
記事の下に設置したければ、デザイン→カスタマイズ→記事の記事下に以下のコードを貼り付けてください。

CSS の設定

次に CSS の設定となります。 CSS はデザイン→カスタマイズ→ デザイン CSS に以下のコードを貼り付けてください。
ポイントはマウスを重ねた時に影をなくし、ボタンの位置を下げることでボタンを押し込んでいるように見せています。
基本、上記ページのCSSをそのまま利用させてもらっています。

/*
 * 読者になるボタン
 */
/*共通の読者ボタン設定*/
.hatena-follow-button {
font-size:15px;                /*文字の大きさ*/
width: 100px;                  /*ボタンの横幅*/
height: 30px;                  /*ボタンの縦幅*/
text-align: center;            /*文字を左右の中心に*/
vertical-align: middle;        /*文字を上下の中心に*/
padding: 4px 10px !important;  /*上下に4px 左右に10pxの隙間*/
}
/*読者 */
.hatena-follow-button.subscribing {
box-shadow: 0 2px 4px rgba(0,0,0,.4);   /*影をつける*/
background-color:white;                 /*ボタンの色*/
}
/*読者 マウスオーバー*/
.hatena-follow-button.subscribing.hover {
width:100px;                  /*調整*/
top: 2px;                     /*ボタンを下げる*/
box-shadow: none;             /*影をなくす*/
}
/*読者でない */
.hatena-follow-button.unsubscribing {
color:white !important;                /*文字の色*/
background: #F57A8F;                   /*ボタンの色*/
box-shadow: 0 2px 4px rgba(0,0,0,.4);  /*影をつける*/
}
/*読者でない マウスオーバー*/
.hatena-follow-button.unsubscribing.hover{
background: :#F57A8F;         /*ボタンの色*/
color : white !important;     /*文字の色*/
margin-top: 2px;              /*ボタンを下げる*/
box-shadow: none;             /*影をなくす*/
}
.hatena-follow-button-box .subscription-count-box {
margin: 0 0 0 5px!important;
top:-2px;
}
/*読者人数*/
.hatena-follow-button-box .subscription-count {
height: 26px;
line-height: 26px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:1px 10px 1px 10px;
}