こんにちは！原宿にある会社で SE をしているひとり情シスの暗黒卿ことナカムラ (@sys_nakamura) です。週末は休日出勤だったり皐月賞だったりであまり記事をしたためることに時間を費やすことができませんでした。しかし、少しですがはてなブログをカスタマイズすることができたので弄った箇所を自分の備忘としても残しておきたいと思います。

 

今回のカスタマイズ内容はタイトルの通り「記事タイトルの下にその記事を読むために必要な所要時間を自動で表示させる方法」についてです。

 

私が仕事用で構築・カスタマイズしている WordPress の場合にはプラグインの追加一発でタイトル下に所要時間を表示させることができます。

 

はてなブログでも簡単な方法で出来ないかな〜と思っていたところ、はてなブログでも出来たので (PC・スマホ版ともに) 手順と参考にさせて頂いた記事を紹介したいと思います。

 

 

記事タイトル下に所要時間を表示させる方法

今回のカスタマイズにあたって参考にさせて頂いた記事です。こちらの記事には細かい微調整をコードに加えられるコード生成エディターも実装されています。

 

機能を実装する手順 - PC 版

以下のコードをはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「記事」→「記事上」に貼り付けます。

 

機能を実装する手順 - スマホ版

スマホ版のレイアウトでも所要時間を表示させたい場合には同じコードをはてなブログのダッシュボードから「デザイン」→「スマートフォン」→「記事」→「記事上」に貼り付けます。

 

手順はたったこれだけです。

 

 

機能を実装するとこのように表示される

さて、実際にコードを貼り付けた状態で記事を見てみるとこのように所要時間が表示されるようになります。

 

PC 版レイアウト

 

スマホ版 - レイアウト

 

 

まとめ

ものすごく簡単な手順で記事の所要時間を自動表示させることができてしまいました。デフォルトでは 1 分 400 文字換算になっていますが、貼り付けるコードの数値を調整することで換算の仕方や表示テキストのフォントサイズ・色なども変更することができます。それぞれの好みにもよるかと思いますが、私は事前に読み終えるまでの目安が大体わかっていると読むタイミングを考えることができるので助かる派です。

 

 

こんな記事も書いています