
オリジナルのhタグ(見出し)デザインはシンプルでいいのですが、h2が少しわかりにくいかなぁと思い変更してみました。
参考になるサイトはいろいろありましたが、Simplicityのデザインを生かしたhタグのこちらを 丸パクリ 使わせていただきました。
目次
子テーマ※のstyle.cssに記述
※子テーマを設定している場合
.article h2{
padding-left: 2.25em;
border-bottom: 3px double #e7e7e7;
border-top: 3px double #e7e7e7;
border-left: 0px;
}
.article h2:before {
position: absolute;
top: 0.9em;
left: 0.4em;
width: 0.75em;
height: 0.75em;
border: 2px solid #c7c7c7;
content: "";
}
.article h2:after {
position: absolute;
top: 1.25em;
left: 0.75em;
width: 0.75em;
height: 0.75em;
border: 2px solid #e7e7e7;
content: "";
}
.article h3{
border-bottom: 2px solid #e7e7e7;
padding-left: 1.5em;
}
.article h3:before{
content:'';
height: 0.75em;
width: 0.75em;
display:block;
position:absolute;
top: 0.6em;
left: 0.2em;
background-color:#FFFFFF;
box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) inset
}
.article h4{
border-bottom: 2px dashed #e7e7e7;
padding-left: 1.75em ;
}
.article h4:before{
content:'';
height: 0.5em;
width: 0.5em;
display:block;
position:absolute;
top: 0.75em;
left: 0.4em;
background-color:#FFFFFF;
box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) inset
}
黄色のハイライト部分は元の記述と違う部分です。
「.article 」を入れないと、私の環境ではトップページの記事一覧にもアイキャッチが付いてしまいました。