こんにちは、情報系大学生、ハル(Blog_IT_haru)です。
今回は、ブログの記事の上の方によくある、「この記事は◯分で読めます」を実装してみたので、それについてまとめていきたいと思います。
私自身、無料のはてなブログを利用しているので、無料のはてなブログでも、簡単に実装することができますよ!!
滞在時間に効果がある
つばさのーとさんによると、
滞在時間が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です。引用元:
私は、colorを
#262626
の、濃い灰色に設定しました。
ほかは全てコードと同じです。
コードの貼り付け場所
はてなブログの管理画面左タブ→デザイン→カスタマイズ→記事→記事上
CSSの設定やJavascriptの設定も無いので、
簡単に、「この記事は◯分で読めます」を実装することができます。
参考にした記事
まとめ
いかがでしたか?
少しでも参考にしていただけると嬉しいです。
私は当初、つばさのーとさんの記事を使用したいと思ったのですが、
Javascriptを使用しており、中々うまくいきませんでした。
そのため、HTMLのみで実装できる、redoブログさんを参考に
させていただきました。
この記事がいいな、と思ってくれたら、SNSなどで拡散したり、
ブックマークやコメントなどしてくれると励みになります!
更に、読者になってくれたら、お返しに私も読者になります!
また、この記事の内容についてなにかありましたら、
お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。
それでは。