八百万-やおよろず-雑記。

八百万-やおよろず-雑記。

日常の様々な事象(主に健康、ライフハック、PC、雑貨、ネットビジネスなど)について、nyanco! スタッフがお役立ちの精神で書き連ねていくブログです。

【超簡単】はてなブログに「この記事は約 分で読めます」を実装してみた。


スポンサードリンク

こんにちは、nyanco! です。

今回ははてなブログのカスタマイズの記事です。
備忘録がてらのメモとしてアーカイブしておきます。

ブログを読んでいると、良くブログの冒頭に「この記事は約●●分で読めます」という記述を見たことないですか?
読む人にとっては、これから読もうとする記事のボリュームの目安が分かるから便利ですよね!
読んでもらう方も、これがあることで滞在時間が伸びたり、ブックマークされやすくなったりと両者win-winの機能ですね。

これは導入するっきゃない!
ってことで、今回は導入するまでの記録をお送りいたします。

参考にさせていただいたページ

html、cssは分かるけど、javascriptなどのプログラムは素人レベルの私。
記事毎の文字数をカウントして、何分で読めるかを自動的に計算&表示する仕組みなんだろうなとなんとなくは分かるものの、当然ゼロからこんなプログラムは書けません。
ですが、先人たちの記事を読めばこんな私でも実装できてしまう、今は良い時代です。

というわけで、参考にさせていただきましたページはこちら。

techhot.hatenablog.com
筆者様、ありがとうございます。

上記サイトを参考に、カスタマイズさせていただいたコードがこちら↓

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var length = $('div.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var elem = '<p style="font-size: 80%; color: #111; background: #EAE7F3; width: 100%; padding: 1px 0;  text-align: center;">この記事は約<span style="font-size:1.2rem;"> ' + Math.ceil(length/400) + '  </span>分で読めます</p>';
$('div.entry-content').prepend(elem);
}, false);
// ]]></script>

こちらのコードを以下の場所にコピペするだけ!
管理画面(ダッシュボード) > デザイン > カスタマイズ[レンチのアイコン] > 記事 > 記事上下のカスタマイズ > 記事上 の入力欄

プレビュー表示では現れてこないので、一旦「変更を保存する」を押してから別ウィンドウで記事を開いてみてください。
※一覧表示では表示されず、各記事ページのみの表示となります。

簡単ですね。
ちなみにcssが分かる人であれば、以下の部分を修正すれば好きなようにカスタマイズできますよ。

var elem = '<p style="font-size: 80%; color: #111; background: #EAE7F3; width: 100%; padding: 1px 0;  text-align: center;">この記事は約<span style="font-size:1.2rem;"> ' + Math.ceil(length/400) + '  </span>分で読めます</p>';
文字色を変更するなら:color: 〜  
背景色を変更するなら:background: 〜  
などなど

以上、はてなブログに「この記事は約●●分で読めます」を実装する方法でした!

広告を非表示にする
//パンくず //トップに戻るボタンの設定
to TOP
//トップに戻るレンジの設定 //アウトバウンド計測