はてなブログで記事に読むための所要時間を表示する方法

皆さんあけましておめでとうございます。

年明けでばたばたしたために、あけましておめでとう記事を書くのが少々遅れてしもうた。

たぶん中には「お前休みすぎだよ」とか仰る方もいるでしょうがゆっくりやるのが俺のスタイルなんだと言い訳してみる。

脳はなにかと言い訳する―人は幸せになるようにできていた!? (新潮文庫)

作者: 池谷裕二
出版社/メーカー: 新潮社
発売日: 2010/05/28
メディア: 文庫
購入: 13人クリック: 36回
この商品を含むブログ (28件) を見る

私は幸せです。

さて本題に入らせていただく。

はてなブログで所要時間を表示する方法

実は記事の所要時間を表示する方法はwordpressのプラグインで提供されている。

estimated.zip

estimatedは自動で所要時間を計算して表示してくれる便利なプラグインだ。

wordpressではこのような便利なプラグインがどんどん開発されているのがとてもおいしい。ありがたい。

だがはてなブログではcssとjsで何とかしなきゃいけないためコードを書くとなるととてもめんどくさい。

長くなるので自分でやるのは諦めた次第である。

そんな堕落した俺に助けを差し伸べた記事がある。

uxlayman.hatenablog.com

なんだこれ...最高じゃねえか...

ということで上記のサイトからコードを引用させていただく。

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var length = $('div.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var elem = '<p style="font-size: 80%; color: #aaa; text-align: right;">この記事は約' + Math.ceil(length/400) + '分で読めます(1分400字換算)</p>';
$('div.entry-content').prepend(elem);
}, false);
// ]]></script>

これをデザインのカスタマイズから記事上のコードに加えるだけで、テキストで～分で読めますと表示されるのでありがたい。

俺はこのコードのスタイルを少々いじってデザインをちょこっと変えた。

以下が俺のちょっといじったコードだ。

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var length = $('div.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var elem = '<p style="font-size: 80%; color: #aaa; background: #EEE; border-top: 3px dotted #DDD; border-left: 3px solid #DDD; border-right: 3px solid #DDD; border-bottom: 3px dotted #DDD; color:#111; width: 200px; padding: 10px 0;  text-align: center;">この記事は約' + Math.ceil(length/400) + '分で読めます</p>';
$('div.entry-content').prepend(elem);
}, false);
// ]]></script>