【はてなブログ】「この記事は何分で読めます」を表示する方法【コピペでOK】

f:id:yuu304810:20210316183347j:image

こんにちは祐(@yuu304810)です。

 

今回は『「この記事は何分で読めます」を表示する方法』について、解説していきます。

 

下記が完成イメージです⇩

 

f:id:yuu304810:20210316180442j:image

 

とくに難しい作業や、専門知識などは必要なく、コピペだけでOKです。

 

ぜひ参考にしてみてください。

 

この記事で得られる情報

・「この記事は何分で読めます」を表示するメリット
・「この記事は何分で読めます」の表示方法

 

「この記事は何分で読めます」を表示するメリット

 

f:id:yuu304810:20210305065148p:plain
お姉さん
表示するメリットってあるのでしょうか? 
ないよりあるほうが読者に親切だと思います。 
f:id:yuu304810:20210305065242p:plain

 

いつ読み終えるかわからない記事より、目安が表示されていたほうが親切だと思うんですよね。

 

利便性が高まるというか…。

 

「〇分くらいなら読んでみようかな?」と、僕は思いますし、そう思う方も多いと思います。

 

設置して困ることはないので、ぜひ導入してみてください。

 

「この記事は何分で読めます」を表示するまでの手順

 

①ダッシュボードの【デザイン】を選択

 

f:id:yuu304810:20210316180937j:image

 

②【スパナマーク】→【記事】を選択

 

f:id:yuu304810:20210316181915j:image

 

③【記事上】に、これから紹介するコードを枠内に貼り付ける

 

f:id:yuu304810:20210316182144j:image

 

「この記事は何分で読めます」を表示する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行ほど間隔を開けて貼り付けてください。

 

以上で作業は完了です。

 

とても簡単でしたよね。

 

少しでも参考になれば嬉しいです。

トップへ戻る