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

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

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

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

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

あわせて読みたい
【Cocoon簡単カスタマイズ】記事を読む目安時間をシンプルにしてみた
【Cocoon簡単カスタマイズ】記事を読む目安時間をシンプルにしてみたまいどおおきに!おおもと(@so88qa)です!この記事は、Cocoon1.7.6.1で新たに追加された「記事を読む目安時間」をシンプルなモノにカスタマイズする方法を紹介する記事...
おおもとのアイコン画像おおもと

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

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

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

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

もくじ

コピペで簡単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は初心者〜上級者まですべての人にオススメのテーマ

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

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

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

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

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

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

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

コメント

コメント一覧 (2件)

コメントする

もくじ
閉じる