XO Event Calendar プラグインのカレンダーをカスタマイズ

「XO Event Calendar プラグインのカレンダーで日付を中央に表示させたい」と要望があったので方法を紹介します。

ここで紹介するカレンダーは下記の仕様として「ミニカレンダー」と名付けておきます。

仕様

  • イベントを非表示
  • 日付を中央(水平および垂直)に表示
  • 極幅狭のサイドバーに最適化

画面イメージ

 

イベントを非表示にするスタイル

下記のスタイルでイベントが非表示になります。

.xo-event-calendar .month-event,
.xo-event-calendar .month-event-space {
	display: none;
}

日付を垂直方向で中央揃えにするスタイル

下記のスタイルで、日付エリアの高さと文字の高さを揃えることで、日付が垂直方向で中央揃えになります。

.xo-event-calendar table.xo-month .month-dayname td div,
.xo-event-calendar table.xo-month .month-week {
	line-height: 2.5em;
	height: 2.5em;
}

日付を水平方向で中央揃えにするスタイル

下記のスタイルで、日付が水平方向で中央揃えになります。

.xo-event-calendar table.xo-month .month-dayname td div {
	padding: 0;
	text-align: center;
	font-size: 1em;
}

ミニカレンダー

上記を含め、まとめたのが下記のスタイルです。

テーマの style.css や [カスタマイズ] の [追加 CSS] 等に記述してください。

.xo-event-calendar {
	max-width: 24rem;
	margin: 0 auto;
}
.xo-event-calendar .month-event,
.xo-event-calendar .month-event-space {
	display: none;
}
.xo-event-calendar table.xo-month .month-dayname td div {
	padding: 0;
	text-align: center;
	font-size: 1em;
}
.xo-event-calendar table.xo-month .month-dayname td div,
.xo-event-calendar table.xo-month .month-week {
	line-height: 2.5em;
	height: 2.5em;
}

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。