Create Self Rails

27歳、北海道に住む元IT企業SE。夢を叶えるために新卒で入社した会社をわずか1年で退職。自立していくために、色々と試行錯誤中。 夢は自分の作ったアプリ・ゲームで人の役に立つこと!主にアプリ・ゲーム・ブログといった創作活動や好きなことについての情報発信をしていきます。 好きなこと/ものは創作活動・プログラミング・ラブライブ!・北海道・オーバーオール。

ブログの滞在時間が上がる!?「この記事は約◯分で読めます」をはてなブログに実装してみた

f:id:projectkanata:20170317215819j:plain

どうも、カナタです。

 

ブログを見ていると、記事の最初に

「この記事は約分で読めます」という文章を見たことはありませんか?

 

実はこの文章、自動で作られているんです!

手動じゃないんですね笑

 

 

今回はこちらの記事を参考に、

僕のブログに「この記事は約◯分で読めます」を実装してみました!

 

money-affairs.hatenablog.com

 

 

実装手順

HTMLタグを追加

まず、「HTMLタグ」と呼ばれるものを追加します。

追加場所は管理画面から、

「デザイン」「カスタマイズ」「記事」「記事上下のカスタマイズ」にある「記事上」です。

 

f:id:projectkanata:20170317215810p:plain

 

ここに、以下のHTMLタグをコピペで追加します。

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

CSSを追加

次に、「CSS」と呼ばれるものを追加します。

追加場所は管理画面から、

「デザイン」「カスタマイズ」「記事」「デザインCSS」です。

 

f:id:projectkanata:20170317215759p:plain

 

ここに、以下のCSSをコピペで追加します。

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

 

Javascriptを追加

最後に、「Javascript」と呼ばれるものを追加します。

追加場所は管理画面から、

「デザイン」「カスタマイズ」「記事」「記事上下のカスタマイズ」にある「記事下」です。

 

f:id:projectkanata:20170317215753p:plain

 

ここに、以下の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>

 

追加したあとは、「変更を保存する」ことを忘れずに!

 

すると・・・

 

 

f:id:projectkanata:20170317215747p:plain

 

「記事を読むのに必要な時間」が表示されました!やったー!

 

メリット  

「この記事は約分で読めます」をブログに設置するメリットとして、

このカスタマイズを作ってくれた方がこのようなことを書いています。

www.tsubasa-note.blog

 

記事を読むのにかかる時間の目安を記事のボリュームから表示するだけなんですがこれだけで

  • 滞在時間が13.8%向上
  • SNSへの登録が67%向上

ってすごいですよね。これはやるしかない。でもほんとかな?

 

 

 ブログ滞在時間の増加、SNS登録率向上

 

これは実装するしかないじゃない!

 

と思ったので、この記事を書いたのであります。

 

また、

  • 短い記事は最後まで読んでもらえやすくなる
  • 長い記事はブックマークされやすくなる

 という効果もあるらしいです。

 

実際効果があるのかはわかりませんが、

やらないよりはやったほうが良いでしょう。

 

何でも試してみるものです。

 

カスタマイズを改造してみよう

f:id:projectkanata:20170317215747p:plain

 

こんな感じで記事の時間が表示できたわけですが、

ちょっと味気ないと思わないですか?

 

というわけで、こんな感じに改造してみました。

 

f:id:projectkanata:20170317215739p:plain

 

何をしたかと言いますと、

  • 文章の変更
  • 文字サイズの変更
  • 文字色の変更

この3つです。

 

ひとつずつ見ていきましょう。

 

文章の変更

文章は、Javascriptのこの部分を変えることで変更できます。

'この記事を読むのに必要な時間は約<span>' + Math.ceil(contents.length / 400) + '</span>分です。'

 

' 'ではさまれた部分の文字が表示されます。

 

Math.ceil(contents.length / 400)は、

記事の文字数を400で割って余りを切り上げた答が表示されます。

(例:2017文字の場合、2017÷400=5.0425→切り上げて6)

 

なぜ400で割っているのかというと、

人が1分間に読める文字数が約400文字だからです。

 

ちなみに、僕が文章中に使っている⏰は

Macだと「とけい」とタイプすると出てきます。 

そのままだと堅い文章だと思ったので、ワンポイントをつけてみました^^。

 

文字サイズの変更

文字サイズはCSSのこの部分を変えることで変更できます。

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

 

数字を大きくすると、文字サイズが大きくなります。

 

よく見ると、font-sizeが2つありますね。

これはどういうことかと言いますと、

上の「estimated-area」は全ての文字サイズを決定します。

下の「estimated-area span」は、<span> </span>で囲んだ部分の文字サイズを決定します。

 

つまり、

'この記事を読むのに必要な時間は約<span>' + Math.ceil(contents.length / 400) + '</span>分です。'

 

これは、Math.ceil(contents.length / 400)の部分のみが文字サイズ16pxとなり、

他の文字は12pxになるということです。

 

<span> </span>で囲む部分を変えれば、

自由に16pxになる文字を変えることができます。

 

文字色の変更

 文字色はCSSのこの部分を変えることで変更できます。

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

 

この部分を変えれば、文字色を変えられます。

ここで、#888はカラーコードと呼ばれる色を決める数字です。

カラーコードはググればいろいろ出てきます。

調べるのが面倒であれば、以下を参考にしてください。

カラーコード表

 

また、<span> </span>で囲まれた部分の色を変えたい場合は、

以下のように変更しましょう。

例のように#F00とすると赤色になります。

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

 

まとめ

今回は、はてなブログにカスタマイズを実装してみました。

こういうのを見ると、僕もカスタマイズを作ってみたくなりますね~。

 

カスタマイズを行えば、他のブログとは一味違うものが作れちゃいます。

 

もし今回の実装方法について、何かわからない点がありましたら

お気軽に質問してくださいね^^