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講座 ヘッダーの画像を変えてみよう!

タグ :CSSCSS講座


■ヨッシャー新着記事
>>最新画像の一覧を見る


■関連記事一覧

CSS&ブログの活用講座!




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

http://daxiazzz.ti-da.net/t440809
この記事へのトラックバック

■ ヘッダーの画像を変えてみよう!

http://aruhiharenohi.ti-da.net/e449252.html だーしゃ先生のCSS講座の生徒に(勝手に)なった私なのですが、とうとう、ヘッダーの画像を変えることに成功しました!最初の壁、、、写真の大きさの変え方がわからない!!困った私は...

ヘッダーの画像を変えてみよう!【アルヒハレノヒ】at 2005年07月18日 19:59

■ 秋・仕様

http://wagohanhamham.ti-da.net/e483318.html 秋ですよ、気分は先走りな秋^^ってことでブログ背景、テンプレート。。。思いきって変えてみました♪いやぁ、ずいぶんコチラで勉強させて頂きました^^だーしゃさんのご説明は分か...

秋・仕様【和ごはん・愛好家 けいchun編~】at 2005年09月01日 05:55

■ デザイン変更♪

http://churahatyu.ti-da.net/e485676.html トップの画像を変更してみました北谷のアメリカンデポの写真です♪なかなかキレイじゃない?(〃'∇'〃)ゝエヘヘ写真だけちょっと浮いてるけど・・・前からやりたかったんだけど、htmlが...

デザイン変更♪【琉球真南風】at 2005年09月03日 13:25

■ donepezil

http://netfindrx.com/rxcat/donepezil/donepezil.html CSS

donepezil
【Anna Lekanden】at 2006年02月05日 13:58

■ テンプレート作りに挑戦!

http://koguma.hama1.jp/e5585.html こぐまBarのオリジナルテンプレート完成ーヘッダーの画像を差し替えてみましたこれ、高尾のツリーハウスで何かの打ち上げをしたときに、キャンドル点けたのがいい感じだったので撮影し...

テンプレート作りに挑戦!【こぐまBar おうちカクテルバーテンダーの日記】at 2006年12月03日 22:29

■ 「ブログ作成・裏話」の巻

http://oyran.ti-da.net/e1514293.html 「ブログ・PC初心者のわたくしができた?!」の巻

「ブログ作成・裏話」の巻【ओइरान्​~Oyran/花魁~】at 2007年04月24日 19:23

■ 「ヘッダー・サイズ変更」の巻

http://oyran.ti-da.net/e1560367.html 写真サイズの自由自在~♪

「ヘッダー・サイズ変更」の巻【ओइरान्​~Oyran/花魁~】at 2007年05月12日 16:53
この記事へのコメント

■ Urumai

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 おお!うれしい><
ありがとうございま~す♪

Posted by Urumai at 2005年07月10日 12:16

■ はぴこ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん、ありがとう~~!
実はどうやったらいいのかわからなくてモンモンと
しておりました^^;

Posted by はぴこ at 2005年07月10日 12:47

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■Urumaiさんへ
スタイルシート、デザイン的な部分なのでやってみると面白いよ。
是非チャレンジしてくださいな~

■ぱぴこさんへ
コメントありがとうございます~
いえいえお役にたてたのならうれしい限りですよ~。
ちょくちょくスタイルシートやって行きたいですね~

Posted by だーしゃ at 2005年07月10日 20:01

■ 中里智英子

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん、はじめまして。
CSS講座、これからも楽しみにしています。

Posted by 中里智英子 at 2005年07月10日 22:10

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■中里智英子さんへ
こんばんは!こちらにコメントいただけるとはびっくりしました!
ありがとうございます~。
CSSについて僕も勉強しながらみんなで色々デザインできればいいなぁと思ってはじめました!
ぼちぼち更新していきますね~(^^)!

Posted by だーしゃ at 2005年07月10日 22:59

■ やみ~

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 とても分かりやすい説明ですね。
我もこんな感じで記事が書けるやうになろ。

Posted by やみ~ at 2005年07月11日 00:01

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■やみ~さんへ
まだちょっとわかりにくいところかもしれませんが、
色々教えられる所は教えていきますね~。
がんばりましょう~

Posted by だーしゃ at 2005年07月11日 10:15

■ pyo

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 おお、だーしゃさん、私も楽しみにしてます。

あのがははと笑うシーサーの写真に
ゴーヤーテンプレートの色具合を使いたいのよね。
緑色バージョンも作ってもらえないかな~っと、ここでリクエストしてどーする。

Posted by pyo at 2005年07月11日 11:33

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■pyoさんへ
色々やっていきますよ~。

そしてシーサーの写真にゴーヤーの色具合ですかぁ。
ふふふ、それはやり方教えて生きますのでやってみてくださいね~。

どうぞよろしくですよ!

Posted by だーしゃ at 2005年07月11日 13:11

■ しょ~

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だ~ちゃん

教え方うまいねぇ

俺も頑張っていじってみるよ

ってか生きますって(笑)あ~た生きてるじゃん(笑)

Posted by しょ~ at 2005年07月15日 13:11

■ ciao

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん。こんにちは!

だーしゃさんのCSS講座を見ながらヘッダーを変えてみたところ、
成功しました~!
ありがとうございます。

前、チャレンジしたときは、全部消え、真っ白・・顔は真っ青・・
になっちゃってそれ以来、諦めてたので、今回成功してよかったです。

これから、また勉強していこう!と思います。

よろしくお願いします!

Posted by ciao at 2005年07月15日 14:45

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■しょ~さんへ
色々いじるとおもしろいですよ~

後で見に行きますね~


■ciaoさんへ
成功しましたか(^^)!
お役に立ててよかったです~。色々試してみてくださいね。

色々とややこしいのですが、やったらおもしろいですよ。
色々と勉強してみてくださいね~



Posted by だーしゃ at 2005年07月15日 18:52

■ しん

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん、はじめまして。

文系の僕にも
なんとか出来ました。

これからもCSS講座楽しみにしています

Posted by しん at 2005年07月16日 17:49

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■しんさんへ

はじめましてこんにちは~!
お役に立ててうれしい限りですよ~。
テンプレートさわるとたのしいですよね。
これからも色々書いて見ますね~

Posted by だーしゃ at 2005年07月16日 22:31

■ けいchun

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だ~しゃさん、初めまして。
こんばんは^^

sunさんのブログからお邪魔させて頂きました。

すごく分かりやすい説明のおかげで
どうにかテンプレートの変更が成功しました♪

本当にありがとうございました。

これから少しずつこちらで
勉強させてくださいね^^


Posted by けいchun at 2005年08月31日 03:46

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■けいchunさんんへ
こんにちは、コメントありがとうございます。
テンプレート変更できたんですね!
自分で帰れるようになれば面白いから色々チャレンジしてみてください。
僕もまだ勉強しながらなので、ぼちぼちやっていきましょう!

Posted by だーしゃ at 2005年08月31日 14:05

■ けいchun

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん、少しだけ手を加えられるようになると
面白くなっていきますね!!

ぼちぼちやっていきます♪

(TBさせて頂きました。どうぞヨロシクお願いします^^)

Posted by けいchun at 2005年09月01日 05:58

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 □けいchunさんへ
こちらどんどん面白くなってきますよ。
触っていくのが一番いいかんじですから(^^)!
トラバどうもです!

Posted by だーしゃ at 2005年09月01日 22:58

■ ちゅらはちゅ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん、私もずっとヘッダーの表示変えたくて
もんもんとしてました(笑)
こんな講座を開いてくれていたんですね♪
もっと早く知ってれば・・・_| ̄|○
これからも楽しみにしてます。

トラバさせていただきました♪

Posted by ちゅらはちゅ at 2005年09月03日 13:32

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■ちゅらはちゅさんへ

こんにちは!ヘッダー変わってましたね~。
お役に立てて本と良かったです!
これからもぼちぼちアップしていくのでどうぞ宜しくですよ。

トラバありがとうございました(^^)!

Posted by だーしゃ at 2005年09月03日 20:47

■ uni

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん、はじめまして。
sunさんのところから参りました。

以前から、ヘッダーの写真を変えたいと思っていたのですが
とてもわかりやすい講座のおかげで
無事変えることができました。
本当にありがとうございます。
他の講座も読んで、アレンジしてみたいです。

PS:お気に入りに入れさせてくださいね

Posted by uni at 2005年09月09日 22:33

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■UNIさんへ

こんにちは、コメントありがとうございます。
ヘッダーの写真とか自分の物に変更できると俄然たのしいですよね~

他にも色々とチャレンジしてみてくださいね~(^^)

Posted by だーしゃ at 2005年09月13日 12:18

■ なっちゅ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 はじめまして!
やってみたかったんです!これ!
参考にさせて頂きました~♪
だーしゃ先生、ありがとうございました!

Posted by なっちゅ at 2005年09月20日 11:21

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■なっちゅさんへ

こんにちは、コメントありがとうございます。
お役に立ててうれしいですよ(^^)
自分で触れるようになるとたのしくなるので
色々試してみてくださいね~

また何かあれば聞いて下さい。
よろしくです!

Posted by だーしゃ at 2005年09月20日 23:18

■ ◇◆kirari◆◇

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 こんにちワァ!kirariです!

ヘッダーの画像を1つにするにはどうしたら
いいんですか??

私のは、3つに分けられてて困っているんです・・・。

どうすればいいのか教えてくださァ~い!!!!


Posted by ◇◆kirari◆◇ at 2005年10月20日 01:43

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ◇◆kirari◆◇さんへ

こんばんはー
これはですね、スタイルシートでちょっと追加しないといけないんです。

background:#fff url(/_img/sky_blue/head.jpg) left;

このleftの後ろに no-repeat
と付け加えればOK.
是非やってみてくださいねー、わからなかったらまた聞いてくださいー8^^)

Posted by だーしゃ at 2005年10月22日 03:27

■ ◇◆kirari◆◇

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 こんにちワァ☆kirariです!!

やってみたんでが、画像が真中にポツン・・・。
っていう感じになってしまいました^^;

タイトルのところ全体的に画像を出したんですが
そしたら、画像がのびてしまいますかねぇ・・・?

どうしたらいいですか??教えてください!!
お願いします!!

Posted by ◇◆kirari◆◇ at 2005年10月22日 13:42

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■◇◆kirari◆◇さんへ

こんにちは、(^^)
ためしてみたんですね!
そして画像がやっぱり小さいですね。
こちら横幅が長いのを用意しないと伸びて
あんんまりきれいじゃなくなってしまいますよー
こればっかりはどうしようもないですね…

とにかく一度横幅が大きな画像を用意してみてくださいー
それを使うのが別とですよっ

Posted by だーしゃ at 2005年10月22日 14:58

■ 

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさま

はじめまして。Lunaと申します。

スタイルシートのヘッダーの替え方ですが何度やっても変更したいヘッダーが表示されずお手上げ状態です。。。(T_T)

#banner,#subbanner{
background:#fff url(/_img/sky_blue/head.jpg) left;


上記記述を、
<img src="/usr/momokamomoka/umi.jpg" alt="" />
変更したいこの写真urlをどう書き換えればよろしいでしょうか・・・。

教えてください、よろしくお願いします。m(__)m

Posted by at 2006年01月19日 18:04

■ Luna

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ↑すみません。名無しになってしまいました。
失礼致しました。

Posted by Luna at 2006年01月19日 18:06

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 Lunaさん

こちらなのですが、
URLのパスを書き換えてください。

説明している赤文字の部分ですよ。

/_img/sky_blue/head.jpg

/usr/momokamomoka/umi.jpg

まずは色々とやってみてくださいね。

Posted by だーしゃ at 2006年01月19日 18:22

■ Luna

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさま

こんばんは。
ありがとうございます!
無事変更できました。(^○^)

本当にありがとうございました。☆

Posted by Luna at 2006年01月19日 20:32

■ キラリ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃ様

はじめまして、オリジナルデザインを作成していますが何度やってもできません教えて頂けませんでしょうか。お願いします。

スタイルシートの
  (/_img/sky_blue/head.jpg)

 変更のアドレスが下記なのですが、何処から何処まで変えればよいのでしょうか?

http://img03.ti-da.net/usr/buraidaru/DSC00178%20の補正%20の補正-s.JPG

Posted by キラリ at 2006年01月27日 12:15

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■キラリさんへ

こんにちはっ。

まずですね。アップロードされる画像が日本語名だというのが問題ですよ。

なので、画像ファイルをパソコンでローマ字、とかにして、
UPしなおしてから、URLをスタイルシートに貼り付けてみてください。

それが原因ですねー。

Posted by だーしゃ at 2006年01月27日 16:31

■ キラリ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃ様

こんばんは、メール有難うございます。画像ファイルをローマ字に直したのが
         ↓

http://img03.ti-da.net/usr/buraidaru/DSC00178%20okinawa-s.JPG です。

何度も試みたのですができません。もう一度教えて頂けませんでしょうか。 お願いします。

Posted by キラリ at 2006年01月27日 22:05

■ キラリ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃ様

こんばんは、メール有難うございます。画像ファイルをローマ字に直したのが
         ↓

http://img03.ti-da.net/usr/buraidaru/DSC00178%20okinawa-s.JPG です。

何度も試みたのですができません。もう一度教えて頂けませんでしょうか。 お願いします。

Posted by キラリ at 2006年01月27日 22:09

■ дмIкд дмIкд☆。・:*★

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん!初のカキコです!
ブログのスタイルシートを自分でつくりたいんですが、やり方教えてください!

Posted by дмIкд дмIкд☆。・:*★ at 2006年01月29日 21:33

■ miki

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9  今回、こちらのページと友達に教えてもらいらがら色を変更したり、画像を入れたりすることが出来ました。とてもわかり易いです(^^♪
 また参考にさせてください。

Posted by miki at 2006年04月26日 13:39

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■キラリさんへ
すいませんきがつきませんでした(><)
こちらやっぱりファイル名が問題なので、
全てアルファベットにしてみてください、
そうすると多分できるので。
宜しくお願いいたします。

■дмIкд дмIкд☆。・:*★さんへ
おそくなったのですが、、
まずはどうしたいのかデザインを考えてみてくださいね。
それからですよー。

■mikiさんへ
こんばんは、コメントありがとうございます。
そして見ていただいてありがとうございました。
もっとわかりやすくできればなぁとおもってますよー
色々とみてくださいね。
宜しくお願いいたします。

Posted by だーしゃ at 2006年04月26日 22:28

■ hamu

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 はじめまして!!
だーしゃさんの講座のおかげで私のブログも改造できました♪
まえから「オリジナルデザイン」というものにあこがれていただけに感無量です(T-T)
これからもいろいろ勉強させてくださいペコリ(o_ _)o))

Posted by hamu at 2006年06月01日 00:11

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■hamuさんへ

こんにちは!コメントありがとうございますー。
自分で色々とデザインできたらやっぱりたのしいですよね(^^)!

色々とやってみてくださいー!たのしいですよ!

Posted by だーしゃ at 2006年06月01日 15:26

■ ロッキャン

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 初めまして こんにちは! だ−しゃさんのcss講座 とても為になりました! そして分かりやすい! またこれからも助けて下さいませ    
(^^)

Posted by ロッキャン at 2006年08月14日 13:24

■ りくレンジャーhaha

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん!!明けましておめでとうございます。。
ヘッダーの画像を変えたいのですが。。。
横の幅が足りません。。。
どうしたら1枚になりますか?
サイズを代えるとアップロードが出来ませんでした。。
(T▽T)尸~~SOS!!

Posted by りくレンジャーhaha at 2007年01月10日 21:57

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■りくレンジャーhaha さん

こんにちは!
ヘッダー画像が足りないんですね。

んー画像がUPできるのは300KBなので、
それ以下にしないといけないんですよ。。

画像を大きくするか、

#banner {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: url(http://img03.ti-da.net/usr/rikurenger/デザイン1.jpg) #0072d3 bottom no-repeat;
PADDING-BOTTOM: 0px;
PADDING-TOP: 20px;
}

↑をコピーして上書き貼り付けてください。

写真が真ん中になりますよー

Posted by だーしゃ at 2007年01月11日 12:09

■ りくレンジャーhaha

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 何とかできました。。。
ヾ(。ゝω・。)ノ゚+o。ぁレ)ヵゞ`⊂ぅ。o+゚ です!
もっと画像が綺麗になるように
いじってみたいと思います!!

Posted by りくレンジャーhaha at 2007年01月11日 16:54

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■りくレンジャーhaha さん

できましたかぁ(^^)!
あとは画像しだいですよ。
またわからないことあればご連絡くださいねぇ(^^)!
どうぞよろしくです!

Posted by だーしゃ at 2007年01月12日 00:15

■ mari

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 はじめまして、こんにちは。
TOP画像を変えようとがんばっていますが、
一つ質問があります。

画像のサイズですが
740×200とありますが、これを例えば
740×300というふうに変更することは可能ですか?

ご教授いただけると、とても助かります!

Posted by mari at 2007年04月24日 17:05

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■mariさんへ

こんにちはー、コメントありがとうございますー

これはすぐできますよーー。

まず、740×300の画像をUPして、

画像のURLを変更してください、そして

スタイルシート部分のheight の数字を 300にしてください。

↓↓↓↓↓↓↓↓↓↓↓↓

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



↑のようにするといいですよーー
まずはやってみて分らないところはまた聞いて下さいねーーー(^^)

Posted by だーしゃ at 2007年04月24日 18:17

■ ワヤン

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 はじめまして、いつも参考(勉強)さらていただいています。数字をあえて大きく・小さくしたりして、どこが動くのか変わるのかと自分なりにやっている今日この頃なのですが、1箇所挫折が・・・このヘッダーの画像を変えてみよう!で高さを調節するheight: ○○px;は分かったのですが、横幅を変えたい場合どうすればいいのでしょうか?画像が1センチほど2枚に渡ってしまいます。もちろん日々書く日記スペースも狭くなると思うのですが、まずはヘッダー画像を重視したくて。宜しくお願いします。

Posted by ワヤン at 2007年04月25日 13:15

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■ワヤンさんへ

こんにちはー、コメントありがとうございますー
早速ご質問のほうなんですが、これはスタイルシートがちょっと特殊なんですよね。

まず画像が二枚にまたがらないように指定します。↓

background:#6E00E0 url(http://img03.ti-da.net/usr/wayan/ban-hula2.gif) left bottom no-repeat;

こうすると2枚にまたがらなくなりますよー。
しかし、バックの青地がでてしまいますので、ぴったりの大きさの画像を用意したほうがいいですねーー。

もし真中寄せにしたいときは↑の所の left を削除してみてください。
色々試してみてくださいねー

Posted by だーしゃ at 2007年04月26日 07:59

■ ワヤン

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん有難うございました。
早速、チビが眠ってからやってみたいと思います。
うっかりしてたのですが、
お気に入りに入れてCSS講座ばかり気にとられていたのですが、
先日退院されたばかりなんですよね。
お忙しいときに質問ゴメンナサイでした・・
私のいとこも同じ診断をうけたものがいます。
体、大事にして下さい。

Posted by ワヤン at 2007年04月26日 11:28

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■ワヤンさんへ

とりあえず、今はそんな感じですねーー
でも時間はぼちぼちあるので問題ないですよーー

そしていとこさんも同じ診断うけたんですね、
どうでしたでしょうか、

とりあえず、僕はできる事をやりますです(^^)

Posted by だーしゃ at 2007年04月26日 19:59

■ こぢ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさんこんにちは♪ 私も参考にしてヘッダーのカスタマイズとタイトルの色の変更をしてみました☆
・・・が。
サイドバーがどうしても記事の下に行ってしまうんですが、これってどうしたらいいんでしょうか~?? 
但し、コメントを入れると元にもどるんですよー。
全くわからないです~(汗    教えてください~~。

Posted by こぢ at 2007年04月29日 18:29

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■こぢさんへ

いろいろと参考にいただいてありがたい限りですよー。
そしてーなのですが、今回のものは、どうやら

「狙いは?」というタイトルの記事がのなかの

タグがうまく閉じられていないようです。

どこかでちゃんと div のタグが閉じられていないとおもうので、
ちょこっと見てみてくださいねー。

Posted by だーしゃ at 2007年04月29日 19:51

■ こぢ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 あっっ!!! 治った~っっ♪♪何箇所かありました~(汗
ありがとうございます~~。 さすがですね! 感謝します~♪
これからも参考にします~。よろしくお願いします~^^

Posted by こぢ at 2007年04月29日 21:44

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■こぢさんへ

よかった~♪
ちゃんとなおったならなによりですよーー

タグはほんとちょっとしたことで崩れてしまうので、
閉じ忘れとかにきおつけてみてくださいねー

また分からないことあればきいてみてください~(^^)

Posted by だーしゃ at 2007年04月30日 07:29

■ しまばなな

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 はじめまして★
だーしゃさんの記事はすごく勉強になるのでたまに拝見していました。
今日、初めてヘッダーを変えてみました。
判りやすかったです。どうもアリガトウゴザイマス!!!

Posted by しまばなな at 2007年05月12日 14:29

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■しまばななさんへ
こんにちはー!コメントありがとうございます(^^)
参考にしていただいてありがたいかぎりですよー。
僕に出来ることでしかないですが、たのしんでくださいねー(^^)

Posted by だーしゃ at 2007年05月13日 08:53

■ Mr.スティービー

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん、お久しぶりです♪ さて、ヘッダーの画像を変えてみようとチャレンジしているのですが、管理画面>デザイン>オリジナルデザインが、管理画面が変わっていて、進む事が出来ません。  ビギナーの私にも分かりやすく教えて下さいねぇ~♪

Posted by Mr.スティービー at 2007年06月06日 09:04

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■Mr.スティービー さんへ

コメントありがとうございますーーー

そういえば管理画面変わってましたね、しまった。
早速ですが、変更しましたよ。

これいくつか変更しないとだめですねーー。
伝えてくれてありがとうございました!!

Posted by だーしゃ at 2007年06月07日 09:16

■ naoko

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 はじめまして!!お友達にこちらのブログを教えてもらい遊びにきました。
私も、テンプレートをカスタマイズしてみたい!と思い、こちらで勉強しています。
とても分かりやすくて、ド素人の私でも何とかできそうです^^
そこで、質問なんですが、ヘッダーの画像の高さを調整できることは分かったのですが、横幅も調整(広げたい)することはできるのでしょうか?
私が使った画像は700px×200pxで、ちょっと横幅が足りないようです。700→740くらいにしたいのですが。。。
やっぱり、そのサイズの画像を用意しないといけないのかな~?

Posted by naoko at 2007年06月08日 01:24

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■naokoさんへ

こんにちはー、こめんとありがとうございます(^^)

うーんと、画像の件ですけど、画像自体が小さい場合は、
大きな画像を用意していただくのがいちばんです。

しかし、その画像を中央寄せで使うことはできますよー。

今たぶん

background:#fff url(http://daxiazzz.ti-da.net/usr/-------/xxxxxxx.jpg) left;

↑のような記述があると思います。

ここのURLを自分の画像のに変更して、

left を center にしてみてください。

そうしたら中央に画像がくると思いますので(^^)

またわからなかったらコメントしてくださいねー。

Posted by だーしゃ at 2007年06月08日 07:31

■ TARO

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん、こんにちは。一件教えてください。
こちらの講座を参考にヘッダーの写真を変更を試みています。スタイルシートの
プレビューではうまく写真が変わっているのですが、登録をしても元の写真の
ままなのです。

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

お手数ですが、よろしくお願いします。

Posted by TARO at 2007年06月19日 17:58

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■TAROさんへ

こちらですねー、おそらくブログのキャッシュというのが絡んでいる可能性があります。
こちらはまずURLを変更していただいて、その後に
ブログの記事を投稿するか、ブログの設定などを変更してみてください。

そうするともしかすると変更が効くと思います。
ただ、本当の所はどうなのかわからないので、
まずは試してみてくださいねー(^^)

Posted by だーしゃ at 2007年06月20日 12:03

■ TARO

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさん、早速アドバイスありがとうございました。
画像変更したあと、ブログ環境設定を再登録し、読み込み直すとうまく
変更結果が反映されました。
これで好きなようにタイトル画像を変更して、楽しめます。

※ご回復、心よりお祈り申し上げます。

Posted by TARO at 2007年06月20日 12:31

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■TAROさんへ
いえいえとんでもないですよー、
ちゃんと表示ができてよかったです(^^)

色々と試してみてくださいね。
そしてお気遣いありがとうございますーー。

もうちょっと頭はがんばって治しますね。

Posted by だーしゃ at 2007年06月20日 17:00

■ Luna

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさま

大変ご無沙汰しております。
久しぶりにブログのテンプレをカスタマイズしようとしたのですが
どうしても真っ白になってしまいます。。。
何が間違っているのでしょう。。。(涙)

体調悪いときに申し訳ございません・・・。
よろしくお願いします。

#banner,#subbanner{
background:#fff url(http://img03.ti-da.net/usr/momokamomoka/blogtenple.jpg) left;

使用している画像はblogtenple.jpgという800×240のオリジナル画像です。

Posted by Luna at 2007年06月25日 23:36

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■Lunaさんへ
コメントありがとうござますー、そしてまっしろですね(><)
んとURLをみてみたんですが、

↓現状
http://momokamomoka.ti-da.net/usr/blogtenple.jpg

↓変えたい画像
http://img01.ti-da.net/usr/momokamomoka/blogtenple.jpg


現状を新しい画像に変更したいんですよね、
とりあえずいま現在は、現状のURLで適用されているようなんです。

それを変えたい画像に一度変えてみてください。

そして、もしかしたら設定環境が問題かもしれないので、
CSSを保存した後に、ブログの設定画面に行って
もう一度保存しなおしてみてもらっていいですか?

そしたら適用されるとおもいますので~~。

またできなかったらコメントしてくださいねー、
よろしくお願い致します。

Posted by だーしゃ at 2007年06月26日 07:24

■ Luna

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 だーしゃさま

おはようございます。
出勤前におじゃましたら
だーしゃさんがお返事書いてくださっていたので
早速再TRYしました!
できましたー!^^
ありがとうございます。
>img01.ti-da.net の部分が肝心なんですね!

以前は変更したい画像の名前(blogtenple.Jpg)だけ
注意してときどき変更していたんです。。。
本当に治ってうれしいです~♪

だーしゃさん、体調の優れないときに
本当にありがとうございました。
沖縄はもう夏まっさかりですよね?
ゆっくりゆっくりリハビリしてくださいね。

Posted by Luna at 2007年06月26日 07:52

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■LUNAさんへ

なおってよかったです(^^)!!
実際場合がどうなのか、僕の考えと違うかも知れない場合があるので、
どきどきしてました(^^)

でもよかったーー^^

沖縄はどんどん夏になっていきますよー。
あと体調はたたきなおすしかないです!
心配してくださってありがとうございます。
がんばりますーー(^^)

Posted by だーしゃ at 2007年06月26日 07:58

■ さとこ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 テンプレートに3カラムの火の鳥を使いたいのですが、今使ってるやつではデザインを変えれたのに、火の鳥ではできなくて困ってしまっています。
もし良ければ教えてください・・・

Posted by さとこ at 2007年07月12日 16:55

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■さとこさんへ

火の鳥にテンプレートが変更しないんでしょうか??
うーーんもしかしたら、キャッシュというのの問題かもしれないので、

火の鳥に変更して、設定を何か変更してみてください。

そしたら変更されると思います。

また設定はその後戻せば大丈夫ですから(^^)

Posted by だーしゃ at 2007年07月13日 09:29

■ さとこ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 わかりづらい質問ですみませんでした。
テンプレートの変更はできるのですが、火の鳥のテンプレートのタイトルの辺りの変更ができないんでした。。。

Posted by さとこ at 2007年07月13日 16:07

■ さとこ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 上と同じ人です。
URLを入れる場所が何度さがしても見つからないのです。。

Posted by さとこ at 2007年07月13日 16:08

■ たかかずたかかず

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ありがとうございました。
おかげさまで変更することができました。

Posted by たかかずたかかず at 2007年09月05日 13:06

■ だーしゃだーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 たかかずさんへ

コメントありがとうございますー、
そしてかわいいお子様の写真ですね^-^

大きくなるのが楽しみですねぇー(^^)

Posted by だーしゃだーしゃ at 2007年09月06日 09:28

■ Toshigallagher

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 初めまして Toshigallagherと申します

こちらの記事を参考にさせて頂き、自分のブログの画像も換えてみました
大変参考&勉強になりました ありがとうございました~ m(_ _)m

Posted by Toshigallagher at 2008年05月28日 17:18

■ だーしゃ

だーしゃのCSS講座 ヘッダーの画像を変えてみよう!:沖縄からヨッシャー(=^^)9 ■Toshigallagher さんへ
コメントありがとうございますっ。(^^)

是非こちらドンドン利用してつかってみてくださいーー(^^
やっぱり自分用に変更した方がなんか楽しいですからねー。
色々と触ってみてくださいね^^

Posted by だーしゃ at 2008年05月28日 19:49

      
 

■ヨッシャーカテゴリー
CSS&ブログの活用講座!
沖縄 写真
・└ 沖縄ちゅら海写真
・└ 空 写真
・└ 沖縄 人写真
・└ 動物 写真
沖縄スタイル
沖縄不思議ワールド
IT?
JOY WORK
記憶喪失障害的闘病生活!?
おいしいモノ!
・└ オススメレストラン
・└ カフェ
・└ 食堂
・└ 沖縄そば
沖縄観光クーポン券情報