「この記事は約◯分で読めます。」をアフィリエイト分の文字数を減らして適正化する

f:id:tomumu:20210828152426j:plain photo by Damien Walmsley

どうも、とむむです。

ブログを再開してから20日ほど経過した。
ほぼ毎日更新してきた成果？なのか、少しずつではあるがアクセス数も増えてきた。
見に来て頂いている方には、本当に感謝したい！

そんなに積極的に書くつもりはなかったのだが、ブログ運営で気になったことも時々まとめていくことにした。
さて、今回は「この記事は約◯分で読めます。」をアフィリエイト分の文字数を減らして適正化してみたので、紹介したいと思う。

「この記事は約◯分で読めます。」を出す方法は簡単！
- はてなブログの場合のやり方
「この記事は約◯分で読めます。」の時間を適正な長さに修正する
まとめ

「この記事は約◯分で読めます。」を出す方法は簡単！

ブログ再開にあたり、色々な先人の知恵を借りてブログの体裁や機能を強化させてもらった。
そのうちの1つが、「この記事は約◯分で読めます。」をタイトルの下に出すことだ。

f:id:tomumu:20210828181754p:plain

Word Pressであれば、「Insert Estimated Reading Time」というプラグインで対応できるようだが、はてなブログはプラグインに対応していない。

はてなブログの場合のやり方

こちらのブログを参考にさせてもらった。

redo5151.hatenablog.com

やり方はシンプルで、はてなブログの 設定＞デザイン＞🔧＞記事＞記事上 に、以下のJava Scriptを埋め込むだけだ。

<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 600;
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>

普通の人が1分間に読む文字数は400-600文字らしいのだが、htmlのタグも含めてそのままカウントしているので、600文字に設定した。

「この記事は約◯分で読めます。」の時間を適正な長さに修正する

「この記事は約◯分で読めます。」ので時間が多くないか！？

例えば、このエントリーを読むのにかかる時間は、上記の設定のままだと14分だった。

f:id:tomumu:20210828181822p:plain

エントリーの実際の文字数をカウントしてみると、2200文字弱だった。
2200文字読むのに、14分はさすがに時間がかかりすぎだろう。

どこで時間が増えているのかを探る

ブログのエントリーに紹介したアイテムのアフィリエイトの商品リンクを貼っている。

エントリーによって、異なるが大抵は1-3個くらいなのだが、2個から3個に増やす時に、「この記事は約◯分で読めます。」の時間がかなり増えることに気付いた。

Java Scriptの修正方針を考える

アフィリエイトの数量でカウントする文字数を減らしたい。
既存のエントリーに影響が出ないように修正したい。

Java Scriptの修正箇所

スクリプトとエントリーの修正箇所は以下の3点だ。

変数の追加（アフィリエイト数、アフィリエイト文字数）
修正したいエントリーに追加（htmlタグ）
処理の追加（htmlタグがある時だけ、アフィリエイト数に応じてエントリーの文字数を減らす）

Java Scriptの修正内容

はてなブログの 設定＞デザイン＞🔧＞記事＞記事上 に、以下のJava Scriptを以下の内容に修正する。

<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 600;
var adv = 1;
var advl = 2000;

if (document.getElementById('mos')){
    var adv = document.getElementById('mos').dataset.count;
}
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-advl*adv)/wpm) +'分で読めます。</p>';
$('.entry-content').prepend(message);
}, false);
</script>

エントリーには以下のタグを埋め込む。

<div id="mos" data-count="3"></div>

修正箇所を軽く補足すると、以下の通りだ。

adv = 1;
advは、アフィリエイトの数だ。
エントリー毎に最低でも1つはアフィリエイトを追加しているので、デフォルト値を1にしている。
アフィリエイトのないエントリーも書く方はデフォルト値を0にしても良いと思う。

advl = 2000;
advlは、アフィリエイトの文字数だ。
とむむが利用しているアフィリエイトの文字数が1500 - 2200文字くらいだったので、2000文字にしてみた。
ご自身のアフィリエイトの文字数に合わせて変更して頂けると良いと思う。

<div id="mos" data-count="3"></div>
idは何でもいい。アフィリエイトの種類ごとに変更しても良いと思う。
data-countはアフィリエイトの数。とむむの場合はデフォルト値が1なので、2以上の数字が入る。


if (document.getElementById('mos')){
    var adv = document.getElementById('mos').dataset.count;
}
idのタグが存在する場合に、アフィリエイト数にdata-countの数に置き換える処理にした。

(length-advl*adv)/wpm
計算式は、エントリー全体の文字数からアフィリエイトの文字数を減らす処理を追加した。