デフォルト表示
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
<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 /-->