賢威7の見出し(hタグ)の文字色・背景色の変更方法
今回は、賢威7(今回はスタンダード版を使用)の見出しの文字色と背景色の変更方法を解説します。
見出しのデザインを変更することでブログ全体の雰囲気も大きく変わりますので、ぜひ本記事を参考にしながらお試しください。
目次
見出し2(H2タグ)の文字色・背景色変更方法
文字色の変更
WordPress管理画面から「外観」>「テーマの編集」へと進み、「base.css」を開きます。
1118~1124行目に以下のコードがあり、こちらが見出し2を示す部分なので探してみてください。
|
1 2 3 4 5 6 7 |
.main-body h2{ margin: 60px 0 30px; padding: 10px 18px; background: #909090; color: #fff; font-size: 1.75em; } |
マーカーを引いた部分が見出し2の文字色を示しています。文字色を変更する際はこちらのカラーコードを変更してください。
ちなみに見出し2の文字色を変更した際の一例はこちらです。
背景色の変更
先ほどの見出し2を示すコードをもう一度見ます。
|
1 2 3 4 5 6 7 |
.main-body h2{ margin: 60px 0 30px; padding: 10px 18px; background: #909090; color: #fff; font-size: 1.75em; } |
マーカーを引いた部分が見出し2の背景色に当たります。背景色を変更する際はこちらのカラーコードを変更してください。
ちなみに見出し2の背景色を変更した際の一例はこちらです。
最後に「ファイルを更新」をクリックすれば完了です。
見出し3(H3タグ)の文字色・背景色変更方法
文字色の変更
WordPress管理画面から「外観」>「テーマの編集」へと進み、「base.css」を開きます。
1126~1132行目に以下のコードがあり、こちらが見出し3を示す部分なので探してみてください。
|
1 2 3 4 5 6 7 |
.main-body h3{ margin: 60px 0 30px; padding: 0 0 10px; border-bottom: 1px solid #909090; font-weight: bold; font-size: 1.5em; } |
見出し3の文字色を変更する際は以下のコードを加える必要があります。カラーコードはお好きなものに変更してください。
|
1 |
color: #950000; |
ちなみに追加後は以下のようなコードになります。マーカーを引いた部分が追加したコードです。
|
1 2 3 4 5 6 7 8 |
.main-body h3{ margin: 60px 0 30px; padding: 0 0 10px; border-bottom: 1px solid #909090; font-weight: bold; color: #950000; font-size: 1.5em; } |
変更後は以下のようになります。
背景色の変更
先ほどの見出し3を示すコードをもう一度見ます。
|
1 2 3 4 5 6 7 |
.main-body h3{ margin: 60px 0 30px; padding: 0 0 10px; border-bottom: 1px solid #909090; font-weight: bold; font-size: 1.5em; } |
見出し3の背景色を変更する際は以下のコードを加える必要があります。カラーコードはお好きなものに変更してください。
|
1 |
background: #950000; |
ちなみに追加後は以下のようなコードになります。マーカーを引いた部分が追加したコードです。
|
1 2 3 4 5 6 7 8 |
.main-body h3{ margin: 60px 0 30px; padding: 0 0 10px; border-bottom: 1px solid #909090; font-weight: bold; background: #950000; font-size: 1.5em; } |
変更後は以下のようになります。
最後に「ファイルを更新」をクリックすれば完了です。
見出し4(H4タグ)の文字色・背景色変更方法
文字色の変更
WordPress管理画面から「外観」>「テーマの編集」へと進み、「base.css」を開きます。
1134~1140行目に下記のコードがあり、こちらが見出し4を示す部分なので探してみてください。
|
1 2 3 4 5 6 7 |
.main-body h4{ margin: 55px 0 25px; padding: 0 0 4px; border-bottom: 1px dashed #909090; font-weight: bold; font-size: 1.25em; } |
見出し4の文字色を変更する際は以下のコードを加える必要があります。カラーコードはお好きなものに変更してください。
|
1 |
color: #950000; |
ちなみに追加後は以下のようなコードになります。マーカーを引いた部分が追加したコードです。
|
1 2 3 4 5 6 7 8 |
.main-body h4{ margin: 55px 0 25px; padding: 0 0 4px; border-bottom: 1px dashed #909090; font-weight: bold; color: #950000; font-size: 1.25em; } |
変更後は以下のようになります。
背景色の変更
先ほどの見出し4を示すコードをもう一度見ます。
|
1 2 3 4 5 6 7 |
.main-body h4{ margin: 55px 0 25px; padding: 0 0 4px; border-bottom: 1px dashed #909090; font-weight: bold; font-size: 1.25em; } |
見出し4の背景色を変更する際は以下のコードを加える必要があります。カラーコードはお好きなものに変更してください。
|
1 |
background: #950000; |
ちなみに追加後は以下のようなコードになります。マーカーを引いた部分が追加したコードです。
|
1 2 3 4 5 6 7 8 |
.main-body h4{ margin: 55px 0 25px; padding: 0 0 4px; border-bottom: 1px dashed #909090; font-weight: bold; background: #950000; font-size: 1.25em; } |
変更後は以下のようになります。
最後に「ファイルを更新」をクリックすれば完了です。
見出し5(H5タグ)の文字色・背景色変更方法
文字色の変更
WordPress管理画面から「外観」>「テーマの編集」へと進み、「base.css」を開きます。
1142~1148行目に下記のコードがあり、こちらが見出し5を示す部分なので探してみてください。
|
1 2 3 4 5 6 7 |
.main-body h5{ margin: 55px 0 25px; padding: 0 0 0 9px; border-left: 6px solid #909090; font-weight: bold; font-size: 1.2em; } |
見出し5の文字色を変更する際は以下のコードを加える必要があります。カラーコードはお好きなものに変更してください。
|
1 |
color: #950000; |
ちなみに追加後は以下のようなコードになります。マーカーを引いた部分が追加したコードです。
|
1 2 3 4 5 6 7 8 |
.main-body h5{ margin: 55px 0 25px; padding: 0 0 0 9px; border-left: 6px solid #909090; font-weight: bold; color: #950000; font-size: 1.2em; } |
変更後は以下のようになります。
背景色の変更
先ほどの見出し5を示すコードをもう一度見ます。
|
1 2 3 4 5 6 7 |
.main-body h5{ margin: 55px 0 25px; padding: 0 0 0 9px; border-left: 6px solid #909090; font-weight: bold; font-size: 1.2em; } |
見出し5の背景色を変更する際は以下のコードを加える必要があります。カラーコードはお好きなものに変更してください。
|
1 |
background: #950000; |
ちなみに追加後は以下のようなコードになります。マーカーを引いた部分が追加したコードです。
|
1 2 3 4 5 6 7 8 |
.main-body h5{ margin: 55px 0 25px; padding: 0 0 0 9px; border-left: 6px solid #909090; font-weight: bold; background: #950000; font-size: 1.2em; } |
変更後は以下のようになります。
最後に「ファイルを更新」をクリックすれば完了です。
最後に
賢威7の見出しの文字色と背景色の変更方法は以上です。
あわせて読みたい記事一覧
タグ:賢威








