賢威のフッターの背景・見出し・文字・リンクの色を変更するカスタマイズ方法


賢威のフッター領域はこの様になっています。

<賢威7>賢威7 フッター領域

<賢威6.2>賢威背景見出し文字リンクの色変更画像1

解説するために少し変更を加えていますが、上の画像のようなレイアウトに設定する方法は、こちらの記事で解説しています。

賢威のフッターにあるアドレスエリアとメニューをカスタマイズする方法

今回は、賢威7と賢威6.2でフッター領域の背景・見出し・文字・リンクの色を変更するためのカスタマイズ方法について解説します。

賢威7でフッター領域の背景色を変更する方法

賢威7でフッターの背景色を変更するには、

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順にクリックし、base.cssの中から以下のコードを探します。

賢威7 base.css フッター-1

.site-footer{
background: #8f8f8f;
color: #fff;
}

このコードの中にある『background: #8f8f8f;』の部分が、背景色を指定するCSSコードです。

上のコードの『#8f8f8f』部分となっている部分を、好みのカラーコードに変更することで、背景色を変更することができます。

カラーコードは「原色大辞典」を参考にします。

今回は、例として水色(#87ceeb)のカラーコードを入力します。

コードを書き加えると以下のようになります。

賢威7 フッター 背景色

フッターの背景色は、以下のように指定した背景色に変わります。

賢威7 フッター 背景色 変更

フッターの背景色の変更は、これで完了です。

賢威7でフッターメニューのリンクの色を変更する方法

フッターメニューのリンクの色を変更するには、先と同様に、

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順にクリックし、base.cssの中から以下のコードを探します。

賢威7 フッター リンク

.site-footer-in a:hover,
.site-footer-in a:active,
.site-footer-in a:focus{
color: #f60;
}

上記コードでは、『hover』『active』『focus』の3つが、まとめてオレンジ色(#f60)に指定されています。

・『hover』は、マウスの矢印をリンクの上にのせた状態を指します。

・『active』は、リンク先に飛んでいる時の状態を指します。

・『focus』は、入力フォームなどにカーソルを合わせた(クリック)した時の状態を指します。

今回は、リンクの色を変更しますので、『focus』以外をそれぞれで色の指定をします。

それぞれで色を指定するには、以下のように{}とカラーコードを付け加えます。

.site-footer-in a:hover{color: #00f;}
.site-footer-in a:active{color: #f00;}
.site-footer-in a:focus{color: #f60;}

今回は例として、『hover』は青色(#00f)に、『active』は赤色(#f00)に設定しますが、先とどうようにカラーコードは「原色大辞典」を参考に、好みの色に設定できます。

コードを書き加えると、以下のようになります。

賢威7 フッター リンク色

リンクにマウスの矢印をのせた時は青色なり、リンクをクリックすると赤色になります。

賢威7 フッター リンク色 変更

これでリンクの色を変更することができました。

賢威6.2でフッター領域の背景色を変更する方法

まずは背景色です。

賢威のフッター領域の背景色を変更するには、

ワードプレスのダッシュボード→外観→テーマの編集→design.cssのページまで行って下さい。

以下の箇所を探します。

賢威背景見出し文字リンクの色変更画像2

画像の青い部分にある色のコードを変更します。画像にもありますが、ここが フッター領域の背景色を指定しているところです。

カラーコードは「原色大辞典」を参考にします。

今回は例として、「#87cefa」という色にします。

変更できたら保存してトップページに戻って確認します。

賢威背景見出し文字リンクの色変更画像3

この様になっていればOKです。

賢威6.2のフッター領域の見出しの色を変更する方法

次に見出しの色です。

フッターの見出しの色を変更するには、次の箇所を探します。

賢威背景見出し文字リンクの色変更画像4

フッターの見出しはh3タグになります。ここも同様にコードを変更します。

「background-color:」が見出しの背景色、その下の「color:」が見出しの文字の色を指定していますので、ここを変更します。

今回は例として、見出しの背景色(background-color:)を「#98fb98」、見出しの文字の色(color:)を「#f00」という色にします。

変更できたら保存してトップページに戻って確認します。

賢威背景見出し文字リンクの色変更画像5

この様になっていればOKです。

賢威6.2のフッター領域の文字の色を変更する方法

続いてフッター領域の文字の色です。

フッターの文字の色を変更するには、次の箇所を探します。

賢威背景見出し文字リンクの色変更画像6

最初に変更した背景色と同じ場所にコードがあります。

このうち「background:」の下にある「color:」のコードを変更することでフッター領域の文字の色が変更できます。

今回は例として、文字の色を「#000」という色にします。

変更できたら保存してトップページに戻って確認します。

賢威背景見出し文字リンクの色変更画像7

この様になっていればOKです。

賢威6.2のフッター領域のリンクの色を変更する方法

最後に、フッターのリンク先の色を変更する方法です。

賢威背景見出し文字リンクの色変更画像8

こちらはフッター領域内にリンク先がある場合に、そのリンクの色を変更できる箇所です。

「link」がリンク文字の色、「visited」がリンク先に飛んだ後のリンク文字の色、「hover」がマウスをリンク文字に乗せた時の色、「active」がリンク先に飛んでいる時の文字の色です。

抜き出してみると次のようになっています。

#footer a:link,
#footer a:visited{ color: #fff; }
#footer a:hover,
#footer a:active{ color: #f60; }

通常、このリンクに関わる色の指定は、「link」「visited」「hover」「active」それぞれ1つずつ色が指定されています。

しかし、賢威ではlinkとvisitedが「color: #fff;」、hoverとactiveが「color: #f60;」と、色がまとめて指定されています。

この賢威の設定のままで良ければ、{ }内の色のコードを変更すればOKです。

個別に色を変更したいときは、次のように1つ1つに色を指定すればOKです。

#footer a:link{ color: #00f; }
#footer a:visited{ color: #f60; }
#footer a:hover{ color: #f00; }
#footer a:active{ color: #f60; }

変更できたら保存してトップページに戻って確認します。

賢威背景見出し文字リンクの色変更画像9

この様になっていればOKです。

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

このページの先頭へ