[対応:5]クール版の背景色を変える方法

賢威5のテンプレートのクール版の背景色の変更方法いついてご説明します。

賢威背景設定

背景色の変更には多くの画像の編集が必要になってきます。
まずはどの場所が賢威テンプレートの画像部分かを説明します。

FFFTPなどを使って階層を確認しておきます。

賢威背景設定

/レンタルサーバーの階層(wwwなど)/wp-content/themes/wp/images

このimagesにテンプレートの全ての画像が入ってます。

images
┣common 装飾全般の画像
┣icon アイコン画像
┣icon-big 予備のアイコン画像
┣other ブックマークアイコン
┗title         見出し画像

主にテンプレートの装飾関連は、commonとtitleフォルダになります。
最初のうちはわかりやすくするために、
imagesフォルダごとダウンロードしておくとと良いです。

ヘッダー部分の背景色の変更方法について説明します。

まずはヘッダー部分の背景変更からご説明します。

まずはWordPressダッショボード⇒外観⇒テーマ編集から
スタイルシートのcool-browng○.cssをクリックします。

スタイルシートのヘッダー項目までスクロールします。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    position: absolute;
    top: 30px;
    height: 78px;
    background: url(images/common/bg-header.gif) left top repeat-x #222222;
    font-size: 1.2em;
    color: #fff;
}

 

background: url(images/common/bg-header.gif) left top repeat-x #222222;

↑の部分がヘッダの背景制御部分になります。

次に、イメージが画像を確認します。
commonフォルダからbg-header.gifを探します。

賢威背景設定

細くてイメージ出来ませんが、↑の画像がヘッダー部分の画像です。

※賢威もそうですが、webサイトでは、
1つの画像を繰り返しリピートさせて表現する方法があります。

この画像を画像加工ソフトで作り替えます。

賢威背景設定

変更するのは色だけで、
必ず同じサイズで加工してください。

今回は「bg-header2.gif」として保存しました。

画像が完成しましたら、
同じcommonフォルダ内にアップロードします。

次にスタイルシートの部分をアップロードした名前で書き換えます。

background: url(images/common/bg-header2.gif) left top repeat-x #222222;

 

賢威背景設定

これでとりあえず背景色が変更されました。

ここで色々と色が合わなくなる場合があるので、
必要に応じてヘッダーの文字色の変更も必要になると思います。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    position: absolute;
    top: 30px;
    height: 78px;
    background: url(images/common/bg-header2.gif) left top repeat-x #222222;
    font-size: 1.2em;
   
color: #fff;
}

/*●ヘッダーロゴテキスト*/
#header-logo #logo-text{ font-size: 20pt; }
#header-logo #logo-text a{ text-decoration: underline; }
#header-logo #logo-text a:link{ color: #fff; }
#header-logo #logo-text a:visited{ color: #fff; }
#header-logo #logo-text a:hover{ color: #c60; }
#header-logo #logo-text a:active{ color: #c60; }

#fffの部分の色を変更してください。

色見本はこちらを参考
http://www.colordic.org/

ヘッダーのタイトル画像の変更方法はこちらを参考にしてください⇒http://kasegoo.info/keni/83/

 

賢威背景設定

とりあえずこんな感じでヘッダー部分は完成です。

 

コンテンツ部分の背景色変更方法

次にコンテンツ部分の背景色の変更方法を説明します。

同じcool-browng○.cssのコンテンツ全体部分までスクロールしてください。

/*——————————————————–
コンテンツ全体
——————————————————–*/

#main-image{
    position: absolute;
    top: 146px;/*最上部からの高さの指定*/
    background: url(images/common/bg-topimage.gif) center top repeat #111;
    border-bottom: 1px solid #000;
}

#main{
    padding-top: 336px;/*▲ページ最上部からの距離*/
   background: url(images/common/bg.jpg) repeat #020202;
    border-top: 1px solid #444;
}

background: url(../images/common/bg.jpg) repeat #020202;の部分が

↑の部分がコンテンツ部分の背景制御部分になります。

ヘッダーで説明したのと同じように、bg.jpgを探します

賢威背景設定

この画像を修正して変更したい色に変えます。
これも同じサイズで作成します。

賢威背景設定

今回はbg2.jpgで作成しました。
画像が完成しましたら、同じcommonフォルダ内にアップロードして、
cool-browng○.cssを書き換えます。

background: url(../images/common/bg2.jpg) repeat #020202;

これで保存します。

賢威背景設定

これでとりあえず背景画像の色は変わりました。

次に細かい設定に入っていきます。

■パン屑部分のフォント色調整

賢威背景設定

パン屑ナビの部分を調整します。

/*——————————————————–
パン屑ナビ
——————————————————–*/

#breadcrumbs{
    position: absolute;
    top: 306px;/*▲ページ最上部からの距離*/
    left: 0;
}

#breadcrumbs li{
    float: left;
    padding: 0 10px 0 15px;
    background: url(images/icon/icon-breadcrumbs.gif) left 5px no-repeat;
    font-size: 1.2em;
    color: #fff;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
中略
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#breadcrumbs li a:link,
#breadcrumbs li a:visited{ color: #fff; }

#breadcrumbs li a:active,
#breadcrumbs li a:hover{ color: #cc6600; }

#fffがフォントカラーになりますので好きな色に変更します。

■角丸部分の調整

賢威背景設定

賢威は見出しが角丸になっている画像を使っており、
画像の端と背景色が丁度同じ色で表現されています。

背景色だけを変えると、↑の画像のように背景とのズレが生まれますので
見出し画像の修正を行う必要があります。

画像の場所は、

①bg-sidebar-top.gif
③btn-pagetop_off.gif
④btn-pagetop_on.gif
は、commonフォルダ内にあります。

②bg-contents-h2.gif
は、titleフォルダ内にあります。

各画像を下記のように修正して、アップロードします。

賢威背景設定

※①~④の画像については、
名前を変更せず同じファイル名として上書き保存してください。

名前を変えるとうまく機能しない可能性があります。

 

少し作業量が多いですが、
これで背景色の変更方法は完成です。

賢威背景設定

以上
賢威カスタマイズ クール版の背景色を変える方法でした。

2 Responses to “[対応:5]クール版の背景色を変える方法”

  1. 日比野心也 より:

    初めまして、日比野と申します。
    実は賢威の編集ができず、マメボーwさんのようなサイトがないかを調べていたところです。いや~ほんとに参考になります。
    それで、賢威5.0(クール)でXサーバを使用しています。使い始めたばかりなんです。トップのイメージを変えるため、フォトショップで加工(勿論サイズや解像度は同じです)し、賢威テンプレートのイメージのtop-image.jpgを同じ名称で入れ換えたのですが、反映されてません。このtop-image.jpgだけを入れ替えてもダメなのでしょうか?FFFTPからの方法がいまいち解らないのです。すみません、教えていただけないでしょうか。
    初めての投稿なのに図々しくて恐縮です。

    • マメボーw より:

      日比野さん
      お世話になってます。
      基本的にですが、画像を入れ替えると反映されます。
      ブラウザーの問題かもしれませんので、F5などを教えて更新してみてはどうでしょうか?
      どうぞ宜しくお願いします。

コメントを残す

サブコンテンツ

このページの先頭へ