賢威でWordPress~背景色を変更する

賢威5.0テンプレート」のクール版では、
背景が濃い目のグレーに設定されてます(ホワイトはのぞく)

このグレーの背景から、
自分好みの背景にごっそり変更する方法を解説します。

少々面倒な作業も含みますが、
これを使いこなせば、どんな背景も自在に作れます。


まずは、背景をつかさどる部分をざっくり確認して欲しいのですが、
大きく分けて、タイトル部分の背景色と、コンテンツ部分の背景色があります。

これを、それぞれ、統一した色にしてもいいし、
変化をつけてもいいのです。

例)両方とも白く統一させたサイトの一例

例)上下で背景を分けたサイトの一例

ヘッダー画像の背景色に合わせて、背景色も変更すると、
見栄えが良くなりますね。

まずは、今、アップロードしている賢威テンプレートのデータから、
背景やアイコンなどの画像をつかさどるフォルダをパソコンに取り込んでおきます。

もし、賢威テンプレートのデータがパソコンに残っているときは、
そこから使ってもいいですね。

この中の、「images」というフォルダに、
賢威テンプレートで使われている画像や背景が入っています。

このフォルダを開けると、以下のようにずらっとファイルやフォルダがあります。
その中から、まずは「common」というフォルダを選びます。

これは、すでに賢威テンプレートを設置している場合、
サーバーにも同じ情報(データ)がありますから、
ダウンロードしていきます。

「wp-content」⇒「themes」⇒「WP(賢威のテーマ名)」と選択します。

この中にある、「images」というフォルダを選択し、
右クリックでダウンロードします。

ここから、背景に必要なデータを書き換えていきます。
では、さっそくやっていきましょう。

ヘッダーの背景を変更する方法

ヘッダー部分の背景色を変更する方法から解説します。
ヘッダーの背景をつかさどるのは、「bg-header.gif」という画像です。

「images」⇒「common」というフォルダの中にあります。

この、えらく長細い画像が、ヘッダーの背景なんです。
こういう背景を、リピートさせているんですね。

これを、お手持ちの画像加工ソフトなどで塗っていきます。
図は、分かりやすく大きく別に書き起こしたもの。
上にちょこっとある模様を残して、あとの下の長い部分を塗ります。

※ 画像のサイズは勝手に変えないでくださいね。変えるのは色だけです。
このときに塗った色が、ヘッダーの背景色になります。
塗れたら、「bg-header2.gif」など、分かりやすい名前で保存しておきます。

この画像を、サーバーに戻してやればいいのですが、
方法は大きく2つあります。

  • ワードプレスのメディアアップロードからアップロードさせる
  • FTPソフトを使って直接元の「common」フォルダに戻す

どちらからでもできます。

ここで一度、管理画面から、「外観」⇒「テーマ編集」⇒「cool-blueg12.css」とすすみ、
画像をアップした後で書き換えるソースを確認しておきましょう。

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

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

この、太赤字の部分。
ここを書き換えていくわけです。

images/common/bg-header.gifとは、
imagesフォルダの中にある「common」フォルダの中の「bg-header.gif
という名前の画像を背景に使いますよ、という意味です。

これを、「指定したURL」や「指定した画像」に書き換えるんですね。

メディアアップロードから書き換える場合

まずはメディアアップロードを使い、先ほどの「bg-header2.gif」を、
アップロードします。

アップロードした画像のURLをコピーしておき、
「外観」⇒「テーマ編集」⇒「cool-blueg12.css」
このCSSファイルの以下の位置にURLを貼り付けます。

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

#header{
position: absolute;
top: 30px;
height: 135px;
background: url(http://○○/wp-content/uploads/2012/09/bg-header2.gif) left top repeat-x #222222;
font-size: 1.2em;
color: #fff;
}

FTPソフトを使ってアップロードする場合

FTPソフトを使い、先ほど作った新しい画像を、
wp-content/themes/WP(賢威のテーマ名)/images/commonあて、
アップロードしていきます。

アップロードが終わったら、
「外観」⇒「テーマ編集」⇒「cool-blueg12.css」
このCSSファイルの以下の部分を、新しい画像名に変更します。

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

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

これで、ヘッダーの背景色は変更されました。

でも、そしたら、今度は、ブログのタイトルや説明文の文字色が
まったく読めなくなったりしますね。

この文字色を変更する方法は、こちらで解説しています。

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

さて、続いて、コンテンツ部分の背景色を変更していきます。

ここでも、先ほどと同様、メディアアップロードを使う方法と、
FTPソフトで直接アップロードする方法があります。

まずは、背景となる画像を用意します。
この画像は、ごく一般的に配布されている無料の背景パターンなどを、
そのまま背景として使わせてもらうこともできますし、
賢威テンプレート内の背景画像を好みの色に塗りなおすこともできます。

賢威の背景を塗りなおして使う(単色背景変更時におすすめ)

ヘッダー背景変更時に使った、「images」フォルダ内の「common」の中にある、
bg.jpg」という画像を探します。

これを、お手持ちの画像加工ソフトで塗っていきます。
単色なら、さほど時間もかからずに一気に塗れますね^^
で、「bg2.jpg」など、分かりやすい名前で保存しておきましょう。

背景パターン素材を使う


ごく一般的に無料配布されている無料パターン素材も使えます。
ただし、商用利用可能かどうかなど、必ず確認してくださいね。

ただ、「bg.jpg」という賢威の背景の画像サイズは、
800ピクセル×800ピクセルなんですよね。

通常、無料配布されているパターンは、
そこまで大きくなくて、100~200ピクセル四方がせいぜいです。

あまりに小さすぎる背景パターン素材は試していませんが、
100×100くらいのパターン素材でも使えましたので、
大丈夫かな、とは思います。

サイズが違う背景パターンを使う場合、
必ず、いろんなブラウザで表示をチェックしてくださいね。
IEとか、IEとか、IEとか。。。(笑)

こちらを使うと、小さな背景から大きな背景にすることができますので、
一旦大きくしておいて、正方形にカットするのも手、ですね。手間だけど。
ただし、タイルのように並べて、背景を表示させますので、
柄合わせにはご注意ください。

⇒ ぴっかパターン背景画像作成ツール

で、背景パターン素材を使用する場合も、
分かりやすい名前に変更しておきます。

さて、では、ここから、画像をアップロードしていくんですが、
アップロードした画像を背景に指定するためのソースを確認しましょう。

「外観」⇒「テーマ編集」⇒「cool-blueg12.css」を開き、
以下のソースを探します。

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

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

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

ここに、ヘッダー背景同様、アップロードした画像の名前を当てはめます。

メディアアップロードを使ったなら、そのURLを記載します。

background: url(http://○○/wp-content/uploads/2012/09/bg2.jpg) repeat #020202;

FTPソフトを使って「common」フォルダにアップロードしたなら、
その画像名を記載します。

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

これで、背景は変更されました。

で、ここから、細かい部分を修正していきます。
これは、次のページで解説しますね。

>>>賢威でWordPress~背景色を変えた後のこまごま設定

あわせて読みたい関連記事

“賢威でWordPress~背景色を変更する” への2件のフィードバック

  1. [...] てくる、 色の変更などのこまごました変更を解説します。 賢威テンプレートの背景色を変更するには、 こちらのページを参考にしてください。 ⇒ 賢威でWordPress~背景色を変更する [...]

  2. [...] 賢威でWordPress~サイドバーの背景色変更 賢威でWordPress~背景色を変更する 賢威でWordPress~背景色を変えた後のこまごま設定 [...]

サブコンテンツ

このページの先頭へ