今回は、ピンポイントで「ヘッダー部分に画像を入れる（or 変える）」方法です。
FireFox + FireBug を使うことを前提に説明しますが、Google Chrome でもほぼ同じ手順でできますので、好きな方を使ってください。
それ以外に、FTPクライアント（FFFTPなど）と画像編集ソフト（GIMPなど）、テキストエディタ（行番号表示があるものがよい）が必要です。
スタイルの適用対象を調べる
ITPKのホームページを開き、ヘッダー部分の背景画像のあたりで 右クリック→要素を調査 を選んでください。
HTMLとCSSなどの情報が表示されます。
今回は偶然、背景画像を指定している部分（ background-image : url(images/Header.jpg) ; ）が出てきましたが、そう上手く行かなかった場合には、左半分のHTMLエリアにフォーカスを合わせ（＝クリックし）て、カーソルキー（キーボードの矢印キー）の上下で、ハイライト（反転表示行）を移動させてみてください。右半分のCSS領域に、背景画像を指定している部分がでる箇所があるはずです。
右上辺りに、青文字で 「style.css（586行目）」と書いてあります。つまり、そこに背景画像を指定する記述があるのです。
ファイルの場所
マウスポインタを青文字の「style.css（586行目）」に合わせると、ツールチップテキストでURLが表示されます。今回は「 http://www.itpk.jp/wordpress/wp-content/themes/three_worlds_apart_ote_071/style.css 」 と表示されました。
この style.css ファイルを基点にして、images/Header.jpg で見ることのできるファイルが、画像ファイルです。
FTPクライアントで、アクセスしてみましょう。
ITPKのサーバに接続し、/public_html/wordpress/wp-content/themes/three_worlds_apart_ote_071/ を開いた状態です。ここにある style.css が、ページのデザインに影響を与えているのです。
その中の images ディレクトリです。
この中の Header.jpg をダウンロードしてから開いてみれば、背景画像であることが分かるはずです。
背景画像を書き換える
まずは、ダウンロードした Header.jpg ファイルを書き換える方法を試してみましょう。
例えば、色合いを変えてみるとか、図形を描き加えてみるとか、逆に何かを消してみるとか。画像の縦横サイズさえ変えなければ、何をしてもかまいません。
こうして編集した Hearer.jpg を、FTPクライアントを使って ITPKのサーバの Header.jpg に上書きしてください。
ブラウザで再読み込み（場合によっては Ctrl + F5 で強制再読込）することで、ヘッダー部分の画像が変わるはずです。
背景画像を別の画像にする
次に、まったく別の画像にしてみましょう。
新しい画像ファイルのファイル名を、Header2.jpg 、幅 800px 高さ160px だとします。これらは自分が使うファイルに合わせて読み替えてください。
まず、画像ファイルを FTPクライアントを使って、サーバにアップロードします。
次に、style.css ファイルをダウンロードし該当部分、先程調べた586行目からを編集します。
div.Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 800px;
height: 160px;
background-image: url('images/Header2.jpg');
background-repeat: no-repeat;
background-position: center center;
}
通常は、画像のサイズを変えると、他の要素のバランスがずれてしまいます。これは、画像サイズに合わせて、他の要素のサイズや位置が調整されているためです。
なので、前後の要素も同様の方法で「要素を調査」して、サイズ（CSSファイルの width と height の値）や位置（CSSファイルの top , left , right . bottom の値）を微調整する必要があります。
やり方自体は同じなので、いろいろ試してみてください。
新しく背景を入れる
最後に、もともと背景画像のないテーマに、背景画像を入れる方法です。
やり方自体は今までと同じで、画像をアップロードして、CSSファイルを書き換えるだけなのですが、元のCSSファイルに「background-image:」の記述がないため、「CSSのどこを？」が分からないと思います。
そんな時は、左半分のHTML領域内でマウスを動かしてみてください。ページの該当する部分の色が変わって表示されます。これで、おおよその場所がわかりますので、その部分のCSS記述に、background-image: などの情報を書き加えてください。
ベストな方法
本来であれば、HTMLとCSSの仕組みを理解して、変更箇所を見つけるべきです。
ただ、そうするには既存のWordPressのテーマは複雑すぎるため、上記のような方法を紹介しました。
単純なテーマでも自力で作ればかなり理解が深まりますので、時間があったら挑戦してみてください。
Tags: