賢威フッターの背景・見出し・文字色のデザイン変更方法
WordPressテーマ賢威のフッター領域の「背景色・文字色・見出しの背景色・見出しの文字色」のデザイン変更方法を紹介します。
例として、デザイン変更の前の状態は以下のようなフッターの状態だったとして説明していきます。
- フッター領域の背景色：灰色
- フッター領域の文字色：白
- 見出しの背景色：白
- 見出しの文字色：黒
今回のデザイン変更は「design.css」を編集していきます。
初心者の方は少し抵抗があるかもしれませんが、順番に作業していけばそれほど難しくないので、記事を確認してやってみてください。
賢威フッターの背景色と文字色のデザイン変更方法
WordPressのダッシュボード
「外観」→「テーマエディター」をクリックします。
「design.css」をクリック。
「design.css」内にある以下のコードを探します。
以下の9行目で「フッターの背景色」を指定し、10行目で「フッターの文字色」を指定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*-------------------------------------------------------- フッター --------------------------------------------------------*/ #footer{ clear: both; padding-top: 30px; padding-bottom: 10px; background: #959595; /*フッター全体の背景色を指定*/ color: #fff; font-size: 1.2em; } |
今回は、背景色を「#959595」→「#90EE90(lightgreen)」、文字色を「#fff」→「#FF0000(red)」へ変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*-------------------------------------------------------- フッター --------------------------------------------------------*/ #footer{ clear: both; padding-top: 30px; padding-bottom: 10px; background: #90EE90; /*フッター全体の背景色を指定*/ color: #FF0000; font-size: 1.2em; } |
編集したら【ファイルを更新】をクリックします。
これで、以下のようにフッター領域の背景色と文字色が変更されます。
賢威フッターの見出し背景色と文字色のデザイン変更方法
次にフッター部分の見出しデザインの変更方法を紹介します。
先程と同様に「design.css」の編集になります。
フッターの見出し部分のデザイン指定は「design.css」内の以下の部分で設定されています。(先程の背景色指定コードの少し下にあります)
|
1 2 3 4 5 6 7 |
#footer h3{ margin-bottom: 1em; padding: 0.8em; background-color: #fff; color: #333; font-weight: bold; } |
今回は、見出しの背景色を「#fff」→「#00FFFF(aqua)」、見出しの文字色を「#333」→「#EE82EE(violet)」へ変更します。
|
1 2 3 4 5 6 7 |
#footer h3{ margin-bottom: 1em; padding: 0.8em; background-color: #00FFFF; color: #EE82EE; font-weight: bold; } |
編集したら【ファイルを更新】をクリックします。
これで、以下のようにフッターの見出し背景色と文字色が変更されます。
我ながらかなり色彩センスのない配色ですね。。。^^;
以上、賢威のフッター領域のデザイン変更方法を紹介しました。
この記事を参考にオリジナルのフッターデザインにカスタマイズしてみてください。
→賢威フッターメニューをサイドバーのようにウィジェット化する方法！
→賢威サイドバーのカスタマイズ方法！見出し・幅・枠・背景色など！
記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。
↓↓↓メルマガ登録は下のフォームから↓↓
無料メールマガジン登録フォーム
最近のコメント