「この記事は約◯分で読めます。」を表示する方法【はてなブログ カスタマイズ】

週末、何となく「はてなブログ」のカスタマイズを行ってみたくなりました。

WordPressであればプラグインでさまざまな機能を簡単に追加できるのですが、はてなブログの場合はどうするのかな？ということで、いろんな方の記事を参考にチャレンジしてみました。

今回は、はてなブログで記事を読む時間を表示する方法について、私の導入した手順をご紹介します。

「この記事は約◯分で読めます。」を表示する方法

先程の記事の手順で進める際に、私がちょっとつまづいた所などを整理しながら、手順をご紹介します。

（１）HTMLタグを追記する

<div id="estimated-area"></div>

上記のタグを記事に追加します。

はじめはどこに追記するのかわからず、記事１つ１つに追加したのですが、管理画面で記事上に追記することで、すべての記事に表示することができました。

「管理画面」＞「デザイン」＞「カスタマイズ」＞「記事」の中にある「記事上下のカスタマイズ」の「記事上」の入力スペースに追記

（２）CSSコードを追記する

/*記事所要時間*/
#estimated-area {
    color: #888;
    font-size: 12px;
}
#estimated-area span {
    font-size: 16px;
    font-weight: bold;
    padding: 0 3px;
}

上記のコードを以下に追加しました。

表示されるフォントのサイズ等もこのコードで調整できるようです。

「管理画面」＞「デザイン」＞「カスタマイズ」＞「デザインCSS」

（３）jQuery・JavaScriptのコードを追記する

<!--[if lt IE 9]>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->

<script>
(function() {
$(function() {
var contents = '';
var regSpace = /^s*$/;
var ignoreNodeType = ['SCRIPT', 'PRE'];
$('.entry-content').contents().each(function() {
    var s = $(this).text().replace(/ ? /g, '');
    if (regSpace.test(s)) return;
    if (s === '<!-- more -->') return;
    if ($.inArray(this.nodeName, ignoreNodeType) !== -1) return;
    s = s.replace(/s/g, '');
    contents += s;
});
$('#estimated-area').append('この記事を読むのに必要な時間は約<span>' + Math.ceil(contents.length / 400) + '</span>分です。');
});
})();
</script>

上記のコードを以下に追記しました。

「管理画面」＞「デザイン」＞「カスタマイズ」＞「記事」の中にある「記事上下のカスタマイズ」の「記事下」の入力スペースに追記

このコードでは「１分間に読める文字数を400文字」として設定されています。日本人の平均はだいたい１分間に400～600文字といわれているようです。

サイトで扱う記事の内容・話題によって”例えば、難解な記事の多いサイトでは文字数を少なくする”などを考えながら、この文字数を設定するのもよいかもしれません。

表示される文章もこのコードで編集できるようです。（今回は、少し変えてみました）

---

コードを追記する位置は、初心者には難しい部分もあると思います。

同じように悩まれる方へのご参考になればと思います。