「この記事は約3分で読めます。」をはてなブログに設置する方法

ブログ運営

2019.04.132019.01.17

この記事では「この記事は約3分で読めます。」をはてなブログに設置する方法を紹介します。
つまり、読了時間をjQueryを用いてはてなブログに実装する方法を解説します。

読了時間というのは、記事をどのくらいの時間で読むことができるかの目安のことです。
ウェブサイトなどでよく見かける「この記事は3分で読めます。」という表示がそれにあたります。
読了時間の表示を、記事のタイトル下に記述する方法について丁寧に解説していきます。

日本語を読む速さ
jQueryで「この記事は約3分で読めます。」を実装する方法
1. コード解説
まとめ

日本語を読む速さ

あたりまえですが、読了時間を決定するためにはまず1分当たりに読むことができるの日本語の文字数を設定する必要があります。

例えばその値を400にした場合、400文字の記事の読了時間は1分になり、800文字の記事の読了時間は2分になります。
日本語を読む速さの平均は、1分当たり400文字～600文字と言われているので、今回はその値を600に設定しました。
ここの部分はお好みで変更してもらっても構いません。

jQueryで「この記事は約3分で読めます。」を実装する方法

では実際にコードを書いて、機能を実装して行きましょう。
はてなブログで読了時間を表示させるには、次のようなコードを記述します。

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 読了時間 -->
<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var count = 600;
var $length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var min = Math.floor($length / count);
var estimatedTime = '記事は約'+ min +'分で読めます。';
if(min == 0){
estimatedTime = '記事は1分以内で読めます。';
}
var text = '<p style="text-align: right;"><span style="background: linear-gradient(transparent 80%, #043d7894 60%);">' + estimatedTime + '</span></p>';
$('.entry-categories').after(text);
}, false);
</script>

このコードをはてなブログの【設定】→【詳細設定】→【headに要素を追加】欄に追記します。

コード解説

読了時間が1分未満の場合

if(min == 0){
estimatedTime = '記事は1分以内で読めます。';
}

1分間の文字数を600に設定していて、記事の文字数が500文字だった場合、minが0になってしまいます。
すると「記事は0分で読めます。」という訳の分からない表示になってしまします。
それを防ぐために、読了時間が1分未満だった場合は「記事は1分以内で読めます。」という表示になるようにif文で条件分岐をしています。

1分間に読む文字数を変更したい場合

var count = 600;

変数countの値を適当に変更してください。
デフォルトでは「600」になっていますが、実際のコンテンツを読む速さと差が生じる場合には適宜調整するようにしてください。
ちなみに、今回の読了時間は記事コンテンツ内のリンクやソースコードの文字数も含まれています。
なので、実際に読む文字数と計測した文字数に、若干の差が生じる可能性があるので注意してください。