賢威7のサイドバー見出しの文字サイズ・文字色・背景色変更方法
今回は賢威7のサイドバーにある見出しの文字の大きさ、文字色、背景色の変更方法を解説します。
サイドバー見出しの文字サイズ変更方法
WordPress管理画面から「外観 > テーマの編集」へと進み、「base.css」を開きます。
以下のコードがある部分（「賢威7スタンダード版」の場合1215行目）を探します。ちなみにこちらがサイドバーの見出しデザインを示しています。
|
1 2 3 4 5 6 7 8 |
.sub-conts .section-wrap .section-in .section-title, .sub-conts .section-wrap .article-header .section-title{ margin: 0 -20px 30px; padding: 0 0 11px; border-bottom: 1px solid #ccc; font-weight: normal; font-size: 1.125em; } |
マーカーを引いた箇所が文字サイズを示す部分なので、こちらの数値をお好きな文字サイズになるよう変更します。
例えば以下の様なコードに変更すると…
|
1 2 3 4 5 6 7 8 |
.sub-conts .section-wrap .section-in .section-title, .sub-conts .section-wrap .article-header .section-title{ margin: 0 -20px 30px; padding: 0 0 11px; border-bottom: 1px solid #ccc; font-weight: normal; font-size: 2.125em; } |
このようになります。
サイドバー見出しの文字色・背景色変更方法
先ほどお見せしたサイドバーの見出しデザインを示すコードをもう一度見ます。
|
1 2 3 4 5 6 7 8 |
.sub-conts .section-wrap .section-in .section-title, .sub-conts .section-wrap .article-header .section-title{ margin: 0 -20px 30px; padding: 0 0 11px; border-bottom: 1px solid #ccc; font-weight: normal; font-size: 1.125em; } |
サイドバー見出しの文字色の変更
サイドバー見出しの文字色を変更したい場合は上記コードに以下のコードを追加します。（カラーコードはお好きなものをお選びください。）
|
1 |
color: #049336; |
追加後は以下の様なコードになります。
|
1 2 3 4 5 6 7 8 9 |
.sub-conts .section-wrap .section-in .section-title, .sub-conts .section-wrap .article-header .section-title{ margin: 0 -20px 30px; padding: 0 0 11px; border-bottom: 1px solid #ccc; color: #049336; font-weight: normal; font-size: 1.125em; } |
サイドバー見出し部分を確認してみると…
文字色が変更されましたね。
サイドバー見出しの背景色の変更
サイドバー見出しの背景色を変更したい場合は上記コードに以下のコードを追加します。（カラーコードはお好きなものをお選びください。）
|
1 |
background: #049336; |
追加後は以下の様なコードになります。
|
1 2 3 4 5 6 7 8 9 |
.sub-conts .section-wrap .section-in .section-title, .sub-conts .section-wrap .article-header .section-title{ margin: 0 -20px 30px; padding: 0 0 11px; border-bottom: 1px solid #ccc; background: #049336; font-weight: normal; font-size: 1.125em; } |
サイドバー見出し部分を確認してみると…
背景色が変更されましたね。
まとめ
今回は賢威7のサイドバー見出しの文字サイズ、文字色、背景色の変更方法を解説しました。ぜひ参考にしてみてください。
タグ：賢威