こんにちは祐（@yuu304810）です。
今回は『「この記事は何分で読めます」を表示する方法』について、解説していきます。
下記が完成イメージです⇩
とくに難しい作業や、専門知識などは必要なく、コピペだけでOKです。
ぜひ参考にしてみてください。
・「この記事は何分で読めます」を表示するメリット
・「この記事は何分で読めます」の表示方法
「この記事は何分で読めます」を表示するメリット
いつ読み終えるかわからない記事より、目安が表示されていたほうが親切だと思うんですよね。
利便性が高まるというか…。
「〇分くらいなら読んでみようかな？」と、僕は思いますし、そう思う方も多いと思います。
設置して困ることはないので、ぜひ導入してみてください。
「この記事は何分で読めます」を表示するまでの手順
①ダッシュボードの【デザイン】を選択
②【スパナマーク】→【記事】を選択
③【記事上】に、これから紹介するコードを枠内に貼り付ける
「この記事は何分で読めます」を表示するCSSコード
<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 500;
var length = $('.entry-content').text().trim().replace(/[ ]/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>
上記のコードを、記事上に貼り付けます。
既存のコードがある場合は、5行ほど間隔を開けて貼り付けてください。
以上で作業は完了です。
とても簡単でしたよね。
少しでも参考になれば嬉しいです。
参考元：https://randamlife.hatenablog.com/entry/20190621/reading-time