賢威6.1でフッター部分のリンク色、背景色、見出しをカスタムする方法

賢威6.1のフッター部分ですが、リンク色や背景色など別で設定されており、
全体の設定とは別で設定する必要がありますので、説明していこうと思います。haikeiiii

 

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

wt0001129

それでは、フッター部分のカスタム方法のついて説明していきます。
フッターの設定については、スタートアップガイドで解説していますので、
そちらを参考にしてください。

賢威6.0のフッターの設定方法

1.外観からテーマ編集を開き「design.css」を開きます。

wt0001125

 

2.ソースが表示されますので中央よりやや下にある「フッター」項目を探してください。

wt0001126

 

3.下記ソースの#○○○部分を変更することで、リンク色が変更できます。

#footer a:link,
#footer a:visited{ color: #00b2d5; } ←通常のリンク色
#footer a:hover,
#footer a:active{ color: #6f8d0d; } ←マウスを置いたときのリンク色

 

見出し背景色を変更する方法

wt0001135

次に、見出しの背景色を変更する方法を説明して行きます。

1.同じくテーマ編集を開き「design.css」を開きます。

screenshot_09

 

2.フッターには二箇所の見出しがあり、
左側「アドレス部」と右側の「メニュー部」に分かれています。

下記ソースを参考に赤字の部分を変更してください。

#footer h3{
    margin-bottom: 1em;
    padding: 0.5em 1em;
    background-color: #fff; ←メニュー部の見出し背景
    color: #333;
    font-weight: bold;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
}

#footer .area01 h3{ background-color: #ccc; }←アドレス部の見出し背景

 

フッターの背景色を変更する

haikei

次にフッターの背景色を変更する方法を説明して行きます。
フッターの背景は、賢威のテンプレートメーカーでも変更可能でしたが、
設定後もテーマ編集から変更することが可能です。

1.同じくテーマ編集を開き「design.css」を開きます。

wt0001131

 

2.下記ソースの赤字の部分を変更してください。
(テンプレートメーカーでの設定によって違います。)

#footer{
    clear: both;
    padding-top: 30px;
    padding-bottom: 10px;
    background: #eeeeee; /*フッター全体の背景色を指定*/
    font-size: 1.2em;
}

 

「▲このページの先頭へ」のカラーを変更する

wt0001139

最後に、必ず右下に表示されている「▲このページの先頭へ」の
カラーの変更方法をご紹介します。

1.同じくテーマ編集を開き「design.css」を開きます。
/*——————————————————–
ページトップ
——————————————————–*/の部分を表示させます。

wt0001137

 

2.#bcd764と#59493fの二箇所を変更します。
#bcd764の部分が通常時で、#59493fの部分がマウスを当てたときのカラー色です。

 

以上

賢威6.1 フッター部分のリンク色、背景色、見出しをカスタムする方法でした。

コメントを残す

サブコンテンツ

このページの先頭へ