賢威7の見出しの文字色・大きさ・背景色を変更する方法！

今回は賢7の見出しのカスタマイズ方法をご紹介します！

賢威7は6同様にいくつかのテンプレートの種類ががありますが、この賢威7カスタマイズ大図鑑では『クール版』のカスタマイズ方法をご紹介しています。

ですが、他のテンプレートも基本的なカスタマイズは同じなのでこちらを参考にしてみてください！

見出しのカスタマイズ方法

ダッシュボード⇒外観⇒base.cssからカスタマイズします。

見出しの文字色を変更する

以下の部分を探します。

.main-body h2{
margin: 60px 0 30px;
padding: 3px 18px;
background: #222;
color: #fff;
font-size: 1.75em;
}

デフォルトの状態では『#fff』と白色になっていますが、こちらを任意の色に変更してください。

見出しの背景色を変更する

見出しの背景色を変更するには『background』の部分の色を変更します。

.main-body h2{
margin: 60px 0 30px;
padding: 3px 18px;
background: #222;
color: #fff;
font-size: 1.75em;
}

見出しの文字の大きさを変更する

見出しの文字の大きさを変更するには、『font-size 』を調整します。少しずつ大きさを変えていきサイトに合ったサイズにしましょう。

.main-body h2{
margin: 60px 0 30px;
padding: 3px 18px;
background: #222;
color: #fff;
font-size: 1.75em;
}

H2もH3も同様にカスタマイズする部分は同じですが、H4だけ文字色を変更する時に『color:』が最初は記述されていないので。書き加えるようにしてください。

↓デフォルトの状態↓

.main-body h4{
margin: 55px 0 25px;
font-weight: bold;
font-size: 1.25em;
position: relative;
padding: .1em 0 .2em .75em;
border-left: 6px solid #222;
}

↓追記後↓

.main-body h4{
margin: 55px 0 25px;
font-weight: bold;
font-size: 1.25em;
position: relative;
padding: .1em 0 .2em .75em;
border-left: 6px solid #222;

color:

}

以上、賢威7の見出しのカスタマイズ方法でした。

最後までお読み頂きありがとうございます。

⇒賢威7カスタマイズ大図鑑へ戻る