A Sky Blue Diary~想いをかたちに~

  日々の雑感や出来事を書き綴っています

【はてなブログ】「この記事は、約○分で読めます。」を表示するようにしました

みなさん、こんにちは。みっくんです。

ブログに訪問していただきまして、

ありがとうございます。

 

昨日の記事がいつもよりも長くなったので、

読んでいただけるには、

どうしたらいいかなと思い、

「この記事は、〇分で読めます。」を

表示することにしました。

 

目次

 

昨日、このブログを読んでいただいた方は、

気づいたかもしれません。

 

本文が始まる前の行の右側に

表示されています。

 

ブログを読んでると、たまに見かけませんか?

 

あれって、何だろうと思っていたのですが、

自動で、その記事の文字数をカウントして、

何分で読めるかを表示しているんです。

 

一度、導入したら、

毎回、入力する必要は、ないんです。

便利ですよね。

 

そこで、今回、

その導入方法を紹介したいと思います。

 

僕は、以下のサイトを参考にしました。

 

kuroyagikun.com

 

色んなサイトがあって、

実際に、書いてある通りにやってみたのですが、

3つか4つ試してみて、

表示できたのがこのサイトのやり方だけでした。

 

やり方は、簡単です。

導入方法を紹介したいと思います。

 

1.「この記事は、約〇分で読めます。」を導入する方法

以下のコードを

はてなブログの「設定」の「詳細設定」の

「headに要素を追加」欄に貼るだけです。

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 読了時間 -->
<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var count = 500;
var $length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var min = Math.floor($length / count);
var estimatedTime = 'この記事は、約'+ min +'分で読めます。';
if(min == 0){
estimatedTime = 'この記事は、1分以内で読めます。';
}
var text = '<p style="text-align: right;"><span style="background: linear-gradient(transparent 80%, #043d7894 60%);">' + estimatedTime + '</span></p>';
$('.entry-categories').after(text);
}, false);
</script>

jQueryのコードだそうです。

 

これを貼るだけで、

「この記事は、約〇分で読めます。」が

表示されます。

 

どのように表示されるかは、

このブログに表示されているので、

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

 

2.コードの説明

1.1分間で読める文字数とは

なお、何分で読めるかというのは、

人によって違いますが、

平均で、大体、1分間で、

400文字~600文字だそうです。

 

なので、僕は、1分間で、

読めるのが500文字という計算方法で、

表示されるようにしました。

 

ここは、変えることができるので、

好きな数字を入れてください。

 

変えるのは、こちらの箇所です。

var count = 500;

 

ちなみに、

計算される文字数には、記事内のリンクや

ソースコードの文字数も含まれていますので、

ご注意ください。

 

2.1分以内で読める場合

このコードには、いい所があります。

それは、読むのに1分かからない記事の場合、 

「この記事は、1分以内で読めます。」と

表示されることです。

if(min == 0){
estimatedTime = '記事は1分以内で読めます。';
}

 

上記の箇所で、表示されるようにしてあります。 

 

コード内で、指定していなければ、

記事の文字数が500文字に満たない場合、

「この記事は、約0分で読めます。」と

表示されてしまいます。

 

いいサイトを見つけました。

 

3.ブログの記事にカテゴリーが設定されていない場合

今回、紹介したコードは、

記事に設定されているカテゴリー要素

(.entry-categories)の後ろに

「この記事は、約〇分で読めます。」が

表示されるようになっています。

$('.entry-categories').after(text);

 

なので、ブログの記事にカテゴリーが

設定されていない場合や、

カテゴリー要素の配置を変えた場合には、

注意が必要とのことです。

 

3.最後に

いかがだったでしょうか。

 

「この記事は、約〇分で読めます。」を

表示すると、ブログの滞在時間とか

SNSへの登録が増えるそうです。

 

導入すると、そんなメリットも

あるのですね。

 

1分間に読む文字数や表示させる文は、

変えることができるので、

好みで、試してみてください。

 

ただ、コードについては、

ここに書いてあること以外のことは、

わかりません。

 

ネットで調べても、

htmlとJavaScriptjQuery

何なのかがわかりませんでした。

 

例えば、文字の大きさや色を

変えたかったのですが、ネットを検索して、

見つけた方法を試してみても、

うまく行きませんでした。

 

今回の記事を見た方で、

紹介したコードの文字の大きさや

色を変える方法がわかる方は、

教えていただけると、助かります。

 

よろしくお願いいたします。

 

以上、【はてなブログ

「この記事は、約○分で読めます。」を

表示するようにしましたでした。

 

最後まで、読んでくださいまして、

ありがとうございました。