2005年07月10日
だーしゃのCSS講座 ヘッダーの画像を変えてみよう!
だーしゃの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 だーしゃのCSS講座 ブログの構造を理解してみよう!
2005-07-11 だーしゃのCSS講座 カスタムプラグインをかっこよく!
2005-07-10 だーしゃのCSS講座 ヘッダーの画像を変えてみよう!
■関連記事一覧
まずサイズ、こちらは(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&ブログの活用講座!
この記事へのトラックバックURL
http://daxiazzz.ti-da.net/t440809
この記事へのトラックバック
|
|
だーしゃ先生のCSS講座の生徒に(勝手に)なった私なのですが、とうとう、ヘッダーの画像を変えることに成功しました!最初の壁、、、写真の大きさの変え方がわからない!!困った私は... |
ヘッダーの画像を変えてみよう!【アルヒハレノヒ】at 2005年07月18日 19:59
秋・仕様【和ごはん・愛好家 けいchun編~】at 2005年09月01日 05:55
|
|
トップの画像を変更してみました北谷のアメリカンデポの写真です♪なかなかキレイじゃない?(〃'∇'〃)ゝエヘヘ写真だけちょっと浮いてるけど・・・前からやりたかったんだけど、htmlが... |
デザイン変更♪【琉球真南風】at 2005年09月03日 13:25
donepezil
【Anna Lekanden】at 2006年02月05日 13:58
【Anna Lekanden】at 2006年02月05日 13:58
|
|
こぐまBarのオリジナルテンプレート完成ーヘッダーの画像を差し替えてみましたこれ、高尾のツリーハウスで何かの打ち上げをしたときに、キャンドル点けたのがいい感じだったので撮影し... |
テンプレート作りに挑戦!【こぐまBar おうちカクテルバーテンダーの日記】at 2006年12月03日 22:29
「ブログ作成・裏話」の巻【ओइरान्~Oyran/花魁~】at 2007年04月24日 19:23
「ヘッダー・サイズ変更」の巻【ओइरान्~Oyran/花魁~】at 2007年05月12日 16:53
この記事へのコメント
Posted by Urumai at 2005年07月10日 12:16
Posted by はぴこ at 2005年07月10日 12:47
|
|
■Urumaiさんへ スタイルシート、デザイン的な部分なのでやってみると面白いよ。 是非チャレンジしてくださいな~ ■ぱぴこさんへ コメントありがとうございます~ いえいえお役にたてたのならうれしい限りですよ~。 ちょくちょくスタイルシートやって行きたいですね~ |
Posted by だーしゃ at 2005年07月10日 20:01
Posted by 中里智英子 at 2005年07月10日 22:10
|
|
■中里智英子さんへ こんばんは!こちらにコメントいただけるとはびっくりしました! ありがとうございます~。 CSSについて僕も勉強しながらみんなで色々デザインできればいいなぁと思ってはじめました! ぼちぼち更新していきますね~(^^)! |
Posted by だーしゃ at 2005年07月10日 22:59
Posted by やみ~ at 2005年07月11日 00:01
Posted by だーしゃ at 2005年07月11日 10:15
|
|
おお、だーしゃさん、私も楽しみにしてます。 あのがははと笑うシーサーの写真に ゴーヤーテンプレートの色具合を使いたいのよね。 緑色バージョンも作ってもらえないかな~っと、ここでリクエストしてどーする。 |
Posted by pyo at 2005年07月11日 11:33
Posted by だーしゃ at 2005年07月11日 13:11
Posted by しょ~ at 2005年07月15日 13:11
|
|
だーしゃさん。こんにちは! だーしゃさんのCSS講座を見ながらヘッダーを変えてみたところ、 成功しました~! ありがとうございます。 前、チャレンジしたときは、全部消え、真っ白・・顔は真っ青・・ になっちゃってそれ以来、諦めてたので、今回成功してよかったです。 これから、また勉強していこう!と思います。 よろしくお願いします! |
Posted by ciao at 2005年07月15日 14:45
|
|
■しょ~さんへ 色々いじるとおもしろいですよ~ 後で見に行きますね~ ■ciaoさんへ 成功しましたか(^^)! お役に立ててよかったです~。色々試してみてくださいね。 色々とややこしいのですが、やったらおもしろいですよ。 色々と勉強してみてくださいね~ |
Posted by だーしゃ at 2005年07月15日 18:52
Posted by しん at 2005年07月16日 17:49
Posted by だーしゃ at 2005年07月16日 22:31
|
|
だ~しゃさん、初めまして。 こんばんは^^ sunさんのブログからお邪魔させて頂きました。 すごく分かりやすい説明のおかげで どうにかテンプレートの変更が成功しました♪ 本当にありがとうございました。 これから少しずつこちらで 勉強させてくださいね^^ |
Posted by けいchun at 2005年08月31日 03:46
|
|
■けいchunさんんへ こんにちは、コメントありがとうございます。 テンプレート変更できたんですね! 自分で帰れるようになれば面白いから色々チャレンジしてみてください。 僕もまだ勉強しながらなので、ぼちぼちやっていきましょう! |
Posted by だーしゃ at 2005年08月31日 14:05
Posted by けいchun at 2005年09月01日 05:58
Posted by だーしゃ at 2005年09月01日 22:58
|
|
だーしゃさん、私もずっとヘッダーの表示変えたくて もんもんとしてました(笑) こんな講座を開いてくれていたんですね♪ もっと早く知ってれば・・・_| ̄|○ これからも楽しみにしてます。 トラバさせていただきました♪ |
Posted by ちゅらはちゅ at 2005年09月03日 13:32
|
|
■ちゅらはちゅさんへ こんにちは!ヘッダー変わってましたね~。 お役に立てて本と良かったです! これからもぼちぼちアップしていくのでどうぞ宜しくですよ。 トラバありがとうございました(^^)! |
Posted by だーしゃ at 2005年09月03日 20:47
|
|
だーしゃさん、はじめまして。 sunさんのところから参りました。 以前から、ヘッダーの写真を変えたいと思っていたのですが とてもわかりやすい講座のおかげで 無事変えることができました。 本当にありがとうございます。 他の講座も読んで、アレンジしてみたいです。 PS:お気に入りに入れさせてくださいね |
Posted by uni at 2005年09月09日 22:33
Posted by だーしゃ at 2005年09月13日 12:18
Posted by なっちゅ at 2005年09月20日 11:21
|
|
■なっちゅさんへ こんにちは、コメントありがとうございます。 お役に立ててうれしいですよ(^^) 自分で触れるようになるとたのしくなるので 色々試してみてくださいね~ また何かあれば聞いて下さい。 よろしくです! |
Posted by だーしゃ at 2005年09月20日 23:18
|
|
こんにちワァ!kirariです! ヘッダーの画像を1つにするにはどうしたら いいんですか?? 私のは、3つに分けられてて困っているんです・・・。 どうすればいいのか教えてくださァ~い!!!! |
Posted by ◇◆kirari◆◇ at 2005年10月20日 01:43
|
|
◇◆kirari◆◇さんへ こんばんはー これはですね、スタイルシートでちょっと追加しないといけないんです。 background:#fff url(/_img/sky_blue/head.jpg) left; このleftの後ろに no-repeat と付け加えればOK. 是非やってみてくださいねー、わからなかったらまた聞いてくださいー8^^) |
Posted by だーしゃ at 2005年10月22日 03:27
|
|
こんにちワァ☆kirariです!! やってみたんでが、画像が真中にポツン・・・。 っていう感じになってしまいました^^; タイトルのところ全体的に画像を出したんですが そしたら、画像がのびてしまいますかねぇ・・・? どうしたらいいですか??教えてください!! お願いします!! |
Posted by ◇◆kirari◆◇ at 2005年10月22日 13:42
|
|
■◇◆kirari◆◇さんへ こんにちは、(^^) ためしてみたんですね! そして画像がやっぱり小さいですね。 こちら横幅が長いのを用意しないと伸びて あんんまりきれいじゃなくなってしまいますよー こればっかりはどうしようもないですね… とにかく一度横幅が大きな画像を用意してみてくださいー それを使うのが別とですよっ |
Posted by だーしゃ at 2005年10月22日 14:58
Posted by at 2006年01月19日 18:04
Posted by Luna at 2006年01月19日 18:06
|
|
Lunaさん こちらなのですが、 URLのパスを書き換えてください。 説明している赤文字の部分ですよ。 /_img/sky_blue/head.jpg ↓ /usr/momokamomoka/umi.jpg まずは色々とやってみてくださいね。 |
Posted by だーしゃ at 2006年01月19日 18:22
Posted by Luna at 2006年01月19日 20:32
Posted by キラリ at 2006年01月27日 12:15
|
|
■キラリさんへ こんにちはっ。 まずですね。アップロードされる画像が日本語名だというのが問題ですよ。 なので、画像ファイルをパソコンでローマ字、とかにして、 UPしなおしてから、URLをスタイルシートに貼り付けてみてください。 それが原因ですねー。 |
Posted by だーしゃ at 2006年01月27日 16:31
|
|
だーしゃ様 こんばんは、メール有難うございます。画像ファイルをローマ字に直したのが ↓ http://img03.ti-da.net/usr/buraidaru/DSC00178%20okinawa-s.JPG です。 何度も試みたのですができません。もう一度教えて頂けませんでしょうか。 お願いします。 |
Posted by キラリ at 2006年01月27日 22:05
|
|
だーしゃ様 こんばんは、メール有難うございます。画像ファイルをローマ字に直したのが ↓ http://img03.ti-da.net/usr/buraidaru/DSC00178%20okinawa-s.JPG です。 何度も試みたのですができません。もう一度教えて頂けませんでしょうか。 お願いします。 |
Posted by キラリ at 2006年01月27日 22:09
Posted by дмIкд дмIкд☆。・:*★ at 2006年01月29日 21:33
Posted by miki at 2006年04月26日 13:39
Posted by だーしゃ at 2006年04月26日 22:28
|
|
はじめまして!! だーしゃさんの講座のおかげで私のブログも改造できました♪ まえから「オリジナルデザイン」というものにあこがれていただけに感無量です(T-T) これからもいろいろ勉強させてくださいペコリ(o_ _)o)) |
Posted by hamu at 2006年06月01日 00:11
Posted by だーしゃ at 2006年06月01日 15:26
Posted by ロッキャン at 2006年08月14日 13:24
|
|
だーしゃさん!!明けましておめでとうございます。。 ヘッダーの画像を変えたいのですが。。。 横の幅が足りません。。。 どうしたら1枚になりますか? サイズを代えるとアップロードが出来ませんでした。。 (T▽T)尸~~SOS!! |
Posted by りくレンジャーhaha at 2007年01月10日 21:57
Posted by だーしゃ at 2007年01月11日 12:09
Posted by りくレンジャーhaha at 2007年01月11日 16:54
Posted by だーしゃ at 2007年01月12日 00:15
|
|
はじめまして、こんにちは。 TOP画像を変えようとがんばっていますが、 一つ質問があります。 画像のサイズですが 740×200とありますが、これを例えば 740×300というふうに変更することは可能ですか? ご教授いただけると、とても助かります! |
Posted by mari at 2007年04月24日 17:05
Posted by だーしゃ at 2007年04月24日 18:17
Posted by ワヤン at 2007年04月25日 13:15
Posted by だーしゃ at 2007年04月26日 07:59
|
|
だーしゃさん有難うございました。 早速、チビが眠ってからやってみたいと思います。 うっかりしてたのですが、 お気に入りに入れてCSS講座ばかり気にとられていたのですが、 先日退院されたばかりなんですよね。 お忙しいときに質問ゴメンナサイでした・・ 私のいとこも同じ診断をうけたものがいます。 体、大事にして下さい。 |
Posted by ワヤン at 2007年04月26日 11:28
|
|
■ワヤンさんへ とりあえず、今はそんな感じですねーー でも時間はぼちぼちあるので問題ないですよーー そしていとこさんも同じ診断うけたんですね、 どうでしたでしょうか、 とりあえず、僕はできる事をやりますです(^^) |
Posted by だーしゃ at 2007年04月26日 19:59
|
|
だーしゃさんこんにちは♪ 私も参考にしてヘッダーのカスタマイズとタイトルの色の変更をしてみました☆ ・・・が。 サイドバーがどうしても記事の下に行ってしまうんですが、これってどうしたらいいんでしょうか~?? 但し、コメントを入れると元にもどるんですよー。 全くわからないです~(汗 教えてください~~。 |
Posted by こぢ at 2007年04月29日 18:29
|
|
■こぢさんへ いろいろと参考にいただいてありがたい限りですよー。 そしてーなのですが、今回のものは、どうやら 「狙いは?」というタイトルの記事がのなかの タグがうまく閉じられていないようです。 どこかでちゃんと div のタグが閉じられていないとおもうので、 ちょこっと見てみてくださいねー。 |
Posted by だーしゃ at 2007年04月29日 19:51
Posted by こぢ at 2007年04月29日 21:44
|
|
■こぢさんへ よかった~♪ ちゃんとなおったならなによりですよーー タグはほんとちょっとしたことで崩れてしまうので、 閉じ忘れとかにきおつけてみてくださいねー また分からないことあればきいてみてください~(^^) |
Posted by だーしゃ at 2007年04月30日 07:29
Posted by しまばなな at 2007年05月12日 14:29
Posted by だーしゃ at 2007年05月13日 08:53
|
|
だーしゃさん、お久しぶりです♪ さて、ヘッダーの画像を変えてみようとチャレンジしているのですが、管理画面>デザイン>オリジナルデザインが、管理画面が変わっていて、進む事が出来ません。 ビギナーの私にも分かりやすく教えて下さいねぇ~♪ |
Posted by Mr.スティービー at 2007年06月06日 09:04
|
|
■Mr.スティービー さんへ コメントありがとうございますーーー そういえば管理画面変わってましたね、しまった。 早速ですが、変更しましたよ。 これいくつか変更しないとだめですねーー。 伝えてくれてありがとうございました!! |
Posted by だーしゃ at 2007年06月07日 09:16
Posted by naoko at 2007年06月08日 01:24
Posted by だーしゃ at 2007年06月08日 07:31
Posted by TARO at 2007年06月19日 17:58
|
|
■TAROさんへ こちらですねー、おそらくブログのキャッシュというのが絡んでいる可能性があります。 こちらはまずURLを変更していただいて、その後に ブログの記事を投稿するか、ブログの設定などを変更してみてください。 そうするともしかすると変更が効くと思います。 ただ、本当の所はどうなのかわからないので、 まずは試してみてくださいねー(^^) |
Posted by だーしゃ at 2007年06月20日 12:03
|
|
だーしゃさん、早速アドバイスありがとうございました。 画像変更したあと、ブログ環境設定を再登録し、読み込み直すとうまく 変更結果が反映されました。 これで好きなようにタイトル画像を変更して、楽しめます。 ※ご回復、心よりお祈り申し上げます。 |
Posted by TARO at 2007年06月20日 12:31
|
|
■TAROさんへ いえいえとんでもないですよー、 ちゃんと表示ができてよかったです(^^) 色々と試してみてくださいね。 そしてお気遣いありがとうございますーー。 もうちょっと頭はがんばって治しますね。 |
Posted by だーしゃ at 2007年06月20日 17:00
Posted by Luna at 2007年06月25日 23:36
Posted by だーしゃ at 2007年06月26日 07:24
Posted by Luna at 2007年06月26日 07:52
|
|
■LUNAさんへ なおってよかったです(^^)!! 実際場合がどうなのか、僕の考えと違うかも知れない場合があるので、 どきどきしてました(^^) でもよかったーー^^ 沖縄はどんどん夏になっていきますよー。 あと体調はたたきなおすしかないです! 心配してくださってありがとうございます。 がんばりますーー(^^) |
Posted by だーしゃ at 2007年06月26日 07:58
Posted by さとこ at 2007年07月12日 16:55
|
|
■さとこさんへ 火の鳥にテンプレートが変更しないんでしょうか?? うーーんもしかしたら、キャッシュというのの問題かもしれないので、 火の鳥に変更して、設定を何か変更してみてください。 そしたら変更されると思います。 また設定はその後戻せば大丈夫ですから(^^) |
Posted by だーしゃ at 2007年07月13日 09:29
Posted by さとこ at 2007年07月13日 16:07
Posted by さとこ at 2007年07月13日 16:08
Posted by たかかず
at 2007年09月05日 13:06
at 2007年09月05日 13:06Posted by だーしゃ
at 2007年09月06日 09:28
at 2007年09月06日 09:28|
|
初めまして Toshigallagherと申します こちらの記事を参考にさせて頂き、自分のブログの画像も換えてみました 大変参考&勉強になりました ありがとうございました~ m(_ _)m |
Posted by Toshigallagher at 2008年05月28日 17:18
|
|
■Toshigallagher さんへ コメントありがとうございますっ。(^^) 是非こちらドンドン利用してつかってみてくださいーー(^^ やっぱり自分用に変更した方がなんか楽しいですからねー。 色々と触ってみてくださいね^^ |
Posted by だーしゃ at 2008年05月28日 19:49
■ヨッシャーカテゴリー
・CSS&ブログの活用講座!
・沖縄 写真
・└ 沖縄ちゅら海写真
・└ 空 写真
・└ 沖縄 人写真
・└ 動物 写真
・沖縄スタイル
・沖縄不思議ワールド
・IT?
・JOY WORK
・記憶喪失障害的闘病生活!?
・おいしいモノ!
・└ オススメレストラン
・└ カフェ
・└ 食堂
・└ 沖縄そば
・沖縄観光クーポン券情報





日本の地域ブログ大集合!津々浦々の美味い・楽しいがここに!