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


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

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

解説するために少し変更を加えていますが、概ね上の画像のようなレイアウトになっています。

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

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

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

まずは背景色です。

賢威のフッター領域の背景色を変更するには、次の箇所を探します。

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

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

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

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

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

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

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

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

続いて見出しの色です。

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

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

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

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

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

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

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

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

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

最後にフッター領域の文字の色です。

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

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

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

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

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

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

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

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

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

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

賢威背景見出し文字リンクの色変更画像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です。

次ページ

12次

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

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

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

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

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

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

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ