すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

コピペでOK!はてなブログで記事の読了時間の目安を表示させてみた!

こんばんは、すずしんです。

今回は、はてなブログ記事の表示面でのカスタマイズという事で…。
記事の読了時間の目安を本文前に表示させてみることにしました。

実装方法としては、記事の読了時間を計算するJavaScriptのコードを貼り付けるだけです。
コピペで簡単に導入できますので、ぜひあなたも試してみてはいかがでしょうか?

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

他のはてなブログの記事を見ていると…。
記事に読了時間の目安が表示されていることがありますよね。

これがあると、例えば…。
「この記事は3分で読めるのか、じゃあ試しに読んでみよう!」
となるかもしれませんよね。

逆に、読了時間が長い場合には、興味がありそうな記事の場合なら…。
「時間がかかりそうだから、後で読もう!」
となって、ブックマークしてくれるかもしれません。

いずれにしても、読者にとって興味がありそうな記事を書くことができれば、読了時間の表示はメリットになるのではないでしょうか。
また、ユーザビリティを向上させるためにも、読了時間の目安は表示させておいた方が良いのではないかと私は思います。

記事の読了時間の目安の表示方法

記事の読了時間の目安を表示するには、まず読了時間を計算するJavaScriptのコードを書く必要があります。
それが以下のようなコードですね。

<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 800;
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>

このコードにあるwpmは、1分間に読むことができる文字数を表しています。
ここでは、とりあえず暫定的に800文字としています。
もし変更したい時には、数字を好きなように書き換えてください。

上記のコードをコピーしたら、ダッシュボードから「デザイン」→「カスタマイズ」を選択します。
「記事」メニューを展開して、下の方へスクロールしていき「記事上下のカスタマイズ」を表示させます。
「記事上」のテキストエリアに、さきほどコピーしたJavaScriptのコードを貼り付けてください。
貼り付けが終わったら保存します。

以上で、作業は終了です。
これで、自動的に全ての記事で読了時間が表示されるようになります。
簡単でしたよね?

試しに、私のブログでの表示例を示しておきます。
こんな風に表示されるのだなとイメージされると良いと思います。

f:id:Suzushin:20170504173515j:plain

ひとこと

記事の読了時間を表示しておくと、読者にとってその記事を読むのにどれくらい時間がかかるかの目安になります。
これは、ユーザビリティの向上につながるのでは無いかと私は考えています。

機能の実装は、コピペするだけと非常に簡単となっていますので…。
ぜひあなたのブログにも、試しに記事の読了時間を表示させてみませんか?