購読済みの人には「読者です」と出すためにカスタマイズしたボタンへもう一工夫してみた

f:id:tsubasa123:20161209150654j:plain

こんにちは、つばさ(@tsubasa123)です。

カスタマイズというと少し大げさな気もしますが、今日も小ネタをお届けします。CSSを利用したカスタマイズで作成された読者登録ボタンの文言のお話です。

読者登録したかわからない問題

「読者登録 カスタマイズ」なんかのキーワードで検索すれば、CSSを利用した読者登録ボタンのカスタマイズ方法がたくさん見つかります。

当サイトのボタンも

www.ituore.com

こちらの、いつ俺さんの記事を参考にしてカスタマイズしているのですが、このカスタマイズに限らず、CSSカスタマイズのボタンだと登録済みなのかどうかがわからないところがずっと引っかかっていました。

いろんな記事を見ていると、この人のブログ購読してたっけかな?ってなりませんか?

はてなブログの公式が提供している

こちらの読者になるボタンも併用してサイドバーの上部、プロフィールエリアに出す形で運用している方が多いと思います。

こちらのボタンには読者登録済みの場合は「読者です」と表示されるようになっているのでこちらを見ればわかるのですが、どうせならカスタマイズしたボタンの方にもこれを反映したい。

ざっと探しては見ましたが、なかなか見つけることができなかったので勢いで自作カスタマイズを行いました。反省はしていません。

ざっくりとした仕組み

はてなブログ公式の読者登録ボタンを設置している人を対象としたカスタマイズになります。公式ボタンが設置されていない場合は動作しません。

<script type="text/javascript">
// 購読済みかどうかの判定
(function() {
$(window).on('load', function() {
if ($('div.hatena-follow-button-box > a').hasClass('subscribing')) {
$('a.hatena > .inner-text').each(function() {
if ($(this).text() === '読者になる') {
$(this).text('読者です')
}
});
}
});
})();
</script>

ソースコードはこれだけです。公式ボタンの情報をもとにカスタマイズしたボタンのテキストを書き換える単純なやつです。記事の下に追加してください。

a.hatena > .inner-textの部分が「読者になる」と書かれていたら「読者です」に置き換わります。a.hatena > .inner-textの部分は利用されているカスタマイズによって異なると思いますので適宜修正してください。

先ほど紹介したいつ俺さんの記事のコピペコードを利用している場合はこちらもコピペしていただければそのまま動作すると思います。

うれしいことに、当ブログもこの記事の投稿時点で47人もの方に購読していただいております。購読中の皆さまには↑のボタンが「読者になる」ではなく、「読者です」と表示されていると思います。

まだ購読されていない方も、もしよろしければこれを機会にご購読いただけると嬉しいです。

わかっている課題

記事の読み込みが完了してから文字の書き換えを行うのでちょっとちらつきます。個人差はあると思いますが、私は若干違和感を覚えています。ですが、購読してたっけかな?と惑わせるほうが嫌なので導入しました。

私が気になるのもこの機能を知っているため、どうしてもボタンに注目してしまうからかもしれません。大抵のユーザーは記事に注目しているのでボタンのちらつきには気が付かない。。。といいなと思っています。

ヘッダーやサイドバーの上の方に置いている方はちょっと嫌かもしれませんが、ページのフッターエリアに置いている方はとくに問題なくご利用いただけると思います。

さいごに

勢いで作りましたが割りと満足です。アイコンも合わせて変更したりすればもっとわかりやすくなるかもしれません。やるべきだったかな、また今度やってみます。購読数もがんばればいけるのか?

いい機会なのでボタンのデザインも変えようと何パターンか作ったのでご紹介したかったのですが、記事中でHTMLにデザインを適用する方法がわからずに断念。個別で記事にCSSを適用する方法をご存知の方がいましたら是非やり方を教えてください。

ではでは、最後までお付き合いいただきありがとうございました。