Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonの「この記事は約〇分で読めます」の設定とカスタマイズ

スポンサーリンク
カスタマイズ
この記事は約6分で読めます。

Cocoonには、記事の文字数によって自動計算してどのくらいの時間で読めるかを表示する機能があります。

この部分の使い方と、表示したくないページがある場合の設定方法について。

更にデザインカスタマイズ方法です。

 

スポンサーリンク

表示させる方法

表示していない場合は、以下の設定で表示が可能です。

Cocoon設定 → 本文

Cocoon:本文設定

 

一番下に「記事を読む時間」という項目がありますので、ここにチェックを入れると表示出来ます。

 

Cocoon:記事を読む時間

 

記事単位に非表示にしたい

サイトマップやプライバシーポリシーなどのページには不要なので、非表示にしたい、、、などといった場合には、個別に設定出来ます。

※固定ページでも投稿ページでも非表示にする事が可能です。

 

投稿の編集で、右側に出る「ページ設定」の中にあります。

チェックを入れると、その記事では表示されなくなります。

Cocoon:ページ設定

 

ページ設定の項目が見当たらない場合は、記事編集画面の上部にある「表示オプション」を開き、「ページ設定」にチェックを入れると表示されます。

 

Cocoon:ページ設定

 

 

初期表示

初期表示は以下の通り。記事タイトル、アイキャッチ、投稿日の下にセンター表示されます。

 

この記事は〇分で読めます

 

 

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ追加CSS

外観→テーマエディターstyle.css

 

 

カスタマイズサンプル

Before

見えにくいですが、上下に薄いグレーで二重線が入っています。

この記事は〇分で読めます

初期CSS

.read-time {
  text-align: center;
  font-size: 0.7em;
  border-top: 4px double #eee;
  border-bottom: 4px double #eee;
  margin: 0 3%;
}

 

ラインの色を変える

記事を読む時間:カスタマイズ

.read-time {
border-top: 4px double #333; /*上部の二重線と色・太さ*/
border-bottom: 4px double #333;/*下部の二重線と色・太さ*/
}

 

ラインの線種を変える

記事を読む時間:カスタマイズ

.read-time {
border-top: 2px solid #333; /*一本線*/
border-bottom: 2px solid #333;
}

 

線を消す

記事を読む時間:カスタマイズ

 

.read-time {
border-top:none; /*線を消す*/
border-bottom: 2px dotted #333; /*ドット*/
}

 

影付き枠

記事を読む時間:カスタマイズ

.read-time {
border-bottom: 1px solid #ccc;
box-shadow: 0 0 8px #d6c7c7;
}

 

立体枠

記事を読む時間:カスタマイズ

 

.read-time {
border: outset 10px #9dceff;
}

 

グラデーション

記事を読む時間:カスタマイズ

.read-time {
background-image: linear-gradient(to right, #9dceff, #144575);
color: #fff;
}

文字サイズ・余白を変える

記事を読む時間:カスタマイズ

.read-time {
font-size:16px; /*文字サイズ*/
border-top: 2px solid #333;
border-bottom: 2px solid #333;
padding: 2em; /*余白*/
}

 

全幅をサイズ変更

記事を読む時間:カスタマイズ

.read-time {
width:400px; /*幅(%指定でもOK)*/
margin: auto; /*センタリング*/
border-top: 2px solid #333;
border-bottom: 2px solid #333;
}

 

 

デザイン自体を変える

パターン1

記事を読む時間:カスタマイズ

.read-time{
padding: 0.2em 0.5em;
margin: 2em 0;
color: #565656;
background: #ffeaea;
box-shadow: 0px 0px 0px 10px #ffeaea;
border: dashed 2px #ffc3c3;
border-radius: 8px;
}

 

パターン2

記事を読む時間:カスタマイズ

.read-time{
margin: 2em 0;
position: relative;
padding: 0.25em 1em;
border: solid 2px #ffcb8a;
border-radius: 3px 0 3px 0;
}
.read-time:before,.read-time:after
{
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px #ffcb8a;
border-radius: 50%;
}
.read-time:after {
top:-12px;
left:-12px;
}
.read-time:before {
bottom:-12px;
right:-12px;
}

 

パターン3

記事を読む時間:カスタマイズ

.read-time{
position: relative;
background: #95ccff;
box-shadow: 0px 0px 0px 5px #95ccff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}
.read-time:after{
position: absolute;
content: '';
right: -7px;
top: -7px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #65adf0 #fff #65adf0;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

 

パターン4

記事を読む時間:カスタマイズ

.read-time{
margin: 2em 0;
padding: 1em;
background: radial-gradient(#edcccc, #eb8686);
}

 

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

 

コメント

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