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

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; /* 吹き出しの色 */
}