WebflowのCMSで記事の読了時間を自動計算して表示する方法

WebflowのCMSを使ってブログ記事を管理している方の中には、「この記事は◯分で読めます」と自動表示したい と思う方も多いのではないでしょうか？

今回は JavaScriptを使って記事の読了時間を自動計算し、Webflowのページ上に動的に表示する方法 を解説します。

実際に試行錯誤しながら実装した過程も含めて、詳しく解説していきますので、ぜひ参考にしてください！

1.ステップ 1: 記事の構造を確認する

まず、WebflowのCMSにおいて記事の本文がどのように配置されているか確認します。

必要な要素:

記事本文のテキストが含まれる .article-content クラスのリッチテキストブロックを確認しましょう。これは記事のメインコンテンツを表示する部分です。

1-1.Webflowでの設定手順

WebflowのDesigner（デザインエディター）を開く
CMSコレクションページに移動（ブログ記事のテンプレートページなど）
記事本文を表示するリッチテキストブロックを選択
「クラス」を .article-content に設定する（既にある場合は確認のみ）

1-2.記事本文の要素を確認する方法

ページを公開する or プレビューを開く
ブラウザの開発ツール（F12キー）を開く
「Elements」タブで .article-content を検索
記事のテキストが正しく入っているか確認

また、読了時間を表示する .reading-time-container という div 要素をページ内に設置します。この要素は、JavaScript を使って計算した読了時間を動的に挿入するためのものです。

まず、Webflow のデザインモードで .reading-time-container を追加し、適切な位置に配置してください。例えば、記事タイトルのすぐ下などが適しています。

開発ツール (F12) を使って、記事本文が .article-content に適用されていることを確認しましょう。

console.log("記事本文:", document.querySelector(".article-content"));

このコードをコンソールで実行し、null ではなく、リッチテキストブロックのHTMLが表示されればOKです。

2.ステップ 2: JavaScriptで読了時間を計算する

Webflowのページで動的に読了時間を表示するには、JavaScriptを使います。

読了時間の計算には、一般的に1分間で500文字程度を読む という前提を採用します。

2-1. 初期実装（基本的な読了時間計算）

このスクリプトをWebflowの 「Before </body> タグ」エリア に追加すれば、ページが読み込まれた際に 記事本文の文字数を計算し、読了時間を .reading-time-container に挿入 できます。

document.addEventListener("DOMContentLoaded", function () {
    let articleContent = document.querySelector(".article-content");
    let readTimeContainer = document.querySelector(".reading-time-container");

    if (articleContent && readTimeContainer) {
        let text = articleContent.innerText.trim();
        let charCount = text.length;
        let readingSpeed = 500;
        let readingTime = Math.ceil(charCount / readingSpeed);
        readTimeContainer.textContent = `この記事は約 ${readingTime} 分で読めます。`;
    }
});
    }
});

3.ステップ 3: WebflowのCMSのロード遅延に対応する

Webflowでは CMSのデータが非同期でロードされるため、スクリプト実行時に記事本文がまだ読み込まれていない ことがあります。

この問題を解決するために、最大5秒間（100ms × 50回）記事のロードを待機する処理 を追加します。

3-1.修正後のJavaScript（Webflow向け最適化版）`‍`

document.addEventListener("DOMContentLoaded", function () {
    let articleContent = document.querySelector(".article-content");
    let readTimeContainer = document.querySelector(".reading-time-container");

    if (articleContent && readTimeContainer) {
        let text = articleContent.innerText.trim();
        let charCount = text.length;
        let readingSpeed = 500;
        let readingTime = Math.ceil(charCount / readingSpeed);
        readTimeContainer.textContent = `この記事は約 ${readingTime} 分で読めます。`;
    }
});
        readTimeContainer.style.display = "block";
        readTimeContainer.style.visibility = "visible";
        console.log("✅ 読了時間が設定されました:", readTimeContainer.textContent);
    }

    function observeContentChanges(articleContent, readTimeContainer) {
        let observer = new MutationObserver(() => {
            let text = articleContent.innerText.trim();
            let charCount = text.length;
            if (charCount > 0) {
                updateReadingTime(charCount, readTimeContainer);
            }
        });

        observer.observe(articleContent, { childList: true, subtree: true, characterData: true });
        observer.observe(readTimeContainer, { childList: true, subtree: true, characterData: true });
    }
});

4.ステップ 4: 読了時間が表示されない場合のデバッグ

4-1. `.reading-time-container` が見つからない

コンソールで次のコマンドを実行し、要素が存在するか確認してください。

console.log(document.querySelector(".reading-time-container"));

null なら要素がページに存在していない ので、Webflowで .reading-time-container を正しく追加してください。

4-2. CSSで非表示になっていないか確認

次のコードを実行し、要素が正しく表示されるか試します。

document.querySelector(".reading-time-container").style.display = "block";document.querySelector(".reading-time-container").style.visibility = "visible";

4-3. 記事本文の取得を確認

console.log(document.querySelector(".article-content")?.innerText);

ここで記事本文が取得できていれば、スクリプトは正常に動作している可能性が高いです。

5.まとめ

✅ WebflowのCMSで読了時間を自動表示するには、JavaScriptを使って記事の文字数を計算する
✅ Webflowの遅延ロードに対応するため、最大5秒間待機する setInterval を活用する
✅ .reading-time-container が正しく設定されているか確認し、CSSの影響をチェックする
✅ MutationObserver を使って、記事の内容が変わった場合にも対応