WordPressの無料テーマ、Cocoonのカレンダーをカスタマイズする方法を解説します。
追加CSSにコピペするだけなので、簡単にできます。
完成イメージ
パステルカラーの優しい色合いに。
カレンダーらしく土日に色をつけました。
色は各サイトに合わせて変更できます。
Cocoonのカレンダーをカスタマイズする手順
カスタマイズ用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」の部分を「擬似クラス」と言います。
詳しくは以下の記事で解説しているので、興味のある方は読んでみてください。
コメント