Bloggerで「この記事は◯分で読めます」と自動表示する方法【読了時間の表示コード付き】

2026/02/15

Bloggerで「この記事は◯分で読めます」と自動表示する方法【読了時間の表示コード付き】

2/15/2026 By まつゆうカスタマイズ No comments

ブログ記事に読了時間を表示すると、記事を読む前に「どれくらい時間がかかるのか」を読者が一目で把握できるようになります。

これは最近のブログ運営でもよく見られる機能で、読者の滞在時間を伸ばす効果も期待できますし、記事の流し読み・じっくり読みたい人それぞれに親切な設計になります

「はてなブログ」の先人による実装例でも、読了時間の計算ロジックから実装方法まで詳しく紹介されていますが、Bloggerではテーマ編集でカスタムコードを挿入すれば簡単に実装できます。

読了時間の考え方

読了時間は基本的に、記事内の文字数（または単語数）÷ 1分あたりの平均読書速度（WPM）で計算します。

一般的に日本語記事なら 400〜500文字/分程度が目安です。
これは英語中心ブログで使われる単語数方式とは異なり、日本語は文字数ベースで考える方が現実の読書速度に近くなります。（英語の場合は単語数ベースで計算することが多いです）

実装手順

jQuery読み込みとカスタムJavaScriptの追加

Bloggerの「テーマ編集 → HTMLを編集」より、</head>直前（または<body>タグ内でもOK）に以下のコードを貼り付けます。


<!-- jQuery読み込み（未読み込みの場合） -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
  // 1分あたりの読了文字数（400〜500文字が目安）
  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);

    // 読了時間表示HTML
    var message = '<p style="font-size: 80%; color: #999; text-align: right;">この記事は約'+ minutes +'分で読めます。</p>';

    // 記事の先頭に挿入
    $content.prepend(message);
  }
});
</script>

コード解説

var wpm = 400;
→ 1分で何文字読めるかを設定します。日本語なら400〜500文字が目安です。
$('.post-body')
→ Bloggerのテーマで記事本文を囲っているクラス名です。テーマによって .entry-content や .post-content の場合もあります。
Math.ceil(length / wpm)
→ 切り上げ処理によって「約◯分」の表示を実現します。

カスタマイズ例

表示位置を変える

先頭ではなく記事の末尾に表示したい場合は、


$content.append(message);

としてください。

WPM値を変える

じっくり読む読者が多いブログなら 350、ざっと読む傾向が強いなら 450〜500 に調整してもOKです。

読了時間表示があるメリットまとめ

記事を読む前の判断材料になる
滞在時間を伸ばしやすい
読者満足度の向上に繋がる

参考リンク

まとめ

Bloggerでも今回のJavaScript を使えば、「この記事は◯分で読めます」を簡単に実装できます。

読了時間の表示はブログをより読みやすくし、読者の満足度向上にも効果的です。ぜひあなたのブログにも導入してみてください！

Blogger TIPS

2026/02/15