はてなブログの「読者になる」ボタンをカスタマイズしてみた【はてなブログのカスタマイズ】

はてなブログの「読者になる」ボタンをカスタマイズしてみた【はてなブログのカスタマイズ】

はてなブログの「読者になる」ボタンって、ちょっと小さすぎやしませんか。

せっかく、読者人数が表示される機能がついているのだから、もうちょっと大きく表示させて、読者人数を増やしていきたい・・・。

今回の記事では、はてなブログを運営していて、もっと読者数を増やしていきたい方に向けて、はてなブログの「読者になる」ボタンをカスタマイズする方法をご紹介しています。

ちなみに、読者人数もそのまま表示されるようにしているので、何人の読者がいるのか分かるようにしています。誰でも簡単にコピー&ペーストでカスタマイズすることが可能なので、ぜひ参考にしていただければ幸いです。

はてなブログの「読者になる」ボタンをカスタマイズしてみた【はてなブログのカスタマイズ】

既存の「読者になる」ボタン

上が既存の「読者になる」ボタンです。クリックしにくいです。また、情報量の多いプロフィール欄であれば、埋もれてしまいそうです。

カスタマイズ後の「読者になる」ボタン

読者になる

そして、こちらがカスタマイズ後の「読者になる」ボタンです。かなり大きくすることができました。

「読者になる」ボタンのカスタマイズ方法

HTMLコードを表示させたい場所に貼り付ける

下のHTMLコードを、「読者になる」ボタンを表示させたい場所に貼り付けてください。

おそらく、多くの方はプロフィール欄に貼り付けると思います。

上から3行目の"URL"部分には、自分の「読者になる」ボタンを押した際に表示されるURLを挿入してください。

「読者になる」ボタンのURLを貼り付ける

<!--読者になるボタン-->
<div class="dokusyaninaru" style="text-align: center;">
<a href="URL" class="button01">
<i class="blogicon-hatenablog lg"></I> 読者になる</a>
<div class="hatena-follow-button-box">
<span  data-track-name="profile-widget-subscribe-button" data-track-once=""></span>
<div class="subscription-count-box" style="display: block;"> <i></i><u></u>
<span class="subscription-count js-subscription-count"></span>
</div>
</div>
</div>

CSSコードをデザインCSS欄に貼り付ける

次に、下のCSSコードを、はてなブログのデザインCSS欄に貼り付けてください。

/* ----- 読者になるボタン---- */
.dokusyaninaru{
  padding: 20px 0 10px 0;
}


.button01 {
  display:inline-block;  
  border: 2px solid #333;
  font-size: 15px;
  color: #333;
  width: 150px;
  height: 40px;
  border-radius: 10px;
  font-weight: normal;
  text-align: center;
  transition: .4s;
  padding:13px 0 0 0;
  margin-left: auto;
  margin-right: auto;
}

.button01:hover {
  background-color: #333;
  border-color: #333;
  color: #FFF;
}

/* ----- 読者になるボタン横の吹き出し ---- */
.hatena-follow-button-box .subscription-count {
    text-align: center;
    font-size: 13px;
    padding: 7px;
    width: 25px;
    height:20px;
    border-radius: 5px;
}
.hatena-follow-button-box .subscription-count-box {
    margin: 0 0 0 3px!important;
    top:-2px;
}

.hatena-follow-button-box{
 display: inline-block;
 text-align: center;
 margin-left: auto;
  margin-right: auto;
}

以上で、はてなブログの「読者になる」ボタンのカスタマイズは完了です。

「読者になる」ボタンをプロフィール欄に表示させてみた

「読者になる」ボタンをプロフィール欄に表示させてみた

プロフィール欄に表示させてみたら、かなり良い感じになりました。次回は、「読者になる」ボタンだけでなく、プロフィール欄のカスタマイズ方法についても記事にしたいと思います。

100bucks.hatenablog.com