blog

【コピペ一発】はてなブログで「この記事は〇分で読めます」を設定する方法! 2024年11月

f:id:amber_owl:20170927113243j:plain

たまに見るこのタイトル上の「この記事は何分で読めます」というフレーズが入っている記事を目にしますが、どんな意味があるのでしょうか?

f:id:amber_owl:20170927112857p:plain

こういうの!

この記事によると、下記の成果があったそうです。
・滞在時間が13.8%向上
・SNSへの登録が67%向上

これが本当ならやるしかない!という事でやってみました。

下記の記事を参考にさせていただきました。

www.tsubasa-note.blog

導入するメリット

■短い記事は、最後まで読んでもらいやすくなる

確かに、忙しくても、短い時間で読める記事なのであれば、最後まで読んで見ようと思ってもらえる可能性が高くなると思います。
読者も、どれくらいで読めるのか予め書いてあれば、「これくらいで読めるなら読んでみよう」と思う方も増えますよね。
忙しい人でも、電車通勤、通学をしていれば、待ち時間は数分ありますからね。

■長い記事は、ブックマークをしてもらいやすくする

長い記事の場合は、冒頭に読むのに結構時間がかかるなと分かれば、ブックマークをされる機会が高くなります。
一般的に、時間がある人はそのまま読んでくれますが、時間が限られている人は、長い記事を読み始めると途中で「ちょっと長いなやめよう」と離脱してしまうかと思います。
しかし、冒頭に何分で読めるのか書いてあれば、予めブックマークをしてもらえる人が増えて、途中で離脱してしまった読者も後でもどってきてもらえる可能性が高くなるというわけです。

カスタマイズについて

下記のように、それぞれコードを入れてください。

1.CSSの導入

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」を開き下記を追記してください。

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

2.HTMLの導入

「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事上」を開き下記を追記してください。

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

3.JavaScriptの導入

「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事下」を開き下記を追記してください。

<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>||<

上記の「Math.ceil(contents.length / 400) +」の400の部分を変更すれば読む時間を変更できます。このまま利用していただくと400字読むのに1分かかる想定になります。

※jQueryを利用しますので、まだjQueryを利用したことが無いという方は、最初に下記のコードも導入しておいてください。
場所は、先程と同じ「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事下」で大丈夫です。

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

まとめ

冒頭にある効果があるかと言われると少し疑わしい部分は多々ありますが、試してみる価値はあるのかなと思いました。
今後、結果が出ましたら、結果が良くても悪くても追記をしようと思います。

最後までお読み頂きありがとうございました。

-blog
-