Cocoonのカレンダーをカスタマイズ

カスタマイズ
この記事は約2分で読めます。

WordPressの無料テーマ、Cocoonのカレンダーをカスタマイズする方法を解説します。

追加CSSにコピペするだけなので、簡単にできます。

完成イメージ

Cocoonカレンダーカスタマイズ完成イメージ
完成イメージ

パステルカラーの優しい色合いに。

カレンダーらしく土日に色をつけました。

色は各サイトに合わせて変更できます。

Cocoonのカレンダーをカスタマイズする手順

カスタマイズ用CSSコードを「追加CSS」にコピペします。

追加CSSは、「管理画面→カスタマイズ→追加CSS」で編集できます。

追加CSS
追加CSS

カスタマイズ用CSS

/* カレンダー */
table th {
    background: #FDF6F9; /* 月〜金曜日の色 */
}
#wp-calendar th:nth-child(6){
	background-color: lightblue; /* 土曜日の色 */
}
#wp-calendar th:nth-child(7){
	background-color: lightpink; /* 日曜日の色 */
}
#wp-calendar td{
	background-color: #fff; /* カレンダー全体の背景を白に */
}

お使いのサイトに合わせて、カラーコードの部分を好きな色に変えて使ってみてください。

コピペしたら、忘れずに「公開」を押してください。

カスタマイズの仕組みを解説

「nth-child(数字)」というのは、(数字)番目の要素に適応という意味です。

この場合は、要素は月〜日の7つあり、そのうち土曜日は6番目、日曜日は7番目の要素にあたります。

なので、このカスタマイズでは「6番目の要素の背景をライトブルーに、7番目の要素の背景をライトピンクに」という指定をしています。

この「nth-child」の部分を「擬似クラス」と言います。

詳しくは以下の記事で解説しているので、興味のある方は読んでみてください。

【CSS】疑似クラスnth-child(n)を徹底解説!

コメント

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