見出しデザインのカスタマイズ＆カテゴリーの整理

このブログの目次と見出しのデザインを変更しました。

このブログは、はてなブログのSOHO というテーマを使っています（そうだったハズ）。

検索上位に表示される、はてなブログ見出し変更コピペで簡単！ 系では、うまくいきませんでした・・・なんででしょうか？

いろいろ探して参考にできたサイトはこちら↓

目次：https://www.yukihy.com/entry/hatenablog-table-of-contents-custom

見出し：https://www.notitle-weblog.com/hatena-heading

検索では見出しの素敵なデザインがたくさんあるけど、なんでかうまくいかないのです。上記参考サイトではコピペでいけたけど、、なぜかリセット方法はうまくいきませんでした。ので、苦肉の策として背景を白で塗りつぶしで対応。

本当はもう少し細かいところを直したいけど・・・やっぱりうまくいかないので諦めました。

確認用の見本

大見出し　h3

中見出し　h4

小見出し　h5

貼り付けたソース

/* 見出し　デザイン */
.entry-content h3 {
padding: 6px 10px;
border-bottom: 4px solid #ccc;
color: #333;
line-height: 1.5;
position: relative;
}
.entry-content h3:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100px;
height: 4px;
background-color: #3498db;
z-index: 2;
}

/* 左背景に黒が出てしまう為白で塗りつぶし */
.entry-content h4 {
padding: 6px 10px;
border-left: 8px solid #ffffff;
}

.entry-content h4 {
position: relative;
padding: 6px 0 6px 24px;
border-bottom: 2px solid #63b8cc;
color: #333;
width:80%;
line-height: 1.5;
}
.entry-content h4::before,
.entry-content h4::after {
content: '';
position: absolute;
background-color: #63b8cc;
border-radius: 50%;
}
.entry-content h4::before{
top: 6px;
left: 8px;
width: 12px;
height: 12px;
}
.entry-content h4::after{
top: 20px;
left: 0;
width: 8px;
height: 8px;
}

.entry-content h5 {
position: relative;
padding: 6px 0 6px 24px;
color: #333;
width:80%;
line-height: 1.5;
}
.entry-content h5::before,
.entry-content h5::after {
content: '';
position: absolute;
background-color: #c3f1ea;
border-radius: 50%;
}
.entry-content h5::before{
top: 6px;
left: 8px;
width: 12px;
height: 12px;
}
.entry-content h5::after{
top: 20px;
left: 0;
width: 8px;
height: 8px;
}