Bloggerに「この記事は◯分で読めます」と自動表示させる

この記事は何分で読める？読了時間表示スクリプトの紹介

ブログ記事やウェブサイトに「この記事は約○分で読めます」と表示するJavaScriptスクリプトです。読者が記事の長さを事前に把握できるため、読むかどうかの判断がしやすくなります。

導入するメリット

• 読者の利便性向上
  長文記事でも「読むのに何分かかるか」が分かるため、読むタイミングを決めやすくなります。
• 滞在時間の向上
  読了目安を示すことで、読者が記事を最後まで読む確率が上がる傾向があります。
• デザイン性の向上
  Font Awesome の砂時計アイコン付きで、記事の上部にさりげなく表示できます。

サンプル表示イメージ

記事本文の最初（タイトル直後、本文の上）に以下のように表示されます：

コードサンプル

<!-- 読了時間表示スクリプト -->

<script type='text/javascript'>
  // <![CDATA[
$(function() {
  var wpm = 400;
  var $content = $('.post-body'); // ここはテーマに合わせて変更
  if ($content.length) {
    var length = $content.text().trim().replace(/[\n\r]/g,'').length;
    var minutes = Math.ceil(length / wpm);
    
    // 砂時計アイコン付きメッセージ
    var message = '<p style="font-size: 80%; color: #999; text-align: right;">' +
                  '<i class="fa-solid fa-hourglass-half"></i> この記事は約' + minutes + '分で読めます。</p>';
    
    $content.prepend(message);
  }
});
//]]>
</script>
  

導入方法・注意点

• Font Awesome の読み込み
  砂時計アイコンを表示するためにFont Awesome v6が必要です。ヘッドに上記リンクを追加してください。
• 記事本文のセレクタ確認
  テーマによって .post-body が違う場合があります。Bloggerなら .post-body、WordPressなら .entry-content など。
• 表示位置の変更
  prepend を使用しているため、記事本文の最初に表示されます。タイトルの上や別の位置に表示したい場合は、prepend → append に変更したり、挿入先セレクタを変更してください。
• デザイン調整
  CSS の font-size や color、text-align をテーマに合わせてカスタマイズ可能です。

まとめ

読了時間表示はユーザー体験を向上させる簡単な仕掛けです。コードは数行で導入でき、Font Awesome のアイコンも活用可能。

表示位置やデザインはテーマに合わせて柔軟に調整できます。