「ブログ更新備忘録」にCSS設定

昨日作成した「ブログ更新備忘録」ページにCSSを設定し、見た感じを変更してみました。

見やすいかどうかは微妙ですが、変更したのは以下のとおり。

・見出し文字を小さく
・日付に下線と先頭に●印
・日付ブロック毎に下線

htmlは以下のとおり。
各要素に css用のclassを指定しました。

<div>
<h2 class="historylog-subtitle">新規投稿や過去記事更新、ブログデザイン変更などの記録</h2>
</div>
<div class="historylog-day-outer">
<h3 class="historylog-date">2022/02/02 (水)</h3>
<ol>
<li>本ページ「ブログ更新備忘録」にCSS設定。</li>
<li>新規投稿： <a href="https://www.mypath-as-variant.com/entry/2022/02/02/231801">「ブログ更新備忘録」にCSS設定</a></li>
</ol>
</div>
<div class="historylog-day-outer">
<h3 class="historylog-date">2022/02/01 (火)</h3>
<ol>
<li>本ページ「ブログ更新備忘録」を固定ページとして作成</li>
<li>新規投稿： <a href="https://www.mypath-as-variant.com/entry/2022/02/01/224452">ブログ更新記録。三度目の再開</a></li>
<li>本ブログの <a href="https://www.mypath-as-variant.com/entry/2021/02/15/123159">「はてな記法モード」でソースコードの「シンタックスハイライト」</a>が、galaxylikeflanさんに「 <a href="https://galearncolorx2.hateblo.jp/entry/2022/02/01/175127">オリジナルゲームの紹介 - color×2</a> 」で言及されました</li>
</ol>
</div>

今回追加したcssは以下のとおり。

<h2>,<h3>タグについては、このcssの設定の他に、デフォルトで細い下線を引く設定がされています。(日付の下に、幅一杯の細い線)

/* 2022/02/02 更新履歴ページ*/

.historylog-day-outer {
	border-bottom-style: solid;
	border-bottom-width: thin;
}

h2.historylog-subtitle {
    font-size: small;
}

h3.historylog-date {
    font-size: small;
    text-decoration: underline;
}

h3.historylog-date:before{ content: "●　" }

今後、軽微な変更については、「ブログ更新備忘録」に記載していきます。