「この記事は約3分で読めます。」をはてなブログに設置する方法

ブログ運営
スポンサーリンク
ブログ運営
Info
最新のブログ運営(PV&収益)についてはTwitterで報告しています。
#クロヤギの運営報告
読了時間 挨拶

記事は約 3 分で読めます。

くろやぎ
くろやぎ

みなさん、こんにちは!
くろやぎ(kuroyagikuncom)です。
よろしければ、Twitterの方にも遊びに来てください。

この記事では「この記事は約3分で読めます。」をはてなブログに設置する方法を紹介します。
つまり、読了時間をjQueryを用いてはてなブログに実装する方法を解説します。

読了時間というのは、記事をどのくらいの時間で読むことができるかの目安のことです。
ウェブサイトなどでよく見かける「この記事は3分で読めます。」という表示がそれにあたります。
読了時間の表示を、記事のタイトル下に記述する方法について丁寧に解説していきます。

スポンサーリンク

日本語を読む速さ

あたりまえですが、読了時間を決定するためにはまず1分当たりに読むことができるの日本語の文字数を設定する必要があります。

例えばその値を400にした場合、400文字の記事の読了時間は1分になり、800文字の記事の読了時間は2分になります。
日本語を読む速さの平均は、1分当たり400文字~600文字と言われているので、今回はその値を600に設定しました。
ここの部分はお好みで変更してもらっても構いません。

jQueryで「この記事は約3分で読めます。」を実装する方法

では実際にコードを書いて、機能を実装して行きましょう。
はてなブログで読了時間を表示させるには、次のようなコードを記述します。

このコードをはてなブログの【設定】→【詳細設定】→【headに要素を追加】欄に追記します。

コード解説

読了時間が1分未満の場合

1分間の文字数を600に設定していて、記事の文字数が500文字だった場合、minが0になってしまいます。
すると「記事は0分で読めます。」という訳の分からない表示になってしまします。
それを防ぐために、読了時間が1分未満だった場合は「記事は1分以内で読めます。」という表示になるようにif文で条件分岐をしています。

1分間に読む文字数を変更したい場合

変数countの値を適当に変更してください。
デフォルトでは「600」になっていますが、実際のコンテンツを読む速さと差が生じる場合には適宜調整するようにしてください。
ちなみに、今回の読了時間は記事コンテンツ内のリンクやソースコードの文字数も含まれています。
なので、実際に読む文字数と計測した文字数に、若干の差が生じる可能性があるので注意してください。

記事にカテゴリーが設定されていない場合

今回のコードは、記事に設定されているカテゴリー要素(.entry-categories)の後ろに読了時間を表示させる仕様になっています。
なので、カテゴリーが設定されていない記事や、カテゴリー要素の配置を変えた場合には注意が必要です。

まとめ

いかがでしたか?

今回紹介した方法で、はてなブログのタイトル下に読了時間を設置することができます。
countの値やestimatedTimeの文字列を変更すれば、自分の好みに合わせて表示を変えることができます。
「この記事は約3分で読めます。」をはてなブログに設置してみたい方は、ぜひお試しあれ!

初心者ブロガーが登録すべきASP ベスト3

初心者ブロガーが登録すべきASP ベスト3

A8.net

A8.netは広告主数が豊富で、初心者ブロガーでも簡単に登録できるためアフィリエイトを手軽に始めることができます。
また、A8.netは「セルフバック」が充実していて、レビュー記事にはもってこいです。

もしもアフィリエイト

もしもアフィリエイトは、Amazonアソシエイトと楽天アフィリエイトを一緒に管理できるため余計な手間がかかりません。
さらに、W報酬制度やプレミアム報酬などの、他のASPにはない魅力的な報酬制度があります。

バリューコマース

バリューコマースは、スマートフォン向けのオーバーレイ広告が掲載できる点が特徴です。
また、バリューコマースにしかない広告案件があり、漏れをなくすためのサブののASPとして登録しておいて損はないです。

ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

スポンサーリンク
ブログ運営
シェアする
クロヤギ

コメント

タイトルとURLをコピーしました