大人の上質 サミーズディープストリーム ルアー用品
ワードプレスのウィジェットにカレンダーがあります。
GLOBBER エクスプローラー トライク 3in1 グロッバー 三輪車
レトロペダルカー フェラーリ
【極美品】ティファニー ネックレス チェーン シルバー ag925 51cm
辻木工 アーム チェア 椅子 ダイニングチェア ヴィンテージ ミッドセンチュリー
シュガーケイ 3歳 100 ドレス 花柄 イチゴ 薔薇 赤 Sugar Kei
特にタイトルとか入れず保存します。
サイトを表示してみます。
自作のワードプレス・テーマですので崩れていますが<table>で組んでありますのでそれほど崩れてないようです。
COACH コーチ 新作ショルダーバッグ ハンドバッグ レトロ
カレンダーの機能として投稿した月のカレンダーが自動的に表示するようです。
１月に投稿したのであれば１月のカレンダー、3月であれば３月のカレンダーという風に投稿した日時と連動しています。
例えば1月25日の投稿するとカレンダーの1月25日のところにリンクが張られ、それをクリックすると1月25日に投稿した記事の一覧をアーカイブで見ることができます。
inakustik EX-2.5S 1.5mペア スピーカーケーブル
【美品】ロエベ ショルダーバッグ 2way ベラスケス ツイスト金具 バイカラー
クリックするとその月に投稿した記事の一覧がアーカイブで表示されます。
【講義録付き】清水義久先生：薬師如来セミナー
See the Pen ハッシー様専用 ROVAL RAPIDE CLX ディスクブレーキ(付属品付き) by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.
それではカレンダーの見た目をいじっていきます。
まずはウィジェット・カレンダーのタグ構成です。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>calendar</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<section id="calendar-2" class="widget widget_calendar">
<div id="calendar_wrap" class="calendar_wrap">
<table id="wp-calendar">
<caption>
2020年3月
</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://tatsuya-lab.com/2020/02/">« 2月</a></td>
<td class="pad"> </td>
<td colspan="3" id="next" class="pad"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="6" class="pad"> </td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">1</a></td>
</tr>
<tr>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">2</a></td>
<td>3</td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">4</a></td>
<td>5</td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">6</a></td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">7</a></td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">8</a></td>
</tr>
<tr>
<td>9</td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">10</a></td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">11</a></td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">12</a></td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">13</a></td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">14</a></td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">15</a></td>
</tr>
<tr>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">16</a></td>
<td><a href="https://tatsuya-lab.com//" aria-label=" に投稿を公開">17</a></td>
<td id="today">18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td class="pad" colspan="5"> </td>
</tr>
</tbody>
</table>
</div>
</section>
</body>
</html>
うたうたい様専用
CSS
#wp-calendar{
width: 100%;
font-size:12px;
padding-top: 10px;
}きっちり並べるために<tr>にflexboxをかけて均等に並べます。
CSS
#wp-calendar tr{
display: flex;
}
<th>と<td>をflexboxをかけて並べるためdisplayをblockにしておきます。
これを設定しておかないとflexがかかりません。
幅を７等分するためcalc関数を使います。
CSS
#wp-calendar th,
#wp-calendar td{
display: block;
width: calc(100% / 7);
text-align: center;
margin-bottom: 10px;
}カレンダーのコマの揃えですが基本左揃えにしています。
CSS
#wp-calendar tr{
display: flex;
justify-content: flex-start;
}
ただ最初の週のコマは右揃えにします。
FIELD X TREAMER ウエットスーツ ウェットスーツ たくり
#wp-calendar tr:first-of-type{
justify-content: flex-end;
}一応日曜日は赤色にしてみます。
CSS
#wp-calendar td:last-of-type,
#wp-calendar th:last-of-type{
color: red;
}リンクの妙な余白を消します。
CSS
#wp-calendar td a{
padding: 0;
}<tfoot>の中の<td>に各月の名前が入ってますのでその部分の設定をflexboxで横に並べて３等分しておきます。
CSS
#wp-calendar tfoot tr{
display: flex;
justify-content: center;
}
#wp-calendar tfoot tr td{
width: calc(100% / 3);
}カレンダーの中で当日になっているコマは目立つように背景色をつけます。
CSS
#wp-calendar #today a,
#wp-calendar #today{
color: white;
background-color:#6699ff;
font-weight:bold;
}エクセン 湿式ダイヤモンドブレード C-140