サイト滞在時間伸ばす！記事を読むのに必要な時間を表示する方法【図解あり！】

こんにちはユレオです！

いろんな方のブログを見ていると様々な工夫がされていますが、不思議に思った工夫がありました。

記事のタイトルの上に「この記事は何分で読めます」というのが書かれていることがあるのですが、これはいったい何の意味があるのだろう？

忙しい人が「2分で読めるなら今読むか」とか、「10分かかるならブックマークして後で読もう」と判断するためのものなのかなと思っていたのですが、どうやらその通りだったみたいです。

https://www.ideaxidea.com/archives/2010/07/reading_estimates.html

Rrian Crayさんという人のサイトで興味深い実験がされていましたよ。彼はなんとかしてサイトの滞在時間を延ばせないか、と試行錯誤した結果、「記事の冒頭に『読むための所要時間』を表示させておけばいいんじゃね？」と思いつきます。 ↑ こういうやつね。そ…

この記事よるとRrian Crayさんという人がサイトの滞在時間を伸ばすために実験として、「記事を読むための所要時間の表示」を行ったそうです。

その結果13.8%滞在時間をのばすことができたそうです。

またTwitterやRSSの登録やRTが67%も増えたという成果も報告されたとのことでした。

ただ、これらの実験結果は7年近く前のものなので現在有効な手法かはわかりません。

ですが、記事を読むための時間の目安がわかるのは面白いと思い、実装の方法を調べました。

●スポンサーリンク

◆記事の目次◆

設定手順１　デザインCSSの設定
設定手順２　記事下の設定
設定手順３　記事上の設定
設定手順４　プレビューでの確認

設定手順１　デザインCSSの設定

この設定方法は以下のサイトを参考にさせていただきました。

つばさのーと

滞在時間は本当に上がるの？読了までの所要時間を予測して表示するカスタマイズ

https://www.tsubasa-note.blog/entry/finish-reading-time-customize

こんにちは、つばさ（@tsubasa123）です。www.ideaxidea.comちょっと古いですがこちらの記事にインスパイアされたカスタマイズです。

「記事を読むのに必要な時間」は自由に配置できるのですが、今回は「記事の題名の上部に表示」する方法になります。

１：はてなブログの　デザイン→カスタマイズ→デザインCSS　を開きます。

２:デザインCSSに以下のコードをコピーします。

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

設定手順２　記事下の設定

１：はてなブログの　デザイン→カスタマイズ→記事→記事下を開きます

２:記事下に以下のコードをコピーします。

<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;
});
$('#estimated-area').append('この記事を読むのに必要な時間は約<span>' + Math.ceil(contents.length / 400) + '<\/span>分です。');
});
})();
</script>