Kindleストア売れ筋ランキング

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

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

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

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

ママのアイコン画像ママ

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

おおもとのアイコン画像おおもと

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

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

こんな感じです↓

カスタマイズ前
カスタマイズ後
カスタマイズの内容
  • 文字を少し大きく
  • 上下の二重線を消す
  • 上下の余白を広げる
  • 背景に薄いグレーを使う

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

さらに!

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

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

Contents

コピペで簡単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:○○;/*文字の位置*/

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

まとめ

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

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

https://wvtravelclub.jp/cocooncss/

この記事を書いた人

・面白いネタ
・ためになるネタ
・時事ネタ
・しょうもないネタ
を日々更新していきます!
誤字脱字が多いかもしれませんが、愛嬌と言うことで暖かく見守ってください。

ブログを楽しむテーマ「SWELL」

当ブログで使用している有料テーマ「SWELL」はブログを楽しく書く事を思い出させてくれるテーマ

  • 簡単におしゃれな文章が作れる
  • マウスだけでおしゃれなブログを作れる
  • テーマ製作者に事を気軽に聞ける環境
  • 簡単に収益化ができる仕組みを搭載

楽しく文章を書く事以外にもワクワクさせてくれる機能がアナタを待っています!

SWELLは初心者〜上級者まですべての人にオススメのテーマ

今のマンネリ化した環境から脱出したい人はSWELLを使ってください!

ブログが書きたくて書きたくてたまらない!!!!!

SWELLはそんな思いにさせてくれます。

おおもとのアイコン画像おおもと

SWELLのおかげで毎日記事が書けています♪

SWELLに興味がある人は公式サイトをチェックしてください。

\ SWELL公式サイトをチェック /

コメント

コメントする

CAPTCHA

Contents
閉じる