みなさん、こんにちは。みっくんです。
ブログに訪問していただきまして、
ありがとうございます。
昨日の記事がいつもよりも長くなったので、
読んでいただけるには、どうしたらいいかなと
思い、「この記事は、〇分で読めます。」を
表示することにしました。
目次
昨日、このブログを読んでいただいた方は、
気づいたかもしれません。
本文が始まる前の行の右側に
表示されています。
ブログを読んでると、たまに見かけませんか？
あれって、何だろうと思っていたのですが、
自動で、その記事の文字数をカウントして、
何分で読めるかを表示しているんです。
一度、導入したら、毎回、入力
する必要は、ないのです。
便利ですね。
そこで、今回、その導入方法を
ご紹介したいと思います。
僕は、以下のサイトを参考にしました。
色んなサイトがあって、実際に、
書いてある通りにやってみたのですが、
3つか4つ試してみて、表示できたのが
このサイトのやり方だけでした。
やり方は、簡単です。
導入方法を紹介したいと思います。
１．「この記事は、約〇分で読めます。」を導入する方法
以下のコードをはてなブログの「設定」の
「詳細設定」の「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のコードだそうです。
これを貼るだけで、
「この記事は、約〇分で読めます。」が
表示されます。
どのように表示されるかは、
このブログに表示されているので、
参考にしてみてください。
２．コードの説明
１．1分間で読める文字数とは
なお、何分で読めるかというのは、
人によって違いますが、平均で、
大体、1分間で、400文字～600文字
だそうです。
なので、僕は、1分間で、読めるのが
500文字という計算方法で、表示される
ようにしました。
ここは、変えることができるので、
好きな数字を入れてください。
変えるのは、こちらの箇所です。
var count = 500;
ちなみに、計算される文字数には、
記事内のリンクやソースコードの
文字数も含まれていますので、
ご注意ください。
２．1分以内で読める場合
このコードには、いい所があります。
それは、読むのに1分かからない記事の場合、
「この記事は、1分以内で読めます。」と
表示されることです。
if(min == 0){
estimatedTime = '記事は1分以内で読めます。';
}
上記の箇所で、表示されるようにしてあります。
コード内で、指定していなければ、
記事の文字数が500文字に満たない場合、
「この記事は、約0分で読めます。」と
表示されてしまいます。
いいサイトを見つけました。
３．ブログの記事にカテゴリーが設定されていない場合
今回、紹介したコードは、記事に
設定されているカテゴリー要素
(.entry-categories)の後ろに
「この記事は、約〇分で読めます。」が
表示されるようになっています。
$('.entry-categories').after(text);
なので、ブログの記事にカテゴリーが
設定されていない場合や、カテゴリー
要素の配置を変えた場合には、注意が
必要とのことです。
３．最後に
いかがでしたか？
「この記事は、約〇分で読めます。」を
表示すると、ブログの滞在時間とか
SNSへの登録が増えるそうです。
導入すると、そんなメリットも
あるのですね。
1分間に読む文字数や表示させる文は、
変えることができるので、好みで、
試してみてください。
ただ、コードについては、
ここに書いてあること以外の
ことは、わかりません。
ネットで調べても、htmlとJavaScriptと
jQueryが何なのかがわかりませんでした。
例えば、文字の大きさや色を
変えたかったのですが、ネットを
検索して、見つけた方法を試して
みても、うまく行きませんでした。
今回の記事を見た方で、紹介した
コードの文字の大きさや色を変える
方法がわかる方は、教えていただけると、
助かります。
よろしくお願いいたします。
以上、【はてなブログ】
「この記事は、約○分で読めます。」を
表示するようにしましたでした。
最後まで、読んでくださいまして、
ありがとうございました。
