カレンダーウィジェットに枠をつける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の場合は、モバイルでも、表示幅の変わらないので、多分レスポンシブ対応とかは必要ないかも。

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