お仕事の依頼はココをクリック

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

記事を読む目安時間をカスタマイズ Cocoon
スポンサーリンク

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

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

この「記事を読む目安時間」はプラグインを入れることで簡単に導入出来る機能ですが、なんと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;/*ホームページに表示させないようにする*/
}

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

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

スポンサーリンク

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

  • font-size:○○;/*文字の大きさ*/
  • background-color:○○;/*背景の色*/
  • text−align:○○;/*文字の位置*/

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

スポンサーリンク

まとめ

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

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

スポンサーリンク
スポンサーリンク
Cocoonブログ

Relation

- Follow -
おおもとブログ

Comment