WordPressのHeader画像入替え(html/CSS使用)

前回、ワードプレスヘッダーのカスタマイズにチャレンジしました。

HTML/CSSを使用せずに、header画像をのソースを入れ替えにる 「簡易方」を説明しましたが、 HTML、CSSを使っての入れ替え方を説明して欲しいとのリクエストが多数届いていますので 説明いたします

HTML/CSSをご存知の方が 対象ですが 簡単なので HTML/CSSを学習したい方も どうぞご覧ください

41 #header {
42 background: url(images/header.jpg);
43 width: 800px;
44 height: 200px;
45 margin: 0;
46 padding: 0;
47 text-align: left;
48 }

上は、使用している『テーマ』の CSSの 41行から48行を抜き出したものです。

header画像の入れ替えは, images/header.jpg に 800pix X 200pix サイズの 画像の名前と入れ替えるとともに、画像をアプロードしてやればいいのです。

 

 簡単でしょう!

では、CSS の内容を書き換える作業から説明していきます。

ヘッダー画像の交換手順

①②でCSSを開いて、③のheader.jpg を これから使いたいヘッダー画像のファイルの名前と入れ替えて、④で保存してください。

次に、先日説明した FFFTP を 稼動して サーバーへ接続してください。

 

FTPの説明

接続しましたら、【さくらサーバーの場合のみ www 】 wp-content  themes  dra800-1  images とホルダーを開いていき、 PCから header.jpg をサーバーにコピーしてください。

FTPの説明画像

これで、作業は 終りです。
ヘッダー画像が、いれ替わったかどうか ご確認してください。

DraemonJ 参考になりましたでしょうか・・・・・・・ にほんブログ村 ブログブログ ブログノウハウへ
にほんブログ村

コメントを残す

*