最近のサイト巡りをしていると、良く見かけるものがあります。
それがこんな感じの表記↓
「この記事は○○分で読めます」
あなたも見たことがないでしょうか?

 

実はこの表記、とっても効果のあるものなんです。
以前の実験結果だと、これを入れるだけで
サイト滞在率が13.8%も伸びたという結果もあります。
◆その内容はこちら→たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法・・・

time

確かにこれが最初にあると、
これから記事を読む場合は目安になっていいですよね。
「○○分で読めるんだったら、ちょっと読んでみようかな」
なんて思ったりしそうです。

 

今回当ブログでも取り入れたのですが、
ワードプレスや賢威でのサイトでは少しコツがあって。。

 

僕が「この記事は○○分で読めます」を、
このサイト(賢威6.2で作成)に実際に導入した手順について、
備忘録としてまとめておきました。

 

投稿ページに表示する方法

編集するページ
【単一記事の投稿 (single.php)】

単一記事の投稿 (single.php)を開きます。

そこの中段部分に、
<div class=”contents clearfix”>
の記述があるので、その上あたりに下記コードを配置します。

<?php
$mycontent = $post->post_content;
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 600)+1;
$est = ($m == 0 ? ” : $m) ;
?>
<p>この記事は約 <b><?php echo $est; ?></b> 分で読めます。</p>

以上で完成です。

 

固定ページに表示する方法

投稿ページと手順は同じです。

 

時間間隔を調整する方法

実は、このように「この記事は○○分」と表示する方法は、
計算式で自動的に出しているんです。

先ほど記載したタグだと、

 

<?php
$mycontent = $post->post_content;
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 600)+1;
$est = ($m == 0 ? ” : $m) ;
?>
<p>この記事は約 <b><?php echo $est; ?></b> 分で読めます。</p>

 

赤字部分が時間設定で、
「600文字を1分で読む。プラス1分」
に設定されています。

もし設定を変えたい場合は、
この赤字の式を変えるだけで時間設定を変更でき、
お好みの文字数などに設定できます。

 

なぜ600文字がデフォルトになっているか、
ということなんですが、
1分間で朗読する平均時間は、
およそ400~600文字と言われています。

 

また、朗読時間をチェックできるツールがあるので、
それで実際に試して設定してみてもいいかもしれませんね。

 

せっかくだからカスタマイズしよう!

このままの表示でも十分表示はされるのですが、
せっかくなので表示を色々いじりたい!
って方。

 

ワードプレスを使っていれば、
CSSをいじればできます。
文字を太字にしたりなど、目立たせると目に入っていいですよね!

 

賢威をテンプレートで使っている場合は、
独自装飾タグで編集が可能です。

 

この独自編集タグはかなり便利なのでお勧めなので、
ぜひ賢威を使っている方は覚えておいてくださいね!
独自編集タグについては、後日記事でご紹介します。)