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

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

カスタマイズ内容

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

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

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

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

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

CSS の設定

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

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