Insert Estimated Reading TimeのHTML記述例

この記事の読了時間は約4分です。

Insert Estimated Reading Timeでできること

Insert Estimated Reading Timeというプラグインを導入しました。

このプラグインは記事読了までの所要時間を表示してくれます。

1分あたりの文字数の設定やフォーマットの設定も変更可能です。

ブロガーたちのInsert Estimated Reading Timeフォーマット一覧

Insert Estimated Reading Timeに関する情報は意外と少ない

「Insert Estimated Reading Time　設定」

「Insert Estimated Reading Time　フォーマット」

「Insert Estimated Reading Time　HTML」

で検索してもろくな情報が出てきません。

wordpressやってるんなら、自分好みにコード書けて当たり前だろ感がすごい！

僕にはそんな知識ありません。

Insert Estimated Reading Time記述例

というわけで他のサイトで使用されているInsert Estimated Reading Timeのコードを調べてみました。

コピペして使えるようHTMLの記述とそれを使用したときに表示される見本を示します。

この記事の所要時間：約10分

<p class=”estimated-reading-time” style=”padding: 0 5px; text-align: right; border-top: dotted 1px #cccccc; border-bottom: dotted 1px #cccccc;”>この記事の所要時間：約 %min% 分</p>

この記事の所要時間： 約 10分00秒

※一部改変

<p class=”estimated-reading-time” style=”border-top:none;border-bottom:1px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444″>
この記事の所要時間： <span style=”font-weight:bold”>約 <span style=”color:#f00″>%min%</span>分<span style=”color:#f00″>%sec%</span>秒</span></p>

おすすめフォーマット設定

• 右詰め表示
• ラインをひく
• 分表示を赤字に

左詰め表示だと記事の一部と思われてしまう気がします。

記事内容とは関係のない情報なので、右表示がおすすめ。

ラインも同じ理由で記事内容との区別をつけるためのアクセントで必要かと。

使用中のコード

現在使用しているコードは以下（上記紹介コードが上手く動作しなかったため一部改変してしようしている）。

<p class=”estimated-reading-time” style=”text-align: right; border-top: dotted 1px #cccccc; border-bottom: dotted 1px #cccccc; padding: 0 5px;”>この記事の読了時間は<span style=”color: #ff0000;”>約 %min% 分</span>です。</p>

右詰、ライン設定のあるもので「いいな」と思えたものがあれば随時追加していきます。

※このプラグインは一旦停止させてしまうと、設定していたコードが消えてしまうようです。停止する場合は、現在使用しているコードをどこかにコピペしておきましょう！

<a href="http://49hack.jp/insert-estimated-reading-time-html/">Insert Estimated Reading TimeのHTML記述例</a>