ブログのカスタム

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

スポンサーリンク


こんにちはユレオです!

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

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

f:id:soul-vibration:20170717090008j:plain

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

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

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

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

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

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

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

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

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

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

f:id:soul-vibration:20170717092235j:plain

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

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

スポンサーリンク

設定手順2 記事下の設定

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

f:id:soul-vibration:20170715082952j:plain

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

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

*以下の「400」部分を書き換えることで既読までの時間を変更できます。下記は400文字/分です。

 + Math.ceil(contents.length / 400) +

 

設定手順3 記事上の設定

1:はてなブログの デザイン→カスタマイズ→記事→記事上を開きます。

f:id:soul-vibration:20170717093804j:plain

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

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

スポンサーリンク

設定手順4 プレビューでの確認

1:デザイン→カスタマイズ→記事→記事ページをプレビューを押します。

f:id:soul-vibration:20170717094719j:plain

2:記事下部分に記事を読むのに必要な所要時間が表示されます。

問題がなければ画面左上の「変更を保存」を選択します。

f:id:soul-vibration:20170717095346j:plain

以上で終了です。

今回は少々複雑だったと思いますがいかがでしたでしょうか。

この設定では400文字が1分として計算されているので、ブログの内容に合わせて数値を調整いただければと思います。

スポンサーリンク


おすすめのアフィリエイトASPランキング

「ASP(アフィリエイト・サービス・プロバイダ)」とは、アフィリエイトの広告主とトやブログ運営者を繋ぐ仲介業者のことで、ブログ運営で広告などを掲載するにはASPに登録する必要があります。

そうしたASPは数多くありますが、初心者向けのおすすめのASPをご紹介いたします。

1位 A8.net
A8.netは広告主数が豊富で、ブログ運営者の多くが利用するアフィリエイトサービスです。
ブログを始めたばかりの方もwebサイトやブログを登録できますし、手続きも簡単でアフィリエイトを手軽に始めることができます。
また、A8.netでは「セルフバック」が充実しており、自分で商品の購入やサービス申込むことでアフィリエイトの報酬が得られ、実際の商品をお得に購入できるのでレビュー記事が書きやすいというメリットもあります。
総合
商品種類
初心者向け

A8.netの詳細ページはこちら

2位 もしもアフィリエイト
もしもアフィリエイトはブログ運営の初心者でも成果を上げられるように成果を上げる為の方法について詳しく書かれたマニュアルがあるなど、「ブログ運営初心者に対して嬉しいサービス」が充実しています。
また、Amazonアソシエイトと楽天アフィリエイトをまとめれるのは、管理がしやすい点が初心者にとってポイントが高く、W報酬制度やプレミアム報酬などの独自の報酬制度があります。
総合
商品種類
初心者向け

もしもアフィリエイトの詳細ページはこちら

3位 バリューコマース
バリューコマースはYahooショッピングでの報酬の取りまとめに力をいれていたり、スマートフォン向けのオーバーレイ広告が掲載できるなど、ポイントの高いサービスが提供されています。
また、メルカリなどのバリューコマースにしかない広告案件があり、メインのASPがすでにあったとしても広告案件の隙間を埋めたり、比較として登録しておいて損はありません。
総合
商品種類
初心者向け

バリューコマースの詳細ページはこちら