redoブログ

現役スピーカー設計者によるお役立ち情報発信ブログ

【ブログカスタマイズ】はてなブログで「この記事は〇分で読めます」の簡単コード実装方法を紹介!

f:id:redo5151:20191120221429p:plain

こんにちは管理人のredoです。今日は記事の文字数に応じて、”この記事は何分で読めます”という表示をHTMLを使って自動で設定する方法をご紹介したいと思います。「はてなブログ」でもコピペで即実装できます。もちろん「無料版はてなブログ」でも実装可能ですよ。簡単に実装出来て「SEO対策」としても有効なのでオススメです。

記事の長さによっては”家に帰ってからゆっくりパソコンで読もう”となったりもしくは”この長さならさらっと読んでしまおう”など冒頭に書いてあるとスクロールして確認する時間が省けるので、大変便利ですよね。

私が良く普段よく閲覧しているYahoo!ニュースでも記事が何分で読めるか表示されていることがあります。

日本人の記事を読む時間の目安

一般的には平均の読書速度は1分間で約400~600字とのことです。なので、2000字~3000字で5分程度かかる計算になります。

実際は”流し読みが多い人”や”じっくり読み込む人”によっても誤差があると思うので目安です。また、朝の通勤や通学時間に読むか、夜に家で読むかなどシチュエーションにも左右されますよね。

私の感覚では、通勤や通学中に読む想定だと、少し長め設定かなと感じました。家でゆっくり読む想定で丁度いいと感じます。

 

自分の読書速度が気になる方は「読書速度ハカルくん」で調べてみましょう。

読書速度の測定・読書スピード計測|読書速度ハカルくん

 

”記事を読む時間”の設定手順

f:id:redo5151:20191120205506p:plain

”記事を読む時間”を設定する実装コード(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です。

 

コードの貼り付け場所

f:id:redo5151:20191120212745p:plain

はてなブログの管理画面左タブ→デザイン→カスタマイズ(トルクアイコン)→記事→”記事上”

グローバルメニューやTwitterのフォローボタンのアイコン実装のように個別にURLの設定も不要なので、簡単に実装できます。また、”CSS”も使わないので、コードの優先度によって表示されないエラーも比較的少ないとも思いますので、オススメです。

 

【Font Awesome はてなブログ】アイコンフォントが表示されない?|「はてなブログ」に対応させる方法を紹介!

【はてなブログ 】アイコンフォントを使いこなす|グローバルメニューにオススメ

【SEO対策 はてなブログ】レイアウトもスッキリ|グローバルメニュー追加方法紹介

【はてなブログ 吹き出し会話作成手順】 BUMPのライブMCを吹き出しで表現

まとめ