【Cocoon簡単カスタマイズ】記事を読む目安時間をシンプルにしてみた

まいどおおきに！おおもと(@so88qa)です！

この記事は、Cocoon1.7.6.1で新たに追加された「記事を読む目安時間」をシンプルなモノにカスタマイズする方法を紹介する記事です。

Cocoon

「記事を読む目安時間」を表示する方法 記事を読む際に「この記事はどれくらいの時間かかるのか？」ということを訪問者にわかりやすく伝えます。

この「記事を読む目安時間」はプラグインを入れることで簡単に導入出来る機能ですが、なんとCocoon(コクーン)では標準機能で表示することが出来るようになりました！

ママ

でも見た目が自分のブログに合わないかも…

おおもと

もうちょっと、シンプルで目立つようにしたいよね〜

と言う方のために、少しカスタマイズをしてみたました！

こんな感じです↓

というカスタマイズをしています。

さらに！

ホームページ(トップページ)に固定ページを使っているなら、「記事を読む目安時間」を表示させないようにもしているので、かゆい所に手が届くカスタマイズだと思います。

興味のある人はぜひ、記事を読んでくださいね！

コピペで簡単CSSコード

/*記事を読む見込み時間変更*/
.read-time{
	font-size:.9rem;/*文字の大きさを少し大きく*/
	background-color:#efefef;/*背景を薄いグレーに*/
	margin:1rem 0;/*上下の余白を広げる*/
	padding: .2rem 0;/*グレーの背景を少し大きくする*/
	border-top:none;/*上の二重線を消す*/
	border-bottom:none;/*下の二重線を消す*/
}

.home.page .read-time{
	 display: none;/*ホームページに表示させないようにする*/
}

たったこれだけのコードで実装出来ます♪

次はちょっとしたカスタマイズを紹介しますね

さらにちょこっとカスタマイズ

の変更をおすすめします♪

まとめ

この記事は「記事を読む目安時間」をシンプルなモノにカスタマイズする方法を紹介する記事でした。

まだ、導入されたばかりの機能で改良の余地はありますが新しく良いものが出来たら逐次紹介していきますね♪