読者です 読者をやめる 読者になる 読者になる

3歩進んで2歩更に進む。

筋トレで克己心を高め投資に活かしたい。平成生まれのアスリート系エンジニアのブログ

MENU

AD


【ブログ改善ネタ】読者になるボタンを配置&目立たせるカスタマイズ

最近若干ですが筋トレの頻度が下がってきて反省しているktkooonです。
自戒を込めて筋トレをはじめた当時の記事をリンクしておきます…

ktkooon.hatenablog.com

さて、ブログのデザインや導線の改善ネタをこれからちょくちょくやろうと思いたち、 今回は「読者になる」ボタンに注目してみたいと思います。

読者を集めてこそブログ大将軍

よく他のブログを拝見していて、当たり前かもしれませんが大抵人気のブログには多くの読者がいるんですよね。

ヒトデさん 2980人(2017年4月 現在)

www.hitode-festival.com

クレジットカードの読みもの 1981人 (2017年4月 現在)

cards.hateblo.jp

非天マザーさん 1085人 (2017年4月 現在)

www.b-chan.jp

そして現在の自分 36人!

f:id:ktkooon:20170416223319p:plain

36名の方ありがとうございます。
しかし、ブログ大将軍までの道のりは長いですねぇ。
ということで、読者を増やす改善案を考えてみました。

読者になるボタンを記事下につける

すっごく安易ですが、読者になるボタンを記事中につけてみることにします。 参考にした記事はこちら

shiromatakumi.hatenablog.com

今まで気づきませんでしたが、設定 > 詳細設定 のしたの方に「読者になるボタン」のソースがあります。

f:id:ktkooon:20170416224111p:plain

このiframeをデザイン設定 > 記事上下のカスタマイズで、 今回は記事下にいれてみました。

f:id:ktkooon:20170416224316p:plain

記事をみてみると…

f:id:ktkooon:20170416224724p:plain

無事に表示されました。 が、しかしブックマークのコメントが若干邪魔をしてますねぇ。
これはdeleteしてしまいます。
さらに、ボタンが地味なのでデザインをバリバリ目立つ感じにしたいので方法を探してみます。

読者になるボタンをカスタマイズ

参考にしたのはこちらの記事

www.kimanagu.com

これによると先ほどのiframeのソースから一部を抜粋して、 srcの/iframeを除いた形のリンクが読者になるページへのリンクとのことです。 自分だと、

https://blog.hatena.ne.jp/ktkooon/ktkooon.hatenablog.com/subscribe

になりますね。 これで、あとはボタンなり画像なりをaタグと一緒に入れれば良い感じです。 目立つボタンが良いかなと思うので、

css3button.net

で青いボタンををshowcaseから選びCSSをコピー

f:id:ktkooon:20170417084956p:plain

読者になるページのリンクをボタンにあてるために以下のhtmlをiframeをデザイン設定 > 記事上下のカスタマイズで、記事下にいれます。

<a href="https://blog.hatena.ne.jp/ktkooon/ktkooon.hatenablog.com/subscribe" class="css_btn_class"><button type="button" name="" value="" class="css3button">Follow Me!!</button></a>

さらにデザインCSSで先ほどの青いボタンのCSSをコピペでいれると…

f:id:ktkooon:20170417124255p:plain

押したくなるような、読者になるボタンができました。

読者になるボタンのクリックされた回数をカウントする工夫

使うのはBitlyというサービスです。

bitly.com

長いリンクの短縮リンクを作ってくれるサービスです。 短縮リンクを作ると、そのリンクのクリック数がモニターできる機能があるので今回はそれを使います。

まずは、読者になるページへの短縮リンクをつくります。 サインアップしなくてもつくれますが、今回はサインアップ後の画面です。

f:id:ktkooon:20170417123659p:plain

このリンクを記事上のカスタマイズのリンク部分へ差し替えます。

<a href="http://bit.ly/2oh04wq" class="css_btn_class"><button type="button" name="" value="" class="css3button">Follow Me!!</button></a>

試しにクリックしてみると…

f:id:ktkooon:20170417124053p:plain

棒グラフと円グラフでクリック数が分かります。
これである程度効果測定ができそうです。

しばらく様子をみてどれくらいか効果があったかを追ってみたいと思います!
効果なかったら外します笑

おわり