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

2020 8/10

まいどおおきに！おおもと(@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;/*ホームページに表示させないようにする*/
}

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

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