はてなブログで記事の読了時間を表示するコードをオリジナルも加えて実装

ブログの目安となる読了時間を表示するコードを試してみた

ブログの直帰率ってけっこう大事。

ユーザーにとっても、『このページってどれくらいの長さなの？』って正直気になるところだと思っていたの。

そうしたら何とも素晴らしい方法に巡り会えたので、そのコードを実装したので備忘録がてら紹介していくわ！

読了時間のコードを実装しよう！

・直帰率が高いブログの場合は読了時間で試してみる
・ユーザーはどれくらいで情報を知ることができるのかが気になる

内容は非常に簡単で、ブログ記事の読了時間を計算するJavaScriptを貼り付けるだけ。

▼元記事はこちら▼

www.suzushin7.jp

コピペで簡単に導入できるので、ブログに変化をもたせたい場合は有効ですね。

f:id:kiyopiko-business:20170110152404j:plain

読了時間の実装方法
読了時間を少しだけ目立たせる方法
読了時間にもっと変化を加えたい場合
- ▼ドット柄をつけた読了時間▼
- ▼背景色をつけた読了時間▼
まとめ
- 追記

このブログでは、こんな感じで実装しました。

ブログの読了時間の実装イメージ

読了時間の実装方法

もうめっちゃ簡単です。

ダッシュボードにある「デザイン」→「カスタマイズ」→「記事」→「記事上」にソースコードをコピペするだけで実装できます。

ここにコピペ！読了時間の実装場所

▼使用するコード▼

<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 800;　/*ここで1分あたりの文字数を変更できる*/
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>

このまま実装するとこういう下記画像のようにになります。

デフォルトの読了時間の実装イメージ

これでも良いんですが、個人的には時間をもっと際立たせたいと思ったわけで、ちょこーっと改造してます。

読了時間を少しだけ目立たせる方法

先ほど使用したソースコードにCSSを組み合わせるだけです。

▼使用するコード▼

<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 800;
var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var message = '<p class="readtime">この記事は<span class="timebold">約'+ Math.ceil(length/wpm) +'分</span>で読めます。</p>';
$('.entry-content').prepend(message);
}, false);
</script>

↑のコードはデフォルトと同じように「記事上」に貼り付けてくださいな。

そして次はCSSに追記します。
場所は「デザインCSS」だから、間違えてそのまま「記事上」に追記しないようにね！

/***  読了時間を強調する  ***/
.readtime {
    color: #999999;
    font-size: 80%;
    text-decoration: underline;
}

.timebold {
    color: #FF5252;
    font-size: 18px;
    font-weight: bold;
}

実装が成功すると、このブログのようになります。

ちなみにスマホだとこうなります。

スマホの読了時間の実装イメージ

読了時間にもっと変化を加えたい場合

読了時間をもっと変えたい！という場合はこんな感じもオススメかな〜という2点を紹介！
これ以外でも実装できるし、CSSを触れるのであれば余裕ですね（笑）

▼ドット柄をつけた読了時間▼

/***  読了時間を強調する  ***/
.readtime {
    color: #999999;
    font-size: 80%;
    border-top: 2px dotted #ccc;
    border-bottom: 2px dotted #ccc;
}

.timebold {
    color: #FF5252;
    font-size: 18px;
    font-weight: bold;
}

読了時間のデザインにボーダーを採用

デザインはCSSでどうとでもなるので、気になる方は背景色をつけたりしても面白いと思いますよ！

▼背景色をつけた読了時間▼

/***  読了時間に背景色をつける  ***/
.readtime {
    color: #999999;
    font-size: 80%;
    background: #EEFF41;  /* ここで背景色を変える */
}

.timebold {
    color: #FF5252;
    font-size: 18px;
    font-weight: bold;
}