記事を読む所要時間を表示すると、ブログの再訪問率まで上がるらしい | Ameblo Hacks2~ユニークなアメブロカスタマイズをあなたに~

記事を読む所要時間を表示すると、ブログの再訪問率まで上がるらしい

$Ameblo Hacks2

「ブログを書く人のアイディアノート」さまの記事でこのような面白い話題が取り上げられていたので、「パクってもいいですか?」とメッセージを送ったところ、なんと快諾いただきました!
というわけで、早速書かせてもらいます!感謝です!!

詳しくは「ブログを書く人のアイディアノート」さまの記事をみていただくとして、記事の参考元を遡ってみたところ、どうやらリピート率やツイッターのフォロー率まで劇的にアップするらしいとのことで(ウチのブログに効果があるかどうかは別として)これは地味ながらもすんばらしいですね。
もともとはワードプレス用のPHPで書かれたコードだったのですが、javascriptでもできそうなので、アイディアノートさまの記事を参考にアメブロのプラグイン用にサクっと移植してみました。
サクっとと言いながら、IE対策で若干ハマっていたのは内緒です。

1秒あたりに読める文字数と写真1枚あたり観るのに何秒かかるかを考える


これはブログによって少し異なってきます。写真が多めなのかテキスト中心かでも変わりますし、行間を取るようなスタイルだとまた変わってくるかと思います。

ではそれを決めたら、フリープラグインにこちらのコードを貼りましょう。
<script type="text/javascript">
jQuery(function(){
var numCharsPerSecond = 6;//1秒間に何文字読めるか
var ImgViewTime = 3;//画像1枚あたり観るのに何秒かかるか
jQuery(".entry .subContents").each(function(){
jQuery(this).append('<p class="readtime" style="position:absolute;top:-30px;left:0px;"></p><div class="scp" style="display:none;"></div>');
jQuery(".scp",jQuery(this)).eq(0).get(0).innerHTML=jQuery(this).get(0).innerHTML;
var il=0;
jQuery("img",jQuery(this)).each(function (){if(jQuery(this).width()>100 && jQuery(this).height()>100){il++}
});
jQuery("#advertising2",jQuery(".scp",jQuery(this)).eq(0)).before("articleends");
var rt=((il*ImgViewTime)+(jQuery(".scp",jQuery(this)).eq(0).text().replace(/\s/g,"").split("articleends")[0].length/numCharsPerSecond));
jQuery(".scp",jQuery(this)).eq(0).remove();
jQuery("p.readtime",jQuery(this)).eq(0).get(0).innerHTML=rt>10?"この記事を読むのにかかる時間は"+String((rt/60)|0)+"分"+String((((rt%60)/10)|0)*10)+"秒くらいです。":"この記事を読むのにかかる時間は10秒以内です。";
});
});
</script>

numCharsPerSecondとImgViewTimeの値には、先程決めた値を入れましょう!
次にCSS
p.readtime{/*時間を表示する場所のCSS*/
background-color:#414141;/*背景色*/
padding:0px 10px;
font-weight:bold;/*文字を太字に*/
color:#ffffff;/*文字色*/
}
.entry .contents{
position:relative;
}
コメントを付けていますので、それを参考にカスタマイズしてみてください。

成功するとこんな感じになります。

$Ameblo Hacks2

これであなたのブログもアクセスアップ間違いなし?
ぜひぜひトライしてみてください!