賢威7のフッターの文字サイズ・文字色・背景色変更方法
今回は賢威7のフッター部分の文字の大きさ、文字色、背景色の変更方法を解説します。
フッターの文字サイズ変更方法
WordPress管理画面から「外観 > テーマの編集」へと進み、「base.css」を開きます。
以下のコードがある部分(「賢威7スタンダード版」の場合1022行目)を探します。ちなみにこちらがフッターの文字を示す部分です。
|
1 2 3 4 |
.site-footer{ background: #8f8f8f; color: #fff; } |
文字サイズを変更する際は以下のマーカーを引いたコードを追加します。(サイズは数値を変更することで調整可能です。)
|
1 2 3 4 5 |
.site-footer{ background: #8f8f8f; color: #fff; font-size: 2em; } |
すると、以下のように変更されます。
しかし、これだとコピーライトの部分まで文字サイズが変更されてしまいます。もしコピーライトの文字サイズを変更したい場合は以下のコードを探し、マーカーを引いた部分の数値をお好みのサイズに変更します。
|
1 2 3 |
.copyright small{ font-size: 100%; } |
例えば以下のように変更してみます。
|
1 2 3 |
.copyright small{ font-size: 50%; } |
すると、以下のようにコピーライトの文字サイズが変更されました。
フッター部分の文字サイズの変更方法は以上です。
フッターの文字色・背景色変更方法
フッターのデフォルトの状態はこちらです。
では、こちらの文字色・背景色を変更します。
先程お見せしたフッターのフォントデザインを示すコードをもう一度見ます。
|
1 2 3 4 |
.site-footer{ background: #8f8f8f; color: #fff; } |
文字色を変更したい場合は3行目のカラーコードを、背景色を変更したい場合は2行目のカラーコードを変更します。
それぞれ以下のように変更してみると…(ちなみに文字色は黒、背景色は緑にしました)
|
1 2 3 4 |
.site-footer{ background: #049336; color: #333; } |
このようにしっかり反映されましたね。
最後に
今回はフッター部分の文字の大きさ・文字色・背景色の変更方法を解説しました。
あわせて読みたい記事一覧
タグ:賢威





