[対応: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フォルダ内にあります。
各画像を下記のように修正して、アップロードします。
※①~④の画像については、
名前を変更せず同じファイル名として上書き保存してください。
名前を変えるとうまく機能しない可能性があります。
少し作業量が多いですが、
これで背景色の変更方法は完成です。
以上
賢威カスタマイズ クール版の背景色を変える方法でした。
初めまして、日比野と申します。
実は賢威の編集ができず、マメボーwさんのようなサイトがないかを調べていたところです。いや~ほんとに参考になります。
それで、賢威5.0(クール)でXサーバを使用しています。使い始めたばかりなんです。トップのイメージを変えるため、フォトショップで加工(勿論サイズや解像度は同じです)し、賢威テンプレートのイメージのtop-image.jpgを同じ名称で入れ換えたのですが、反映されてません。このtop-image.jpgだけを入れ替えてもダメなのでしょうか?FFFTPからの方法がいまいち解らないのです。すみません、教えていただけないでしょうか。
初めての投稿なのに図々しくて恐縮です。
日比野さん
お世話になってます。
基本的にですが、画像を入れ替えると反映されます。
ブラウザーの問題かもしれませんので、F5などを教えて更新してみてはどうでしょうか?
どうぞ宜しくお願いします。