こんにちは管理人のredoです。今日は記事の文字数に応じて、”この記事は何分で読めます”という表示をHTMLを使って自動で設定する方法をご紹介したいと思います。「はてなブログ」でもコピペで即実装できます。もちろん「無料版はてなブログ」でも実装可能ですよ。簡単に実装出来て「SEO対策」としても有効なのでオススメです。
記事の長さによっては”家に帰ってからゆっくりパソコンで読もう”となったりもしくは”この長さならさらっと読んでしまおう”など冒頭に書いてあるとスクロールして確認する時間が省けるので、大変便利ですよね。
私が良く普段よく閲覧しているYahoo!ニュースでも記事が何分で読めるか表示されていることがあります。
日本人の記事を読む時間の目安
日本人の平均読書速度は1分で400~600字!
一般的には平均の読書速度は1分間で約400~600字とのことです。なので、2000字~3000字で5分程度かかる計算になります。
実際は”流し読みが多い人”や”じっくり読み込む人”によっても誤差があると思うので目安です。また、朝の通勤や通学時間に読むか、夜に家で読むかなどシチュエーションにも左右されますよね。
私の感覚では、通勤や通学中に読む想定だと、少し長め設定かなと感じました。家でゆっくり読む想定で丁度いいと感じます。
自分の読書速度が気になる方は「読書速度ハカルくん」で調べてみましょう。
”記事を読む時間”の設定手順
”記事を読む時間”を設定する実装コード(HTML)
表示イメージとしては,赤枠の右上のように表示されます。私の現状の設定では1分間で600字を読む想定になっています。
<script type="text/javascript"> addEventListener('DOMContentLoaded', function() { var wpm = 600; var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length; var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>'; $('.entry-content').prepend(message); }, false); </script>
こちらはすずろぐ様のサイトを参考にさせて頂きました。感謝しております。
・3行目の”var wpm”の数値(600)を変更すれば、1分間に読む時間が変更可能。
・5行目の”font-size”の80%を変更すれば、フォントサイズが変更可能。
・5行目の"color"の#999999を変更すれば色の変更可能。
・5行目の”この記事は約'+ Math.ceil(length/wpm) +'分で読めます。”の箇所をいじれば言い回しは自由に変更可能です。”約'+ Math.ceil(length/wpm) +'分で読めます。”ともう少しシンプルな言い回しにしてもOKです。
コードの貼り付け場所
グローバルメニューやTwitterのフォローボタンのアイコン実装のように個別にURLの設定も不要なので、簡単に実装できます。また、”CSS”も使わないので、コードの優先度によって表示されないエラーも比較的少ないとも思いますので、オススメです。
”個別のURL設定等も一切不要”なので、コピペで実装可能です!
【Font Awesome はてなブログ】アイコンフォントが表示されない?|「はてなブログ」に対応させる方法を紹介!
【はてなブログ 】アイコンフォントを使いこなす|グローバルメニューにオススメ
【SEO対策 はてなブログ】レイアウトもスッキリ|グローバルメニュー追加方法紹介
【はてなブログ 吹き出し会話作成手順】 BUMPのライブMCを吹き出しで表現
まとめ
・「SEO対策」として、”読書時間の自動設定”をカスタマイズしましょう。
・実装コードはコピペで即実装可能
・読書速度の測定で自分の読書スピードを確認してみましょう。
・”無料はてなブログ”でもカスタマイズできます