【WordPress】カレンダーウィジェットのデザインをカスタマイズする方法【テーマ開発】

今回は、WordPressのカレンダーウィジェットのデザインをカスタマイズする方法を解説していきます。

【WordPress】カレンダーウィジェットのデザインをカスタマイズする方法【テーマ開発】

WordPressでは、デフォルトの機能としてカレンダーウィジェットを使うことができます。

今回は、このカレンダーウィジェットのデザインをcssでカスタマイズしていきます。

カスタマイズ後のデザインはこんな感じ

カスタマイズ後のデザインは、下記のような感じになります。

style.cssにコードを追加する

やることは簡単で、↓のcssコードを「style.css」に追加するだけです。

#wp-calendar {
	background: #fff;
	color: #555555;
	width: 100%;
}

#wp-calendar thead th {
	font-weight: normal;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

#wp-calendar tbody td {
	font-weight: normal;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

#wp-calendar tbody td a {
	color: #ff69b4;
}

#wp-calendar tfoot {
	font-weight: normal;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

#wp-calendar caption {
	background: #fff;
	color: #555555;
	padding: 0;
	text-align: center;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.wp-calendar-nav {
	background: #fff;
	font-weight: normal;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.wp-calendar-nav a {
	color: #555555;
}

.wp-block-calendar {
	margin-bottom: 20px;
}

.widget {
	margin-bottom: 30px;
	padding: 15px;
	border-radius: 3px;
	text-align: center;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.widgettitle {
	color: #808080;
	padding-bottom: 3px;
	border-bottom: 2px solid #ff69b4;
	font-weight: bold;
	font-size: 18px;
	text-align: left;
	letter-spacing: 1px;
}

#footer .widget {
	padding: 15px 0;
	border: none;
	box-shadow: 0 0 0 0;
}

#footer .widgettitle {
	color: #f4f4f4;
}

.footer-widget-left {
	padding-top: 30px;
}

@media (min-width: 768px) {

	.widget {
		margin-bottom: 20px;
		padding: 30px;
		letter-spacing: 1px;
	}

	.footer-widget-center,
	.footer-widget-right {
		padding-top: 30px;
	}
}