だーしゃのCSS講座　ヘッダーの画像を変えてみよう！

2005年07月10日 12:14

だーしゃのCSS講座

第1回　ヘッダーの画像を変えてみよう！

みなさんこんにちは、今日はてぃーだブログのテンプレート、
ヘッダーの画像の変え方をチョコットだけお教えいたします。

いくつかのブログを見ていただけるとわかるのですが、実はさほど難しくないんですよ。
例えばこちらのテンプレートのヘッダー画像を変えてみましょう。

まずは管理画面＞テンプレートのページを開いてください。

こちらではテンプレートを3つまで保存することができます。

その中でとりあえずカスタマイズをクリックしてみましょうー。

すると上記の画面が出てきます。

そこには4つの枠に色々なものが書かれていると思います。
その中の「スタイルシート」という所の記述を変更します。

しかし、その前にヘッダー画像を用意する必要があります。
まずサイズ、こちらは（740px）×（200px）を用意してください。
そして容量もできるだけ小さいやつのほうがいいですよ。（～100KB)

今回はこちらの画像を用意してみました。

それを自分のブログにある画像投稿用のページでサーバーにアップします。

管理画面＞左メニュー・画像一覧

今回UPロードした画像のURLはこちら↓
http://daxiazzz.ti-da.net/usr/daxiazzz/header-smp.jpgこれで準備はOK。

もしURLがわからなければアップロードした画像をクリックしてくだい。
そうするとアップロードした画像が表示されるので、
ブラウザーに表示されているアドレスがその画像のアドレスになります。

そして先ほどのオリジナルデザイン画面
スタイルシートの中で下記記述を見つけてください。

#banner,#subbanner{
　background:#fff url(/_img/sky_blue/head.jpg) left;
　padding:0px 0px 0px 0px;
　height: 219px;
}

後は簡単ですね、アップロードした画像のURLを、
赤文字のURLのところに入れ替えるだけです。

そして調整するのであればその画像の高さの数値を入力すればOKです。

今回はこんな感じ

#banner,#subbanner{
　background:#fff url(http://daxiazzz.ti-da.net/usr/daxiazzz/header-smp.jpg) left;
　padding:0px 0px 0px 0px;
　height: 201px;
}

ただし、こちらは元のテンプレートによって若干記述が違うかもしれませんが、
基本は「banner,#subbanner」ですのでそこのurlを変更するとOKです。

まだちょっとわかりにくいところもあるかもしれませんが、
基本はこんな感じなのでやってみてくださいね。

わからない所があれば質問もしてくださいね～。

だーしゃのCSS講座　

▼CSS講座

2006-04-11 だーしゃのCSS講座　写真に自動で白縁をつけたい！

2005-12-29 だーしゃのCSS講座　引用文に色を付けてみよう！

2005-09-02 だーしゃのCSS講座　線のカスタマイズしよう！

2005-07-28 だーしゃのCSS講座　背景画像及び背景色を変更してみよう！

2005-07-21 だーしゃのCSS講座　ブログタイトルの位置を変更してみよう！

2005-07-18 だーしゃのCSS講座　ブログタイトルの色を変えてみよう！

2005-07-17 だーしゃのＣＳＳ講座　ブログの構造を理解してみよう！

2005-07-11 だーしゃのCSS講座　カスタムプラグインをかっこよく！

2005-07-10 だーしゃのCSS講座　ヘッダーの画像を変えてみよう！

さらに詳しくはこちらをクリック　⇒　サイトマップ

CSS＆ブログの活用講座！