★ この記事を読む時間を設置
● 機能・概要
① 記事を読む時間を指定した場所に表示する。（記事内）
② 計算値の100文字当たりを読める秒数はパラメータ（引数）で行う。
③ 計算値の1画像当たりを読める秒数はパラメータ（引数）で行う。
④ 絵文字
の判別はパラメータ（引数）で行う。（横幅・縦幅）⑤ 動画数(TouTube)は、カウントするが、読む時間には含めない。
⑥ 記事の文字数は、タグ部分を取り除いたバイト数÷２と計算する。
全角は２文字であるため、２で割る。
全角半角を判別すると異常な時間がかかるため行わない。
⑥ 表示は下記の様にする。『この記事を読む時間：』 の名称は変更可能。
この記事を読む時間：1分7秒 （画像数：0） （文字数：1353）
⑦ 画像数：0） （文字数：1353）は非表示が可能。
⑧ 各場所にカーソルを乗せると情報が表示される。
・ この記事を読む時間：1分7秒→文字数・絵文字数・画像数・動画数。
・ （画像数：0）→計算値。1画像当たりを読める秒数。
・ （文字数：1353）→計算値。100文字当たりを読める秒数。
● 実例（設置例）は私のブログに設置済み。
● やり方
① フリープラグインへ下記を追記する
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type="text/javascript">
Art_read_count('.skinArticleHeader',5,3,30,30,'この記事を読む時間：');
</script>
◆ 説明
・ 下記はフリープラグインの最初に１つあればOKです。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
・ 下記が既に設定されていれば、不要です。
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
・ Art_read_count('.skinArticleHeader',5,3,30,30,'この記事を読む時間：');
'.skinArticleHeader'・・・指定したセレクタの後に追加されます。（.skinArticleHeaderは記事タイトル）
5・・・１００文字を読むのに要する時間を秒で指定する。
3・・・1画像を読むのに要する時間を秒で指定する。
30・・・絵文字の横（画像の横・縦がこの指定された値以下であれば絵文字と判定。単位px）
30・・・絵文字の縦（画像の横・縦がこの指定された値以下であれば絵文字と判定。単位px）
'この記事を読む時間：'・・・この記事を読む時間：』 の名称は変更可能。
② CSSへ下記を追記する（調整してください）
/* ---------------------------------------------------*/
/* 記事内の文字数、絵文字数、画像数、動画数をカウント */
/* ---------------------------------------------------*/
.read_info{/* 全体 */
width:67%;/* 幅 */
padding:5px;/* 内側余白 */
background-color:#ff99ff;/* 背景色 */
border-radius:6px;/* CSS3角丸 */
margin-top:10px;/* 余白 */
margin-bottom:10px;/* 余白 */
margin-left:155px;/* 余白 */
}
.read_time{/* 読む時間 */
font-weight:bold;/* 文字の太さ */
font-size:14px;/* 文字の大きさ */
padding-left:5px;/* 内側余白 */
padding-right:5px;/* 内側余白 */
color:#00ff00;/* 文字色 */
}
.read_img{/* 画像数 */
color:#00aa00;/* 文字色 */
}
.read_moji{/* 文字数 */
color:#005500;/* 文字色 */
}
.read_time_min{/* この記事を読む時間(分) */
color:#ff0000;/* 文字色 */
}
.read_time_sec{/* この記事を読む時間(秒) */
color:#0000ff;/* 文字色 */
}
/* ---------------------------------------------------*/
③ 画像数、文字数を非表示にしたい場合は下記をCSSへ追記する
.read_img{/* 画像数 */
display:none;/* 非表示 */
}
.read_moji{/* 文字数 */
display:none;/* 非表示 */
}
◆ スクリプトのソースの内容
// 記事内の文字数、絵文字数、画像数、動画数をカウント
function Art_read_count(d_sel,moji_read_time_100,img_read_time_1,emoji_width,emoji_height,read_desc){
$(document).ready(function(){
var i=0;
$(".skinArticle").each(function(){ // ● 記事を読む
$(".articleText",this).each(function(){ // ● 記事本文を読む
var moji_cnt=0; // 文字の数
var img_cnt=0; // 画像の数
var emoji_cnt=0; // 絵文字の数
var iframe_cnt=$("iframe",this).length; // YouTube動画数(iframe)←今回は計算に含めない
var embed_cnt=$("embed",this).length; // YouTube動画数(embed) ←今回は計算に含めない
var video_cnt=iframe_cnt+embed_cnt; // 動画数合計
var img_src="";
$("img",this).each(function(){ // ● 記事本文内の画像を読む
img_src=$(this).attr("src"); // 画像の src を求める
var img = new Image();img.src=img_src;var width=img.width;var height=img.height;// 画像の幅と縦を求める
if((width>emoji_width)&&(height>emoji_height)){ // 画像・絵文字の判定
img_cnt=img_cnt+1; // 画像数＋１
}else{
emoji_cnt=emoji_cnt+1; // 絵文字数 ＋１
}
});
moji_cnt=$(this).html().replace(/<\/?[^>]+>/gi, "").length/2+emoji_cnt; // 文字数＝総バイト数/２＋絵文字数(正確な文字数は求められないため)
var read_time_sec_all=(moji_cnt/100*moji_read_time_100+img_cnt*img_read_time_1);// 秒数を計算
var read_time_min=parseInt(read_time_sec_all/60); // 分を計算（少数点以下切捨て)
var read_time_sec=parseInt(read_time_sec_all%60); // 秒計算 （少数点以下切捨て)
read_time_sec_all=parseInt(read_time_sec_all); // 少数点以下切捨て
moji_cnt=parseInt(moji_cnt); // 少数点以下切捨て
var read_result='<div class="read_info">'+
' <span class="read_time" title="(文字数＝'+moji_cnt+')'+
'\n(絵文字数＝'+emoji_cnt+')'+'\n(画像数＝'+img_cnt+')'+'\n(動画数＝'+video_cnt+')">'+read_desc;
if(read_time_min!=0){read_result+='<span class="read_time_min">'+read_time_min+'分</span>';}
read_result+='<span class="read_time_sec">'+read_time_sec+'秒</span>';
read_result+='</span>';
read_result+=' <span class="read_img" title="計算値：1画像当たりを読める秒数＝'+img_read_time_1+'秒">（画像数：'+img_cnt+'）</span>'+
' <span class="read_moji" title="計算値：100文字当たりを読める秒数＝'+
moji_read_time_100+'秒">（文字数：'+moji_cnt+'）</span>'+
'</div>';
$(d_sel+':eq('+i+')').after(read_result);
i++;
});
});
});
}