WP5.3で検証

カレンダー(WP5.2〜)

デフォルト表示

2021年11月
 123456
78910111213
14151617181920
21222324252627
282930 
<div class="wp-block-calendar">
	<table id="wp-calendar">
		<caption>2019年11月</caption>
		<thead>
			<tr>
				<th scope="col" title="月曜日">月</th>
				<th scope="col" title="火曜日">火</th>
				<th scope="col" title="水曜日">水</th>
				<th scope="col" title="木曜日">木</th>
				<th scope="col" title="金曜日">金</th>
				<th scope="col" title="土曜日">土</th>
				<th scope="col" title="日曜日">日</th>
			</tr>
			</thead>

			<tfoot>
			<tr>
				<td colspan="3" id="prev"><a href="https://wp5.x96.jp/2014/01/">« 1月</a></td>
				<td class="pad"> </td>
				<td colspan="3" id="next" class="pad"> </td>
			</tr>
			</tfoot>

			<tbody>
			<tr>
				<td colspan="4" class="pad"> </td><td>1</td><td>2</td><td>3</td>
			</tr>
			<tr>
				<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
			</tr>
			<tr>
				<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td>
			</tr>
			<tr>
				<td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td><a href="https://wp5.x96.jp/2019/11/23/" aria-label="2019年11月23日 に投稿を公開">23</a></td><td>24</td>
			</tr>
			<tr>
				<td>25</td><td id="today">26</td><td>27</td><td>28</td><td>29</td><td>30</td>
				<td class="pad" colspan="1"> </td>
			</tr>
		</tbody>
	</table>
</div>

ブロック設定パネル

スタイル設定

標準スタイル

.wp-block-calendar {
    text-align:center
}

.wp-block-calendar tbody td, .wp-block-calendar th {
    padding: 4px;
    border:1px solid #e2e4e7
}

.wp-block-calendar tfoot td {
    border:none
}

.wp-block-calendar table {
    width: 100%;
    border-collapse: collapse;
    font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif
}

.wp-block-calendar table th {
    font-weight: 400;
    background:#edeff0
}

.wp-block-calendar a {
    text-decoration:underline
}

.wp-block-calendar tfoot a {
    color:#00739c
}

.wp-block-calendar table caption, .wp-block-calendar table tbody {
    color:#40464d
}

ブロック制御コメント

開始タグのみ。終了タグなし。

<!-- wp:calendar /-->