WordPress 完全手動！予約状況カレンダー

下記のような予約状況カレンダーを、プラグインを使用せず、1行のコードを追加することなく、表示させてみたいと思います。

「どうやって？」って、それは編集エディタで全部手入力するんだぜ。ワイルドだろ～（古！）。

編集エディタ

編集エディタのテキスト エディタに下記の HTML をコピペしてください。

<div class="my-calendar">
<table class="my-calendar-header" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td class="nav-prev" style="text-align: left;"><a href="#">&lt;</a></td>
			<td class="nav-title" style="text-align: center;"><strong>2017 年 4 月</strong></td>
			<td class="nav-next" style="text-align: right;"><a href="#">&gt;</a></td>
		</tr>
	</tbody>
</table>
<table class="my-calendar-table" cellspacing="0" cellpadding="0">
	<thead>
		<tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>
	</thead>
	<tbody>
		<tr><td></td><td></td><td></td><td></td><td></td><td></td><td>1</td></tr>
		<tr><td></td><td></td><td></td><td></td><td></td><td></td><td>&#x1F600;</td></tr>
		<tr><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
		<tr><td>－</td><td>休</td><td>満</td><td>&#x1F600;</td><td>△</td><td>－</td><td>満</td></tr>
		<tr><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
		<tr><td>－</td><td>休</td><td>－</td><td>&#9728;</td><td>－</td><td>△</td><td>満</td></tr>
		<tr><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td></tr>
		<tr><td>－</td><td>休</td><td>－</td><td>－</td><td>&#x1F600;</td><td>－</td><td>△</td></tr>
		<tr><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td><span style="color: #ff0000;">29</span></td></tr>
		<tr><td>－</td><td>休</td><td>&#9728;</td><td>－</td><td>△</td><td>&#x1F62A;</td><td>満</td></tr>
		<tr><td>30</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
		<tr><td>－</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
	</tbody>
</table>
</div>

いちおうビジュアル エディタで編集しやすいように HTML を工夫しています。

スタイル

.my-calendar table,
.my-calendar tr,
.my-calendar th,
.my-calendar td {
	margin: 0;
	border: none;
	border-collapse: collapse;
	background: transparent;
}

.my-calendar .my-calendar-header {
	width: 100%;
}
.my-calendar .my-calendar-header td {
	padding: 0.75rem;
	font-size: 1.4rem;
}
.my-calendar .my-calendar-header a {
	text-decoration: none;
	box-shadow: none;
}

.my-calendar .my-calendar-table {
	width: 100%;
	border: solid 2px #e0e8ff;
}
.my-calendar .my-calendar-table th,
.my-calendar .my-calendar-table td {
	padding: 0.25rem;
}
.my-calendar .my-calendar-table th {
	text-align: center;
	font-size: 0.9rem;
	border: solid 1px #e0e8ff;
	background-color: #f0faff;
}
.my-calendar .my-calendar-table tr:nth-child(odd) td {
	border-top: solid 1px #e0e8ff;
	border-left: solid 1px #e0e8ff;
	border-right: solid 1px #e0e8ff;
}
.my-calendar .my-calendar-table tr:nth-child(even) td {
	border-left: solid 1px #e0e8ff;
	border-right: solid 1px #e0e8ff;
}
.my-calendar .my-calendar-table td {
	text-align: center;
}
.my-calendar .my-calendar-table th:first-child,
.my-calendar .my-calendar-table tr:nth-child(odd) td:first-child {
	color: red;
}
.my-calendar .my-calendar-table th:last-child,
.my-calendar .my-calendar-table tr:nth-child(odd) td:last-child {
	color: blue;
}
.my-calendar .my-calendar-table tr:nth-child(odd) td {
	font-weight: bold;
	font-size: 1.0rem;
}
.my-calendar .my-calendar-table tr:nth-child(even) td {
	font-weight: normal;
	font-size: 1.0rem;
	height: 1.25rem;
}