賢威フッター（ページ下部）の文字の色・サイズ・背景を変える

賢威テンプレートで作ったサイトのページ下部（フッター）

の文字の色やサイズ・背景を変える方法をご紹介します。

 

フッターのデザインは、『design.css』で変更します。

画像のみ『賢威の設定』で変更します。

 

フッターはこの部分です。

 

 

 

フッターの文字の色を変える

 

ますはフッターの文字の色を変えてみましょう。

 

WordPress管理画面＞外観＞テーマ編集をクリックします。

 

 

 

右のメニューから「design.css」をクリックします。下の方です。

 

 

 

フッターの文字の色はそれぞれ別の箇所を変更する必要があります。

４箇所あります。

 

 

 

「design.css」編集画面の真ん中より少し下に

/*--------------------------------------------------------
フッター
--------------------------------------------------------*/

と、あります。ここで全て変更できます。

 

 

 

コピーライトの部分はさらに下、少し離れたところにあります。

 

ここはサイト全体の文字色と同じ色です。

ですから通常はサイト全体の文字色を変更する箇所で変更します。

「design.css」の「サイト全体の共通設定」のところです。

 

全体の文字色にあわせず、ここだけを変更したい場合は

文字の色を指定する行を追加します。

 

 

 

それぞれ次のように変更しました。

①フッターの文字　　　白（#fff）→赤（#FF0000）

②未訪問のリンクの文字　　白（#fff）→黄緑（#00FF00）

③マウスをのせたときのリンクの文字　　オレンジ（#f60）→黄色（#FFFF00）

④コピーライトの文字　　黒（#333）→青（#7868EE）

 

記述を変更したら一番下の「ファイルを更新する」をクリックします。

以下も同様に、記述を変更した場合はファイルを更新します。

 

こんな感じになります。

 

 

 

 文字の大きさを変える

 

次は、文字のサイズを変更します。

文字のサイズは2箇所にわかれています。

 

「アドレス」「メニュー」の文字がやや大きいように見えますが

太字になっているだけでサイズは他と同じです。

 

 

 

記述を変更する場所は「design.css」です。

文字色を変更したところと同じです。

 

フッター全体は「フッター」で変えます。

 

 

 

コピーライトの部分は「コピーライト」で変えます。

 

 

1.2emの数字を変更してください。

 

 

 

フッターの背景色を変える

 

フッターの背景色も文字色、文字サイズを変更した

ところと同じです。

 

背景色は3箇所にわかれています。

①全体の濃いグレーの部分

②見出しの白抜きの部分

③コピーライトの薄いグレー

の3つです。

 

 

 

①②は「design.css」の「フッター」で変更します。

 

 

 

③は「コピーライト」で変更します。

 

 

それぞれ以下のように変えてみました。

①フッター全体の背景色　　　濃いグレー（#959595）→水色（#009fe8）

②見出しの背景色　　白（#fff）→薄い水色（#c1ebff）

③コピーライトの背景色　　薄いグレー（#eaeaea）→薄紫（#D8BFD8）

 

こんな風になりました。

 

 

 

 

フッターの画像を変える

 

最後にフッターの画像を変えてみましょう。

SAMPLEと書いているビルの画像です。

 

 

 

WordPress管理画面＞賢威の設定＞フッターをクリックします。

 

 

 

フッターの設定画面にかわりますので

「フッター画像」の「画像を変更」横の歯車のマークをクリックします。

 

 

 

パソコンの中にある画像の場合は

フォルダから直接画像をドラッグ&ドロップします。

 

 

 

メディアライブラリにすでに保存している画像の場合は

画面の上の「メディアライブラリ」をクリックして該当する画像を選びます。

 

画像を選んだら配置やサイズを選択して「投稿に挿入」をクリックします。

 

 

フッターの設定画面に戻ります。

「フッター画像」のビルの画像はそのままですが、

リンク先のURLは変更されています。

 

変更できていたら「変更を保存」をクリックします。

 

 

 

こんな風に変わりました。

これはGIF画像なのでUFOの部分だけが表示されています。

 

 

アドレスがUFOになってしまっていますが

この画像にとくに深い意味はありません。