先日新たに作成した「更新記録」のCSSを追加して、見てくれを変えてみました。見やすくなったでしょうか。
主な変更点は
・テーブルキャプションの左寄せ。
・テーブル見出しのセンタリングと改行禁止。
・テーブル内データの文字を小さめにする。
・折り返したときに上下の文字が重ならないようにした。
以下が変更後の状態。
以下は、変更前の状態。
htmlは、タグは変更せず、文字内容のみ変えました。
以下は、テーブル部分の一部抜粋。
<table><caption>【 更新履歴 】</caption>
<tbody class="kemu">
<tr>
<th>日付</th>
<th>投稿記事タイトル／その他の作業 覚え書き</th>
</tr>
<tr class="day-hr">
<td rowspan="1">3/8</td>
<td><a href="https://www.～～～">自作ダンボール本箱に紙を敷く</a></td>
</tr>
</tbody>
</table>
CSSは、全体を管理する「デザインCSS」には記述せず、記事内の <style>～ </style> タグ内に、記述しています。他の既存ページに影響を与えないので好きなように変更できます。
今までのCSSは以下の最初の2行のみ。今回の変更では3行目以下の記述を追加しました。
tbody.kemu {line-height: 0.9 }
tr.day-hr {border-top: ridge 3px}
caption { text-align: left }
th {
text-align: center;
white-space: nowrap;
}
td {
font-size: 85%;
line-height: 2ex;
}
