「見出し」の修正

問題点

以前使っていたデザインテーマ「Minimalism」で設定してあった「見出し」のデザイン

↓

「JOURNAL.」にテーマを変更後、CSSが反映されない

解決方法

セレクタの書き方が異なっていた

例えば

以前のCSSの一部
h3{
color: #ffffff;/文字の色/
border: 2px dashed #ffecef;
background: #F9B8CD;/ 背景の色 /
border-radius: 8px;
box-shadow: 0 0 3px 3px #F9B8CD;
margin: 0 0 1.5em;
padding: 0.5em 0.8em;
}

ピンク色のマーカー部分が「h3」になっている。


変更したテーマに合わせて書き換えたCSS

書き換えたもの
.entry-content h3{
color: #ffffff;/文字の色/
border: 2px dashed #ffecef;
background: #F9B8CD;/ 背景の色 /
border-radius: 8px;
box-shadow: 0 0 3px 3px #F9B8CD;
margin: 0 0 1.5em;
padding: 0.5em 0.8em;
}

黄色のマーカー部分は「.entry-content h3」で、「.entry-content」というclass名が付いています。

どうりで元々のCSSどおりに表示されないわけです。
CSSを修正する前は、テーマに設定されているCSSと古いCSSが重複してしまい、画面上も両方のデザインが重なって表示されてしまいました。

最終的に該当箇所を書き直し、調整終了です。

修正後のCSS

修正後のCSS
.entry-content h3{
color: #ffffff;/文字の色/
border: 2px dashed #ffecef;
background: #F9B8CD;/ 背景の色 /
border-radius: 8px;
box-shadow: 0 0 3px 3px #F9B8CD;
margin: 0 0 1.5em;
padding: 0.5em 0.8em;
}

.entry-content h4{
color: #7e5f4d;
font-size:115%;
line-height: 20px;
padding-left: 30px;
border-left:none;
background:url('アイコンURL') no-repeat 0;
position: relative;
border-bottom: solid 5px #FFF0F5;
}

.entry-content h5{
color: #d17da7;
font-size:115%;
line-height: 20px;
margin-top:1em;
padding-left: 30px;
border-left:none;
background:url('アイコンURL') no-repeat 0;
position: relative;
}

CSSを書き換える時は使われているセレクタの書き方にも気を付けたほうがいいということですね。