思考は現実化する

自分の潜在意識を書き換えるために、自分が学んだ事を整理しまとめています。

「この記事は約◯分で読めます。」を表示する方法〈はてなブログ〉

f:id:b204638:20170219033651j:plain

 

週末、何となく「はてなブログ」のカスタマイズを行ってみたくなりました。

WordPressであればプラグインでさまざまな機能を簡単に追加できるのですが、はてなブログの場合はどうするのかな?ということで、いろんな方の記事を参考にチャレンジしてみました。

 

まずは、記事を読む時間を表示する方法について、こちらの記事を参考に導入してみました。

「この記事は約◯分で読めます。」を表示する方法

先程の記事の手順で進める際に、私がちょっとつまづいた所などを整理しながら、手順をご紹介します。

 (1)HTMLタグを追記する

<div id="estimated-area"></div>

 上記のタグを記事に追加します。

はじめはどこに追記するのかわからず、記事1つ1つに追加したのですが、管理画面で記事上に追記することで、すべての記事に表示することができました。

「管理画面」>「デザイン」>「カスタマイズ」>「記事」の中にある「記事上下のカスタマイズ」の「記事上」の入力スペースに追記 

(2)CSSコードを追記する

/*記事所要時間*/
#estimated-area {
    color: #888;
    font-size: 12px;
}
#estimated-area span {
    font-size: 16px;
    font-weight: bold;
    padding: 0 3px;
}

上記のコードを以下に追加しました。

表示されるフォントのサイズ等もこのコードで調整できるようです。

「管理画面」>「デザイン」>「カスタマイズ」>「デザインCSS」 

(3)jQuery・JavaScriptのコードを追記する

<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->

<script>
(function() {
$(function() {
var contents = '';
var regSpace = /^s*$/;
var ignoreNodeType = ['SCRIPT', 'PRE'];
$('.entry-content').contents().each(function() {
    var s = $(this).text().replace(/ ? /g, '');
    if (regSpace.test(s)) return;
    if (s === '<!-- more -->') return;
    if ($.inArray(this.nodeName, ignoreNodeType) !== -1) return;
    s = s.replace(/s/g, '');
    contents += s;
});
$('#estimated-area').append('この記事を読むのに必要な時間は約<span>' + Math.ceil(contents.length / 400) + '</span>分です。');
});
})();
</script>

 上記のコードを以下に追記しました。

 「管理画面」>「デザイン」>「カスタマイズ」>「記事」の中にある「記事上下のカスタマイズ」の「記事下」の入力スペースに追記 

つばさ (id:tsubasa123)さんのコードでは「1分間に読める文字数を400文字」として設定されています。

日本人の平均はだいたい1分間に400~600文字といわれているようです。

サイトで扱う記事の内容・話題によって”例えば、難解な記事の多いサイトでは文字数を少なくする”などを考えながら、この文字数を設定するのもよいかもしれません。

表示される文章もこのコードで編集できるようです。(今回は、少し変えてみました)


コードを追記する位置は、初心者には難しい部分もあると思います。

同じように悩まれる方へのご参考になればと思います。