カレンダーウィジェットに枠をつけるCSSカスタマイズ方法

Simplicity1.7.4にて、以下の設定をデフォルトにしました。

WordPressデフォルトのカレンダーウィジェットに枠を付けるCSSのカスタマイズ方法です。

カレンダーウィジェットは、Wordpress独特の機能ですので、Simplicityに限らず、他のテーマでも利用できるのではないかと思います。

土曜のヘッダーセルには青色、日曜のヘッダーセルには、赤色系の背景色を設定しています。

子テーマのstyle.cssに以下のように追記して貼り付けてください。(親テーマのstyle.cssでも良いけど子テーマのに推奨。)

/*****************************
*カレンダーに枠を付ける
*****************************/
#wp-calendar {
    border-collapse: collapse;
    border-top-width: 1px;
    border-right-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-top-color: #999;
    border-right-color: #999;
    width: 250px;
    margin-left: 35px;
}
#wp-calendar thead tr th {
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-bottom-color: #999;
    border-left-color: #999;
}

/*土曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(6){
  background-color: #C0DDF9;
}

/*日曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(7){
  background-color: #F5D0D3;
}

#wp-calendar td {
    text-align: center;
    padding: 0px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-bottom-color: #999;
    border-left-color: #999;

}
#wp-calendar caption {
    font-weight: bold;
    text-align: left;
}
#wp-calendar tbody tr #today {
    background-color: #CCC;
}

細かな調整や、モバイル対応は各自でお願いします。

※Simplicityの場合は、モバイルでも、表示幅の変わらないので、多分レスポンシブ対応とかは必要ないかも。

GitHubリポジトリ

不具合等ありましたらGitHubに、ご連絡いただけると幸いです。

yhira/simplicity2

スポンサーリンク
アドセンス(大)
アドセンス(大)

フォローする

スポンサーリンク
アドセンス(大)