2009年03月06日

研修の補助資料04(後半):ヘッダーの画像を変更する

後半・研修の補助資料04:ヘッダーの画像を変更する

seesaaブログでHP作成:研修補助資料4(後半)です。
研修会のご案内はこちらから。

今回は、ブログをHPっぽくという事で、ヘッダーの画像を変更します

前半で、ヘッダーの高さを高くしました。
後半では、いよいよヘッダーの画像の変更です。

ヘッダーの画像を変更すると、ブログの手軽さはそのままに、グッと印象が変わり、自社HPらしくなります。


手順は、
1.変更後の画像のアップロード
2.アップロードした画像のアドレスの確認
3.画像の変更
です。

1.変更後の画像のアップロード
今回は、サイズが900×90の画像を用意しました。
今回研修で使用している『Stripe Brown:両サイド』というデザインの幅は800なのですが、あえて100大きな幅900のサイズにしました。

この画像を、普通に、記事に画像を挿入する時の要領で、記事に挿入します。


2.アップロードした画像のアドレスの確認
<img src="http://sample-hp222.up.seesaa.net/image/header_b900.jpg" alt="header_b900.jpg" width="900" height="90"
border="0" />

記事に挿入した際のソースが上記です。
青文字の部分が、この画像の有る場所を表しています。


3.画像の変更
では、ヘッダーの画像を変えましょう。
方法は、ヘッダーに使用する画像ファイルを指定している場所の修正です。


body {
background-image:url(http://blog.seesaa.jp/img/bg/stripebrown/bg2.jpg);
background-repeat:repeat-x;
background-position:top center;

 上の赤字の部分を、下の青字のように、変更します。
 (『スタイルシートを変更する』ボタンのクリックを忘れずに)

body {
background-image:url(http://sample-hp222.up.seesaa.net/image/header_b900.jpg);
background-repeat:repeat-x;
background-position:top center;

(実際には、お使いの画像ファイルへのアドレスを入力して下さいね(^^))

如何でしょう。
印象ががらりと変わりましたよね。

是非是非、ヘッダーの画像ファイルを変えて見てください。

この作業をする場所は、使用しているデザインの『スタイルシート』です。

『スタイルシート』の場所は・・・

先日の記事で説明しましたね。
こちら『研修の補助資料3:HPのタイトルの文字を大きく』をご覧下さい。


・全くカスタマイズをしていないHPの例
 http://sample-hp.seesaa.net/

・カスタマイズ後のHPの例
 http://sample-hp222.seesaa.net/


 助成金・社会保険のご相談なら鯖江の税理士法人川中経営
  税理士・ITC 川中重司
posted by 福井県は鯖江市の税理士 at 00:00 | Comment(0) | TrackBack(0) | ・seesaa(さくら)ブログのカスタマイズメモ
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/40033910
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック