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

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

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

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

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

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

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

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

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