【Cocoon簡単カスタマイズ】記事を読む目安時間を目立たなくしてみた!

記事を読む時間の目安をシンプルにカスタマイズCocoon

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

以前記事にした「記事を読む目安時間をシンプルにしてみた」をもっとシンプルに目立たなくカスタマイズした記事です。

おおもと
おおもと

今回カスタマイズする内容はこの画像の部分

コクーンカスタマイズ
カスタマイズ内容
  • 記事を読む目安時間を更新日と同じ高さの左側に設置
  • 文字を薄くしてシンプルに変更

という内容になっています。

シンプルなカスタマイズをしている人はぜひ参考にしてください♪

おおもと
おおもと

CSSカスタマイズの参考書はコレで決まり!興味がある人はボタンを押して確認してください♪

\ Advertisements /

コピペで簡単CSSコード

 
/*記事を目安時間の変更*/
 .read-time{
 font-size:.7em;/*文字のサイズを調整*/
 margin: -2.2rem 0 1rem 0;/*高さ横位置の調整*/
 text-align: left;/*目安時間を左側に移動*/
 border-top:none;/*上の線を消す*/
 border-bottom:none;/*下の線を消す*/
 opacity:.4;/*文字を薄く*/
 font-weight:bold;/*文字を太く*/
 }
 
 .read-time .bold{
 color:#000;/*◯◯分の文字色変更*/
 }
 
 .home.page .read-time{
  display: none;/*ホームページで表示させない*/
 }

このコードは「おおもとブログ」用のコードです。

自分のサイトに合わせて調整をしてください。

調整するところ
  • font-size:.◯◯em;/*文字のサイズを調整*/
  • margin: -◯◯rem 0 ◯rem 0;/*高さ横位置の調整*/

文字のサイズと位置の調整をしたらどのサイトでも対応可能だと思います。

\ Advertisements /

まとめ

この記事は、以前記事にした「記事を読む目安時間をシンプルにしてみた」をもっとシンプルに目立たなくカスタマイズした記事でした。

コピペで簡単に実装出来るので使ってくださいね♪

おおもと
おおもと

CSSカスタマイズの参考書はコレで決まり!興味がある人はボタンを押して確認してください♪

コメントを送る

  1. え、、、、更新記事が。

    • え、、、、、
      更新記事がどうしました?????

タイトルとURLをコピーしました