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

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

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

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

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

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

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

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

もくじ

コピペで簡単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;/*高さ横位置の調整*/

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

まとめ

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

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

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

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

この記事をシェアする

クリックして応援♪

このブログはSWELLで出来ています!

SWELLレビュー
  • 簡単におしゃれな文章が作れる
  • マウスだけで簡単におしゃれなブログを作れる
  • テーマ製作者に事を気軽に聞ける環境
  • 簡単に収益化ができる仕組みを搭載
当ブログもSWELLで出来ています!
気になる人は公式サイトを覗いて見てくださいね♪

コメントを書いて応援♪

コメント一覧 (2件)

コメントする

CAPTCHA

もくじ
閉じる