ヘッダの画像をオリジナルの画像に変更する

RW3.6検証済みRW3.5検証済み
Rapidweaverのテーマにはヘッダ(ページの一番上)部分に画像があるものいくつかあります。
Rapidweaverを使っている人でオリジナル雰囲気を出したい場合、この部分を変更する事が一番簡単で効果のある方法ではないでしょうか?

テーマに使われている画像を変更したい場合、実は専用?のアプリケーションがあります。
RWThemeMiner

これを使えば簡単にヘッダなどの画像が変更出来ます。それだけでなく他にもいろいろカスタマイズが出来るみたいです(たぶん…)。

それじゃあつまんないので(笑)、このエントリでは専用のアプリケーションを使わないで変更する方法をご紹介します。(
カスタマイズの基本を読んでいることを前提として話を進めていきます。)

ヘッダ部分が画像になっているテーマはいくつかありますが、それぞれカスタムする場所が違います。
変更したい画像を探すには、まず対象のテーマのパッケージを開いて、その中の
imagesという名前のフォルダを開きます。その中に変更したい画像ファイルがあるはずです。
あとは同じファイル名、同じ拡張子で新たに制作したオリジナルの画像を保存、imagesフォルダの対象となるファイルと入れ替えればOKです。

ヘッダの画像だけでなくテーマ全体の色調ごと変更するテーマもありますが、imagesフォルダの中を注意深く見ていけば必ず見つかります。その場合はimagesフォルダの中にさらにフォルダがあることが多いです。

ファイル名が同じでも拡張子が異なるファイル(Flashなど)や名前が異なるファイルと置き換えたい場合は、
CSSファイルを編集する必要があります。
その方法ですが、はじめに変更対象となる画像ファイルの名前を拡張子ごとコピーします。
とりあえず(笑)
style.cssを開いて、ファイル内をコピーした画像ファイル名で検索します。見つからなければ同じディレクトリにあるcssという名前のフォルダを開いてその中のCSSファイルを検索してみて下さい。

検索すると、その画像を背景に指定したIDやクラスセレクタが見つかりますのでその部分を編集して下さい。例えば…

#pageHeader { background-image: url(../../images/header/header_aqua.jpg); background-repeat: no-repeat; }

ヘッダの背景にheader_aqua.jpgというファイルが配置してあります。これをsample.jpgというファイルに置き換えるには

#pageHeader { background-image: url(../../images/header/sample.jpg); background-repeat: no-repeat; }

このようにします。

ここで注意点がひとつ。画像のファイル名や拡張子を変更した場合は、必ず元の画像ファイルがあった同じディレクトリに新しいファイルを置いて下さい。この例だと、imagesフォルダの中のheaderフォルダがそれに当たります。

この作業をしていると、オリジナルの画像を
ページインスペクタのテーマスタイルで新しい項目として選択出来るようにしてみたいと思ったりしました?その方法はページインスペクタのテーマスタイルの項目を増やす(未エントリ)でご紹介したいと思います。

某掲示板で質問が出てるのを見て、なるほどと思いこのエントリを書いてみました。

blog comments powered by Disqus