Cocoonには記事本文の最初に「この記事は約○分で読めます」と記事を読む時間の目安を表示する機能がついています。
本記事では、簡単なCSSのコピペで出来るCocoonの「この記事は約○分で読めます」のカスタマイズ方法を解説します。
記事を読む時間の目安を表示させる方法
カスタマイズの前に、まずは読む時間の目安を表示させる設定をします。
WordPress管理画面に行き、「Cocoon設定」→「本文」を選択します。
そのまま下にスクロールすると「投稿情報表示設定」という項目があるので、そこで「記事を読む時間の目安を表示する」にチェックを入れます。
これで表示されるようになりました！
一部の記事で非表示にする方法
プライバシーポリシーやお問い合わせページなど、一部の記事では表示がいらない場合もあると思います。
その場合は、記事の編集画面の右側にある「ページ設定」から、「読む時間を表示しない」にチェックを入れることで、記事個別単位で非表示にすることができます。
カスタマイズの手順
では、表示の設定が済んだところでカスタマイズをしていきます。
WordPress管理画面から、「外観」→「カスタマイズ」→「追加CSS」にカスタマイズ用コードをコピペします。
線や文字の色の変更
.read-time{
border-color: lightblue; /* 線の色 */
color: lightpink; /* 文字の色 */
}線をなくす＆線の種類の変更
.read-time{
border-top: none; /* 上の線を消す */
border-bottom: dashed 1.5px lightblue; /* 線の種類、太さ、色 */
}線の種類
- solid：普通の線
- dotted：点線
- dashed：破線
- double：二重線
吹き出し風
.read-time{
position: relative;
border: none;
background: #c6eeee; /* 吹き出しの色 */
padding: 5px;
border-radius: 3px;
margin-bottom: 25px;
}
.read-time:before{
position: absolute;
content: "";
top: 100%;
left: 50%;
border: 10px solid transparent;
margin-left: -15px;
border-top-color: #c6eeee; /* 吹き出しの色 */
}
