見出しのカスタマイズ方法サイドバーにも反映されないようにする

 WordPressテーマに変更を加えたので記録　見出しをカスタマイズするとサイドバーまで変わったりしたので修正

bss.css内の見出しに関する元の箇所、

/*——————————————————–
見出し
——————————————————–*/

の箇所は、メインエリア内の見出しに対して共通で適用させるようなセレクタとなるので変更しないこと。

記事内のみやサイドバーのみの見出しに個別にカスタマイズするには、「base.css」最下部に追記する形で変更を加える。

bss.css最下部へ追記　適当に全部同じようなデザインで入力したサンプル

/*--------------------------------------------------------
見出しのカスタマイズ
--------------------------------------------------------*/

.main-conts .section-wrap .section-in h1 {
margin: 5px 0 30px;
padding: 10px 18px;
background:#3300CC;
color: #fff;
font-size: 1.75em;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.main-conts .section-wrap .section-in h2 {
margin: 5px 0 30px;
padding: 10px 18px;
background:#3300CC;
color: #fff;
font-size: 1.75em;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.main-conts .section-wrap .section-in h3 {
margin: 5px 0 30px;
padding: 10px 18px;
background:#3300CC;
color: #fff;
font-size: 1.75em;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.main-conts .section-wrap .section-in h4 {
margin: 5px 0 30px;
padding: 10px 18px;
background:#3300CC;
color: #fff;
font-size: 1.75em;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/*--------------------------------------------------------
サイドバーの見出しカスタマイズ
--------------------------------------------------------*/
.sub-conts .section-wrap .section-in h3.section-title {
margin: 5px 0 30px;
padding: 10px 18px;
background:#3300CC;
color: #fff;
font-size: 1.75em;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

内容はそれぞれデザインに合わせて入力する。

現在の見出し

/*--------------------------------------------------------
見出しのカスタマイズ
--------------------------------------------------------*/
.main-conts .section-wrap .section-in h1 {
margin: 0 0 1em;
padding: 0;
font-size: 2.125em;
font-weight: bold;
border-bottom: solid 4px #3300cc;
border-top: solid 4px #3300cc;
transform: rotate(-3deg);
}
.main-conts .section-wrap .section-in h2 {
margin: 5px 0 30px;
padding: 10px 18px;
background:#3300CC;
color: #fff;
font-size: 1.75em;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.main-conts .section-wrap .section-in h3 {
position: relative;
margin: 20 0 1.5em;
padding: 0.8em;
background: #3300CC;
color: #fff;
font-size: 1.8em;
font-weight: bold;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.main-conts .section-wrap .section-in h3:after{
position: absolute;
bottom: -15px;
left: 10%;
z-index: 90;
margin-left: -15px;
border-top: 15px solid #3300CC;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 0;
content: "";
}

.main-conts .section-wrap .section-in h4 {
position:relative;
margin: 60px 0 30px;
padding: 0 0 10px;
border-bottom: 7px solid #afafaf;
box-sizing: content-box;
font-weight: bold;
font-size: 1.8em;
}

.main-conts .section-wrap .section-in h4:after {
position: absolute;
z-index: 2;
left: 0;
bottom: -7px;
width: 33%;
height: 7px;
background-color:#3300CC;
content: '';
}


/*--------------------------------------------------------
サイドバーの見出し
--------------------------------------------------------*/
.sub-conts .section-wrap .section-in h3.section-title {
margin: 60px 0 30px;
padding: 0 0 10px;
border-bottom: 5px solid #3300CC;
font-weight: bold;
font-size: 1.5em;
}

transform: rotate(-3deg);は斜めにするためのCSS。

数字を変更することで調整出来る。

この記事は自分用のメモです。