コピペで簡単 はてなブログに「この記事は何分で読めます」を設置する方法

どうも、マサ（@masa5care）です

今回は、はてなブログのカスタマイズについての話です

たまに、ブログの先頭に「この記事は約5分で読めます」とか表示されているブログがありますよね

あれってどうやるんかなぁと調べてみたら結構簡単だったので手順を書いておきます

そもそも読める時間を表示するメリットは？

すでに当ブログにも設置されていますが、記事の先頭に「この記事は約○分で読めます」と表示されているヤツです

ま、いる・いらんっていうたら恐らくいらん機能だと思うのですが、ただ、これを表示することで

滞在時間が13.8%伸びる
SNSへの登録が67%増える

っていう調査結果があるようで、そんなん言われたらやるしかないじゃないですか

ってことで、勉強ついでにやりました

設置手順

こちらのブログを参考に、一部、デザインやコードを改造させていただいております

www.tamashii-yusaburuyo.work

コピペで簡単です、下記3箇所に特定のコードを貼り付けるだけです
コピペする場所に元々何か入っている場合は、その一番下に追記する形で追加してください

デザインCSS

「デザイン」→「カスタマイズ（スパナアイコン）」→「デザインCSS」に下記のコードをコピペしてください

当ブログと同じものでよければそのまま使っていただいていいです
ここをいじれば色や文字サイズを変更できます

/*この記事は何分で読めます*/
#estimated-area {
    color: #888;
    font-size: 14px;
}
#estimated-area span {
    color: #d00;
    font-size: 16px;
    font-weight: bold;
    padding: 0 3px;
}

記事上

「デザイン」→「カスタマイズ（スパナアイコン）」→「記事」→「記事上」に下記のコードをコピペしてください

実際に表示させる場所に入れてください
記事に入ってすぐに見れる場所がいいかと思います

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

記事下

「デザイン」→「カスタマイズ（スパナアイコン）」→「記事」→「記事下」に下記のコードをコピペしてください

読むのに何分かかるのか計算しているプログラムになります
ここ、少々いじってます、説明は後ほど

<script>
(function() {
    $(function() {
        var contents = '';
        var regSpace = /^\s*$/;
        var ignoreNodeType = ['SCRIPT', 'PRE'];
        
        $('.entry-content').contents().each(function() {
            var s = $(this).text().replace(/\r?\n/g, '');
            if (regSpace.test(s)) return;
            if (s === '<!-- more -->') return;
            if ($.inArray(this.nodeName, ignoreNodeType) !== -1) return;
            s = s.replace(/\s/g, '');
            contents +=  s;
        });
        
        var yomerumoji = 400;
        var nanfun = '';
        var jikan = Math.ceil(contents.length / yomerumoji);
        
        nanfun = 'この記事は<span>' + jikan + '分<\/span>くらいで読めそうです';
        if ( jikan === 0 ) {
            nanfun = 'この記事は<span>1分以内<\/span>で読めそうです';
        }
        if ( jikan >= 10 ) {
            nanfun = nanfun + 'が、ブックマークして後で読むのもアリです';
        }
        $('#estimated-area').append(nanfun);
    });
})();
</script>

以下の記事を参考に、ちょこっといじって追加した部分を抜き出しておきます

www.clrmemory.com

1分間に読める文字数

コード内

var yomerumoji = 400;

ここの「400」という数字が1分間に読める文字数の設定です
この数字をいじることで、読む速度の調整ができます

一応、平均値らしい400文字を1分で読める設定にしてますが、どんなもんでしょう
私はあんまり自信ないですわ

短文判断

コード内

if ( jikan === 0 ) {

ここは1分間に読める文字数未満の記事だった場合「0分で読めます」と表示されるとおかしいので「1分以内で読めます」という表記にしている処理です

長文判断

コード内

if ( jikan >= 10 ) {

ここの「10」という数字が長文判断の時間です
計算で10分以上かかると出た記事は、長文につきブックマークを勧める文章に変更しています

いきなり「40分で読めます」とか言われたらだれも読んでくれませんしね

最後に

ということで、コピペで簡単にできる「何分で読めます」設置のお話でした

表示させたからどーなんやという話ですが、サイトの滞在時間が伸びるらしいことと、ある程度時間が表示されているとユーザーさんはその場で読む・読まないの判断ができますもんね

ただ、短いとは言え記事開く度にプログラム走ってますので、サイトの読み込み速度などちょこちょこ見ながらしばらく様子見てみます

それではまた