読者数表示あり!はてなブログの読者になるボタン カスタマイズ方法

f:id:sera1098:20170905235458j:plain

こんにちは,のっち(@notti_blog)です

最初の読者になるボタンって地味じゃないですか?

読者登録しようにも、見当たらなかったら登録してくれません

そこで、読者数を残しながらもボタンを目立つようにカスタマイズする方法をシェアします


※2017年9月7日
 既に読者の方には「読者です」と表示してほしいとのご指摘があり、CSSを変更しました!



完成イメージ

最初の「読者になる」ボタン

f:id:sera1098:20170905153735p:plain

これを,こんな感じにカスタマイズします!(見本はこの節の最後にあります)

f:id:sera1098:20170905154312p:plain

ボタンの大きさと色、文字のフォントを変えて、ホバーエフェクトもつけました!

吹き出しの部分も大きくなっています!


読者じゃない人には

通常時のボタンがこれで、

f:id:sera1098:20170908122636j:plain

マウスを重ねると、へこみます

f:id:sera1098:20170908121852j:plain


既に読者の人には

既に読者の方が読者登録していないのかな?と勘違いしないように、既に読者の方には「読者です」と表示されるようになっています

f:id:sera1098:20170908121410j:plain

ボタンにマウスを重ねると、カスタマイズ前の読者になるボタンと同じように「読者をやめる」と表示されます

f:id:sera1098:20170908121419j:plain


試してほしい!

画像ではわかりにくいかもしれないので、下の「読者になるボタン」で試してみてください

1度読者になっていただかないといけないんですが、読者登録は解除してもらってかまいません (できればそのままで...)



新しいところ 

読者になるボタンのカスタマイズなんて,いっぱいやってる人いるじゃん!と言われるかもしれないですが,このカスタマイズはちょっと違います

こちらのページを見てください

english-apple-diy.hatenablog.com

www.notitle-weblog.com

見ていただくと分かるんですが,読者数がないんです

読者数はいらないという方は,ぼくのカスタマイズよりも上2つのページのカスタマイズのほうがおすすめですよ!

 

カスタマイズ方法

では,カスタマイズ方法を紹介します

変更するところ

今回は、CSSだけを追加します

CSSを追加する場所は、

「管理画面」→「デザイン」→「カスタマイズ(スパナのマーク)」→「デザインCSS」

です

デザインの、

f:id:sera1098:20170905231202p:plain

カスタマイズの、

f:id:sera1098:20170905231300p:plain

ここです!

f:id:sera1098:20170905231322p:plain

CSS

/*
 * 読者になるボタン
 */

/*共通の読者ボタンの設定*/
.hatena-follow-button {
  font-size:15px;                /*文字の大きさ*/
  border: 0px !important;        /*枠線なし*/
  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;                 /*ボタンの色*/
  border: 1.2px solid #a9a9a9 !important; /*薄く枠線を描いてあります*/
}
/*読者の人 マウスを重ねたとき*/
.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 6px!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; 
}


このコードをコピーして、貼り付けてください

それだけで、デザインが変わります!

コメントがついている部分は、好みのデザインになるように変更してみてください


こちらのサイトのCSSを参考にさせていただきました!

mshitech.hatenablog.com

いろんなとこに貼りたい人へ

「読者になるボタン」を貼りたいときは、下のHTMLを貼ってください

<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="#" 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>


「読者です」「読者になる」などの文字は自由に変えられるので、遊んでみてください!


最後に

読者数表示ありのカスタマイズを紹介しました

ブログを回っていて、読者数がない方もわりといます

ぼくは読者がある程度いるなら、読者数があったほうが読者になりやすいんじゃないかなぁと思っています

読者がいることがわかってたほうが、読者になるボタン押しやすくないですか?


それではまた!