どうも、ケイジです!
今回は賢威7でフッターの背景色と文字色を変更する方法を説明していきたいと思います。

フッターの背景色は若干濃い色に多くのサイトが設定している

賢威7でフッターの背景色と文字色を変更する方法メイン

フッターの背景色は若干濃い色に設定されているサイトがけっこう多かったりします。これは、メインコンテンツ部分が白、もしくは薄い色を使っているタイプが多いからなんですね。フッターの背景色を濃くすることでメインコンテンツ部分との境界線を上手く演出することができるためです。

 

訪問者も一目でここまでがメインコンテンツでここからがフッターだなと瞬時に理解できるのです。逆にメインコンテンツ部分の背景色を濃い色に設定している場合は、フッター部分は薄くするのが見た目も引き締まるしはっきり境界線を作れるのではないでしょうか。

 

当サイトではメインコンテンツ部分は白い背景色を使っております。そのため、特に変更はかけることはしませんが変更を施したい人は必ずいると思いますのでこれから賢威7でフッターの背景色と文字色を変更する方法を説明していきたいと思います。

 

賢威7でフッターの背景色と文字色を変更する方法

ダッシュボード→外観→テーマ編集→base.css

賢威7でフッターの背景色と文字色を変更する方法1

賢威7でフッターの背景色と文字色を変更するには、ダッシュボード→外観→テーマ編集→base.css内の指定しているカラーコードの変更が必要になってきます。

 

フッターという部分を探すと上記画像のような箇所があると思います。この中で上記画像の上の赤枠部分がフッター背景色、下の赤枠部分がフッター文字色となっています。

 

※フッター文字色とはリンクが張られていない文字のことを指します。

 

こちらをそれぞれ変更することでフッターの背景色や文字色は変更できます。ただ、フッター部分にはおそらく固定ページのリンクやカテゴリリンクなどを貼ることが断然多いことと思います。下記記事でフッターのリンク文字色とマウスオーバー時リンク色の設定も同時に行い、バランスを取ってカスタマイズすることをおすすめします。

賢威7のフッターリンク色とマウスオーバー時リンク色変更方法

賢威7で背景色を変更する方法

 

 

まとめ

フッターの背景色は特に、サイト全体の背景色との色合いのバランスが非常に重要になってきます。サイト全体の背景色とうまくバランスを取り、メインコンテンツ部分とフッター部分の境界線をはっきりさせる。さらに、サイト全体にも言えることですが背景色と文字色のバランス、背景色とリンク色とマウスオーバー時のリンク色のバランスを取ることが綺麗なサイトにできるコツとなります。

 

賢威7カスタマイズ一覧まとめ記事へ