
こちらの記事を参考に実際に試してみたので備忘録的に記載します。
ブログやニュース記事などを読んでいるとたまに「この記事は○○分で読めます」と書かれているのを見たことがあると思います。
どのくらい参考になるかは置いといて、一つの指標として判断している人はそれなりにいるのではないでしょうか?
電車の中とかなにかしながらたまたま見かけた記事を読もうと思ったものの結構なボリュームだと後で読もうしますし、3分で読めます!と書いてあれば今のうちに読んでしまおうと判断できるからです。
「はてなブログ」を運営している方向けに
限定的な記事になりますが、はてなブログを運営しているのであれば下記のソースをコピペするだけでこの機能を持たせることが可能です。
<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 500;
var length = $('.entry-content').text().trim().replace(/[nr]/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>
今度時間ある時にワードプレス向けにもプラグインやfunctions.phpへの記載で対応可能なので、書いてみたいと思います。
どこにコピペするの?
「はてなブログ」を運営している方であれば、多少カスタマイズしたりしてるかと思うのですが、ダッシュボード内のメニューで「デザイン」という項目があります。
「デザイン」をクリックすると「カスタマイズ」というスパナマークがありますのでそこをクリックします。
「記事上」がいいんじゃないかな..
カスタマイズのメニューまで辿り着ければ、さまざまなカスタマイズ項目があります。
どうしたらいいかわからない方は、このソースをコピペするのであれば「記事上」という項目へコピペしてあげるといいと思います。