にゃん分間待ってやる

「文章の書き方」や「アクセスアップ」などブログ運営のテクニックを解説。

「この記事は◯分で読めます」を表示する方法

この記事は◯分で読めます
この記事は◯分で読めます

「この記事は◯分で読めます」
を自動的に表示するスクリプトを書きました。

<script>
function extract_text(e){var a="";var b=e.childNodes;for(var c=0;c<b.length;c++){if(b[c].nodeName=="#text"){var d=b[c].data.trim();if(d){a+=d;}}else{if(b[c].nodeName=="SCRIPT"){}else{if(b[c].nodeName=="PRE"){}else{if(b[c].nodeName=="CODE"){}else{var d=extract_text(b[c]);a+=d;}}}}}a=a.replace(/[\n\r]/g,"");return a;}addEventListener("DOMContentLoaded",function(){var a=document.getElementsByClassName("entry-content")[0];text=extract_text(a);var b=Math.floor(text.length/600);if(b==0){b=1;}if(b<=5){var c=document.createElement("p");c.setAttribute("style","font-size: 80%; color: #999; text-align: right;");c.textContent="この記事は"+b+"分で読めます。";a.insertBefore(c,a.firstChild);}},false);
</script>

はてなブログユーザーは、このコードをブログに貼り付けるだけで
「この記事は◯分で読めます」
が表示されるようになりますよ。

はてなブロガー以外の人も少しコードを直せば動かせます。

詳しくは続きをどうぞ。

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ

「◯分で読めます」のメリット

「1分で読めます」のように表示することで、
読者に「1分だけならちょっと読んでみようかな」と思わせることができます。

ゴールが分からない状態でマラソンすると死ぬほどつらいけど、公園を1周するみたいな具体的な目安があると楽しく走れたりします。
目安を作ってあげることで最初の1歩を踏み出しやすくする仕掛けですね。

一般的な読書スピード

日本人の一般的な読書スピードは1分間に400~600文字といわれています。
原稿用紙1~2枚ですね。

大まかな仕組み

こんな感じでスクリプトが動いています。

  1. 本文のところだけ文字数をカウントする
  2. 1分間に600文字換算で所要時間を計算
  3. 5分以下なら画面に表示

たとえば100分などの長尺の場合は表示すると読む気が失せるかと思ったので
5分以内で読める場合だけ表示するようにしました。

ノイズ対策

文字数をカウントするときにはURLなども区別せずに数えています。

たとえば、以下のURLは30文字。
https://toeicmanten.hateblo.jp

しかし、URLを一字一句読む人なんていないでしょう。
そのため、ノイズ(読む必要が無い文字)も混ざっているという前提で、
1分間に600文字という速めの読書スピードで計算することでバランスを取っています。

設定方法

デザイン > カスタマイズ(スパナアイコン) > 記事 > 記事下
デザイン > カスタマイズ(スパナアイコン) > 記事 > 記事下

はてなブログ管理画面 > デザイン
カスタマイズ(スパナアイコン) > 記事 > 記事下
に以下のコードを貼りつけましょう。

<script>
function extract_text(e){var a="";var b=e.childNodes;for(var c=0;c<b.length;c++){if(b[c].nodeName=="#text"){var d=b[c].data.trim();if(d){a+=d;}}else{if(b[c].nodeName=="SCRIPT"){}else{if(b[c].nodeName=="PRE"){}else{if(b[c].nodeName=="CODE"){}else{var d=extract_text(b[c]);a+=d;}}}}}a=a.replace(/[\n\r]/g,"");return a;}addEventListener("DOMContentLoaded",function(){var a=document.getElementsByClassName("entry-content")[0];text=extract_text(a);var b=Math.floor(text.length/600);if(b==0){b=1;}if(b<=5){var c=document.createElement("p");c.setAttribute("style","font-size: 80%; color: #999; text-align: right;");c.textContent="この記事は"+b+"分で読めます。";a.insertBefore(c,a.firstChild);}},false);
</script>

これだけで設定は完了です。
すべての記事で「◯分で読めます」の表示が現れます。

カスタマイズ

◯分以下の場合だけ表示

このスクリプトは5分以下で読める場合だけ「◯分で読めます」を表示するように設定しています。

コードの中にif(b<=5)という部分があるので、
5の部分を書き換えると、何分以下まで表示させるかを調節できます。

はてなブロガー以外の人

はてなブログ 本文エリアの目印
はてなブログ 本文エリアの目印

はてなブログの場合はHTMLソースコードの中で
<div class="entry-content">
というのが本文エリアの目印になっています。

はてなブログ以外の場合でも本文の始まりに
<div class="xxx">
のようなものがあると思います。

前述の<script>~~</script>の中に出てくる
getElementsByClassName("entry-content")
entry-contentの部分をxxxに書き換えれば「はてなブログ」以外でも「◯分で読めます」の表示ができます。

xxxというのは「たとえ」であって、実際にはどういうフレーズが入るかはWordpressなのか、アメブロなのかなどによって変わります。

お知らせ

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

この記事は参考になりましたか?
役に立ったという方はブックマークをお願いします。
このエントリーをはてなブックマークに追加

読者登録は以下のボタンから

Twitterでこの記事を書いた人をフォローする場合はこちら

この記事をツイートする場合はこちらからお願いします。

ブログ村ランキングにも参加中。
にほんブログ村 にほんブログ村へ

おすすめのシリーズ記事

ブロガーさんには以下のシリーズ記事もおすすめです。