最近他のブログを読んでいると、読了時間が表示されたサイトがありますよね。
こう言ったものです。↓
個人的には必要ないかなと思うのですが、あったらちょっとおしゃれかなとも思い、やり方を探していたんですね。
そしたら簡単にコピペで2分でできたので、皆さんにも紹介しますね。
Contents
記事を何分で読めるかを表示するカスタマイズ
このカスタマイズはJava scriptを使うので、表示速度にちょっとですが影響します。
なので、すでに表示速度が遅い人や絶対にこれが必要って人以外は、無くてもいいかなと思います。
まぁ、ここは個人の自由ですね。
それでは今回参考にさせていただいたのは、すずろぐさんの記事です。ありがとうございました。
コードはこれになります。
<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 800;
var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>';
$('.entry-content').prepend(message);
}, false);
</script>
3行目のvar wpm = 800は、800文字を読むのに1分と計算しているので、自分で好きに変えることが出来ます。
5行目のfont-size : 80%は、文字の大きさです。大きくしたい場合は100%など好きに変えて結構です。
その横のcolorは#999999としていますが、これも好きに変えてOKです。カラーはHTML色見本で調べることが出来ます。
また、この記事は約‘+ Math.ceil(length/wpm) +’分で読めます。の赤文字部分も変更可能です。
次にこのコードを、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「記事」→「記事上」にコピペします。
以上です。
言葉を変えて、「あなたなら1分で読めます」にしてみました。
最後に
おしゃれなので導入したい人は多いと思いますが、カスタマイズのし過ぎは表示速度に影響するので、ほどほどにしておきましょう。
また、カスタマイズしたコードや日付・場所はメモに書いて保存しておくと、整理する時などに助かりますよ。
コピペカスタマイズについては、はてなブログのカスタマイズ集(すべてコピペでOK)と収益化方法などのまとめで紹介しているので併せて読んでみて下さい。