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が何なのかが、

いまいち、わかりません。

 

例えば、文字の大きさや色を変えたかったのですが、

その方法がいくら、ネットを検索して、

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

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

 

今回の記事を見た方で、

紹介したコードの文字の大きさや色を変える方法がわかる方は、

よかったら、教えていただけませんでしょうか。

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

 

以上、【はてなブログ

「この記事は、約○分で読めます。」を表示するようにしました。でした。

 

最後まで、読んでくださって、ありがとうございました。

お問い合わせ

ブログへの質問、ご意見は、こちらからどうぞ。
お気軽に、お問い合わせください。

*は必須項目です

名前

メールアドレス

性別

男性女性

*お問い合わせ内容

Powered by FormMailer.

SSL標準装備の無料メールフォーム作成・管理ツール | フォームメーラー