ハルの初心者プログラミング部

ブログを最近始めたばかりの初心者です。よろしくお願いします。

【ブログカスタマイズ】この記事は◯分で読めますを実装してみた【HTMLのみ】【簡単】【はてなブログ】

記事名と
URLをコピー

こんにちは、情報系大学生、ハル(Blog_IT_haru)です。

今回は、ブログの記事の上の方によくある、「この記事は◯分で読めます」を実装してみたので、それについてまとめていきたいと思います。

私自身、無料のはてなブログを利用しているので、無料のはてなブログでも、簡単に実装することができますよ!!

f:id:Blog_IT:20210401165415p:plain
 

滞在時間に効果がある

つばさのーとさんによると、

滞在時間13.8%向上

SNSへの登録67%向上

したらしいです。

私の記事をしっかり読んでいただくためにも、これはやるしかない!と思い、

やることにしました。

このカスタマイズの効果

短い記事は最後まで読んでもらいやすくなる

「この記事は約2分で読めます」と

冒頭に記載されていると、

読む気になる人が結構多いと思います。

私もその一人です。

そういう意味でもこのカスタマイズは効果があるらしいです。

長い記事はブックマークされやすくなる

読む時間が長いとわかっていると、

あとで読もう、と

ブックマークをしてくれる可能性が高いです。

ブックマークしてくれていれば

時間が取れたときに思い出して読まれたり、

ブクマを整理しているときに気づいてもらえて読まれたりと、

再読の可能性がアップします。

引用元:つばさのーと

実際にHTMLを適用させる

以下のコードをコピペします。

このコードは、redoブログさんを参考にさせていただきました。

・3行目の”var wpm”の数値(600)を変更すれば、
1分間に読む時間が変更可能。
・5行目の”font-size”の80%を変更すれば、
フォントサイズが変更可能。
・5行目の"color"の#999999を変更すれば、
色の変更可能。
・5行目の”この記事は約'+ Math.ceil(length/wpm) +'分で読めます。”
の箇所をいじれば言い回しは自由に変更可能です。
”約'+ Math.ceil(length/wpm) +'分で読めます。”
ともう少しシンプルな言い回しにしてもOKです。

引用元:

【ブログカスタマイズ】はてなブログで「この記事は〇分で読めます」の簡単コード実装方法を紹介! - redoブログ

私は、colorを

#262626

の、濃い灰色に設定しました。

ほかは全てコードと同じです。

コードの貼り付け場所

はてなブログの管理画面左タブ→デザイン→カスタマイズ→記事→記事上

CSSの設定やJavascriptの設定も無いので、

簡単に、「この記事は◯分で読めます」を実装することができます。

参考にした記事

redo5151.hatenablog.com

www.tsubasa-note.blog

まとめ

いかがでしたか?

少しでも参考にしていただけると嬉しいです。

私は当初、つばさのーとさんの記事を使用したいと思ったのですが、

Javascriptを使用しており、中々うまくいきませんでした。

そのため、HTMLのみで実装できる、redoブログさんを参考に

させていただきました。

この記事がいいな、と思ってくれたら、SNSなどで拡散したり、

ブックマークやコメントなどしてくれると励みになります!

更に、読者になってくれたら、お返しに私も読者になります!

また、この記事の内容についてなにかありましたら、

お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。

それでは。