こんにちは、とっちゃん@nyanco! です。
今回ははてなブログのカスタマイズの記事です。
備忘録がてらのメモとしてアーカイブしておきます。
ブログを読んでいると、良くブログの冒頭に「この記事は約●●分で読めます」という記述を見たことないですか？
読む人にとっては、これから読もうとする記事のボリュームの目安が分かるから便利ですよね！
読んでもらう方も、これがあることで滞在時間が伸びたり、ブックマークされやすくなったりと両者win-winの機能ですね。
これは導入するっきゃない！
ってことで、今回は導入するまでの記録をお送りいたします。
参考にさせていただいたページ
html、cssは分かるけど、javascriptなどのプログラムは素人レベルの私。
記事毎の文字数をカウントして、何分で読めるかを自動的に計算＆表示する仕組みなんだろうなとなんとなくは分かるものの、当然ゼロからこんなプログラムは書けません。
ですが、先人たちの記事を読めばこんな私でも実装できてしまう、今は良い時代です。
というわけで、参考にさせていただきましたページはこちら。
筆者様、ありがとうございます。
上記サイトを参考に、カスタマイズさせていただいたコードがこちら↓
<script>// <![CDATA[ addEventListener("DOMContentLoaded", function() { var length = $('div.entry-content').text().trim().replace(/[\n\r]/g,'').length; var elem = '<p style="font-size: 80%; color: #111; background: #EAE7F3; width: 100%; padding: 1px 0; text-align: center;">この記事は約<span style="font-size:1.2rem;"> ' + Math.ceil(length/400) + ' </span>分で読めます</p>'; $('div.entry-content').prepend(elem); }, false); // ]]></script>
こちらのコードを以下の場所にコピペするだけ！
管理画面（ダッシュボード） ＞ デザイン ＞ カスタマイズ[レンチのアイコン] ＞ 記事 ＞ 記事上下のカスタマイズ ＞ 記事上 の入力欄
プレビュー表示では現れてこないので、一旦「変更を保存する」を押してから別ウィンドウで記事を開いてみてください。
※一覧表示では表示されず、各記事ページのみの表示となります。
簡単ですね。
ちなみにcssが分かる人であれば、以下の部分を修正すれば好きなようにカスタマイズできますよ。
var elem = '<p style="font-size: 80%; color: #111; background: #EAE7F3; width: 100%; padding: 1px 0; text-align: center;">この記事は約<span style="font-size:1.2rem;"> ' + Math.ceil(length/400) + ' </span>分で読めます</p>';
文字色を変更するなら：color: 〜 背景色を変更するなら：background: 〜 などなど
以上、はてなブログに「この記事は約●●分で読めます」を実装する方法でした！
コメント