以前は結構流行っていた「この記事は何分で読めます。」という閲覧所要時間表示と言うものがあります。
ユーザビリティの為に概ねの記事の文字数で「何分何秒」と表示させていたアレです。
しかし、最近ではそのナリをひそめてしまっている気がします。
2025年8月29日 (金曜日)本日の人気記事トップ10
今日は2025年8月29日です。
2025年8月29日 (金曜日)↓における週間月間人気記事トップ3は?↓
計測データがありません。
Windows10でエラーコード0x800705b4の対処方法 4PV
Windows10で前回の記事でも紹介したWindows Updateができないくて、その対処方法を記載しました。 そしたら、 一応、sfc /scannowの実行でいくつかのWindo…
以前に、エアコンダクト内LED化について少しだけ実施しましたが(センター部分のみ)、なんとも左右の運転席側と助手席側が暗く感じてしまうので運転席側エアコンダクト内と助手席側エアコンダクト内のLED化も…
ハンドルスピンナーおすすめと世田谷ベース掲載ALEBANAハンドルスピンナー ハンドルスピナー軽自動車ハイエーストラック対応工具不要専用緩衝材入り (ブラック) 2PV
ハンドルにも車種によってステアリングの重さが変わってきます。最近では、油圧式ステアリングはほとんどなくなり多くは電子制御によるステアリングのパワステ機能が備わっています。逆に言うと以前のようにステアリ…
Windows10でエラーコード0x800705b4の対処方法 4PV
Windows10で前回の記事でも紹介したWindows Updateができないくて、その対処方法を記載しました。 そしたら、 一応、sfc /scannowの実行でいくつかのWindo…
以前に、エアコンダクト内LED化について少しだけ実施しましたが(センター部分のみ)、なんとも左右の運転席側と助手席側が暗く感じてしまうので運転席側エアコンダクト内と助手席側エアコンダクト内のLED化も…
ハンドルスピンナーおすすめと世田谷ベース掲載ALEBANAハンドルスピンナー ハンドルスピナー軽自動車ハイエーストラック対応工具不要専用緩衝材入り (ブラック) 2PV
ハンドルにも車種によってステアリングの重さが変わってきます。最近では、油圧式ステアリングはほとんどなくなり多くは電子制御によるステアリングのパワステ機能が備わっています。逆に言うと以前のようにステアリ…
以前は結構流行っていた「この記事は何分で読めます。」という閲覧所要時間表示と言うものがあります。
ユーザビリティの為に概ねの記事の文字数で「何分何秒」と表示させていたアレです。
しかし、最近ではそのナリをひそめてしまっている気がします。
結構、簡単と言えば簡単なのですが…。
人によって読む速度が異なりますので、600文字を1分程度かかって読むという計算式にての閲覧所要時間表示方法になります。
ということは…。
閲覧所要時間を算出するコードについてのロジックは単純で、
記事の文字数と読む速度(文字/分)から算出しています。
読む速度は、ざっとこんなもんだろうということで、600(文字/分)としています。読む速度は個人差がありますし、読む速度に影響するパラメータは他にもあるのですが、あくまで概算値の提供が目的なので複雑なことはしていません。
<?php
$numchar = mb_strlen( strip_tags($post-> post_content), "UTF-8");
$readtime = ceil($numchar/600);
echo $readtime;
?>
この上記内にある600という数値を任意に変えることで、
上記の計算式は変更可能なので500にしたのであれば1分間に500文字の読むスピードにての閲覧時間表示(閲覧所要時間表示)になります。
※あまりにも長い閲覧所要時間が表示されると、( ̄◇ ̄;)エッそんなにかかっっちゃうの?とも思われ兼ねないので数値は適当に設定してみるのも良いかもしれませんね。
<p class="meta_read_time">
閲覧所要時間: 約
<span class="ft14px">
<?php
$numchar = mb_strlen( strip_tags($post-> post_content), "UTF-8");
$readtime = ceil($numchar/600);
echo $readtime;
?>
</span>
分
</p>
「閲覧所要時間: 約XX分」
と表示するコードです。
p.meta_read_time {
font-size: 12px;
}
.ft14px {
font-size: 14px;
font-weight: bold;
}
上記CSSはフォントサイズをboldによって強調していますが、
今現在では通常表示程度の少し小さめのフォントサイズとboldによる強調は必要ないかもしれませんね。
=通常の大きさのみで充分かもれませんね。
今はナリをひそめている所要時間表示(閲覧時間表示)ですが、
今後また流行る?かも?しれませんので備忘録として一応残しておきました。
また、
今でももしかしたら需要があるのかもしれないと思いつつ記事にさせて頂きました。
ちょっとだけブログなどのエッセンスにいかがでしょうか?
CSSでいろいろなデザインにすることは可能ですが、
上記のCSSですと無難な感じですが以下のようにも・・・・・・。
デザインはいろいろと試してみて自分で納得のいく感じのものに仕上げてみてください!!
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
よろしかったらシェアよろしくお願いします。
新着コメント