はてなブログの個別記事ページに文字数を表示

hatenaロゴ

別ブログ(Seesaaブログ)でGoogleアドセンスに16日で合格!する前に、いろいろなブログで見たのですが、1記事につき、最低でも1000文字以上は書かなければいけないと...。

それなら、このブログの1記事あたりの文字数はどれくらいなのかということで、個別記事ページの記事タイトル下、カテゴリー名の右端に文字数を表示してみることにしました。

「この記事は~分で読めます」という風にしなかったのは、読む時間に個人差があるから。

(デザイン→カスタマイズ→フッタにコードを入力)

JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
    if($('.page-entry')[0]) { /* 個別記事ページなら↓ */
        var entrylength = $('.entry-content').text().replace(/\s+/g,'').length;
        var prelength = $('pre').text().replace(/\s+/g,'').length;
        $('.categories').append('<div style="display: inline-block; position: absolute; right: 0;">(' + ( entrylength - prelength ) + '文字)</div>')
    };
});
</script>

entrylengthで記事全体の文字数を、prelengthでpreタグに囲まれている部分(<pre>~</pre>)の文字数をそれぞれカウントして、それを差し引きして表示します。

記事全体の文字数だけでもよかったのですが、文字数カウントにJavaScriptなどのコードを含めると、読むときの目安にならないかなと。リンクのタイトルや引用文など考えたらきりがないのですが...。なお、スペースや改行もカウントに含めないようにしています。

参考になるブログ・Webサイト
UXエンジニアになりたい人のブログ - はてなブログでの「所要時間の目安表記」の自動化
BlackFlag - jQueryでコンテンツ要素の文字数を取得するパターン