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 を使って、記事の内容が変わった場合にも対応
