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

TECHHOT

色々書いてます。プログラミングのことも使えるかなと思ったら書きます。個人でブログとは関係なく運営しているワークショップのことについてもいずれはまとめて書いていきます。

スポンサーリンク

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

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

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

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

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

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

私は幸せです。

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


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

実は記事の所要時間を表示する方法は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>

変更点

  • テキストをcssで囲い込みした中で中央揃えにした。
  • 幅を200pxに変更した。

まあcss齧っている方ならぱぱっと変更できますね。

最後に

新年を迎え堕落しきった自分に喝を入れる意味で記事を書いた。

記事を書いていく中でやる気が出てきてスケジュールをバリバリ整理したり活動的になっている自分がいる。

だがこれがどれくらい続くかわからない。でも継続することを今年のテーマにして必死に続けていく。


それと・・・
実は誰かわからないがカンパをいただいた。

この出来事でやべ~記事書かないと・・・気持ちが昂った。

カンパありがとう。

ラスベガスとヘミシンクに学んだ 富と成功の秘訣

ラスベガスとヘミシンクに学んだ 富と成功の秘訣

カンパでこの本を購入した。感謝だ。

広告を非表示にする