[WP]Simplicityのhタグのデザインを変更

URL Copied!

オリジナルの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 」を入れないと、私の環境ではトップページの記事一覧にもアイキャッチが付いてしまいました。