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

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

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

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

おおもと

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

むすめ

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

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

こんな感じです↓

カスタマイズ前

カスタマイズ後

文字を少し大きく
上下の二重線を消す
上下の余白を広げる
背景に薄いグレーを使う

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

スラスラわかるHTML&CSSのきほん第2版

狩野祐東

￥ 2,138（2019/05/22 18:08時点）

さらに！

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

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

Contents

コピペで簡単CSSコード
さらにちょこっとカスタマイズ
まとめ

コピペで簡単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;/*ホームページに表示させないようにする*/
}

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