WordPressのHeader画像の入れ替え

今回から、ワードプレスカスタマイズにチャレンジします。

最初は、サイトの顔とも言える ヘッダー の入れ替えに挑戦してみましょう。
 

#header {
background: url(images/header.jpg);
width: 800px;
height: 200px;
margin: 0;
padding: 0;
text-align: left;
}

上は、使用している『テーマ』の css の一部を抜き出したものです。
(大丈夫ですよ! CSSの講義をするつもりはありませんから)

CSS から 判った事は、

ヘッダー画像 の名前は header.jpg
サイズ は 800x200 ピクセル
images ホルダーに ヘッダー画像が在る

です。

この、 header.jpgを、あなたの好きな画像と入れ替えれば目的達成となるわけです。
 
 

では、早速作業を始めます。
最初の作業は、お気に入りの画像を捜して、800x200ピクセルに加工します。
(お気に入りの写真/画像を 800x200 ピクセル に加工出来る方はご自分でどうぞ。
(CSSをご存知の方は、 外観⇒編集⇒style.css の 50行目辺りの#Headerを修正ください)

下のサイトは、800x200 ピクセルの画像の無料で配布サイトです。
英語ですが、大丈夫です。 頑張って画像を検索してみてください。

FreeWebPageHeaders

お気に入りの 画像が見つかったら、右クリック  保存  名前を”header.jpg” にして保存します。
 
 

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

FTPの説明

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

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

今回は、 初めてのFTP操作ですので 参考画像を添付します

FTPの説明

FFFTP 起動させ、接続を クリックしてください。
wordpress FFFTP-1

さくらサーバー の場合は、下の画面が表示されます。  www をクリックしてください。
wordpress FFFTP-2

wordpress FFFTP-3

wordpress FFFTP-4

wordpress FFFTP-5

現在、右サイド・サーバーに在るheader.jpg は 再使用に備え、
選択して右クリック名前を変更してください。
左サイド(PC)のheader.jpgを 選択、上向きの矢印()をクリックして、
右サイド・サーバーにコピーします。
コピー出来ましたら、赤枠のX印をクリックして、接続を切断しましょう。

wordpress FFFTP-7

注: HTML,CSS を使わないために,配布するテーマ(テンプレート)の幅を 855⇒800 に変更しました。
    HTML,CSSの変更が出来る方は、其のまま855ピクセルのテーマをお使いください。
    HTML,CSSは 一寸・・・ の方は Download しなおしてください。

DraemonJ

コメント

コメントを残す

*