【コピペでOK】1分でできる「この記事は何分で読めます」の導入方法【はてなブログ】

考える人の画像

はてなブログを使っていて、「この記事は○分で読めます」とブログに表示させたいから導入方法を教えてほしい。めんどくさいのはナシで!

本記事では、こういった悩みに答えます。はてなブログでの導入方法ですが、適切な場所へ挿入すればワードプレスでも動作すると思います。

この記事を読むメリット
・一瞬で読了時間を表示させることができる。


読了時間を表示することのメリット

砂時計の画像
Photo by NeONBRAND on Unsplash

記事に読了時間を表示することのメリットは、ずばり「ちゃんと読んでもらえる」ことです。

ブログを訪れてくれた人が、どれだけの時間をブログに割くことができるかは私たちには分かりません。電車の待ち時間や大便中などのちょっとしたスキマ時間に記事を訪れてくれた人が、読了時間の表示がない、読むのに15分かかる記事を読んだらどう思うでしょうか。途中で「なんか長いな」となってページを閉じてしまうでしょう。

「この記事は何分で読めます」とあらかじめ読者に伝えておくことで、読者は「いまこれくらいの時間があるから、この長さの記事なら読んでみよう」「いま読む時間はないけど興味はあるからブックマークしておこう」となり、結果的に記事をちゃんと読んでもらうことに繋がります。

コードを導入

それでは実際にコードを導入してみましょう。

<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var
 wpm = 600;
var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>';
$('.entry-content').prepend(message);
}, false);
</script>

やり方は簡単で、こちらのコードを「デザイン設定」→「カスタマイズ」→「記事」→「記事上」に貼り付けるだけです。font-sizeやcolor、var wpmの数値や日本語の部分は好みに合わせて変更してもらっても大丈夫です。var wpm=600としていますが、これは「1分間に何文字読めるか」のことで、大体平均が400~600字なので、この間の数値で設定するのが良いでしょう。過去記事含め全記事に読了時間が表示されるようになります。

【手順】

①管理画面→デザイン
②カスタマイズ→記事
③記事上

ひとこと

ブログのカスタマイズは調べればたくさん出てきますが、読了時間の表示は簡単にできてしかも読者さんにとっても便利な機能なのでぜひ導入してみてはいかがでしょうか。まあ言ってしまえば「何分で読めます」という、ただそれだけのことなのですが、このちょっとした記述がユーザビリティの向上につながることは確かかと思われますので、導入して損はないんじゃないかと思います。ちょっと玄人っぽい雰囲気も出せますしね。

最後までお読みいただきありがとうございます。この記事が気に入ってくださったなら、ぜひコメントやいいねをお願い致します!(励みになります。めっちゃ嬉しいです。)