« このシャンプーはいいよ~~ | トップページ | イタチョコシステムのお店 »

2004.02.15

カスタマイズ7(画像を使うにあたって)

今日は今までの話に少しだけ補足をします。
私のオリジナル・スタイルシートは「css」というフォルダを作ってそこにアップロードしていたので
http://shinobu.cocolog-nifty.com/apty/css/mystyle.cssというURLになっています。
ですので、もしも「bg.gif」という画像を背景にするとしたら、その画像ファイルも同じ「css」フォルダにアップすれば

body {
background-image: url(bg.gif);
}

と書くだけでいいのですが、たとえば自分のホームページなど別なURLから画像を利用する場合、
URLを全部、つまり絶対パスを書かなくてはいけません。
(ちなみに、上のような書き方を相対パスと言います)
こういうのが絶対パスです(笑)。

この画像のプロパティを見ると、
http://www.cocolog-nifty.com/images/logo_cocolognavi.gif
となっていて「こいつココログトップページから勝手に画像を持ってきやがったな」ってのが分かります(笑)。
この画像を背景に使いたい場合は(私はしたくないけど)

body {
background-image: url(http://www.cocolog-nifty.com/images/logo_cocolognavi.gif);
}

なんてやると、なかなかウームって感じになりますが、ニフティに怒られても私は責任持ちません(笑)。
あるいは、スタイルシートの置き場所とは別に画像を置くフォルダを作っておきたいの、って場合は

body {
background-image: url(image/bg.gif);
}

なんて書き方もあります。
「image」ってフォルダを作って、そこに置いた画像を表示させてる、ということですね。
「あれえ、せっかくの画像アップしたのに表示されないぞ???」なんて時は、ちょっと確認してみてね。

さて、今までいくつかカスタマイズについて書いてきましたが、過去のタイトルがあまりにわかりにくくて自分でも何やったのか忘れてきたので(笑)、全部なおしてみました。
これで、少しは分かりやすくなったかな???

|

« このシャンプーはいいよ~~ | トップページ | イタチョコシステムのお店 »

ウェブログ・ココログ関連」カテゴリの記事

コメント

久しぶりに見に来てみたら・・・。

内容がマニアック~(笑)

日記書くのに、ココログ便利そうだなぁ~。
NIFのお手軽コース1(月額250円コース)でも使えるのかなぁー(汗)
お手軽コース1って、ホームページ持てないんだけどねぇ・・・。

投稿: sin | 2004.02.19 21:03

はいはい、お手軽コースでも何でもニフティのIDを持っていれば
誰でも作れるそうですよ~。
最初の設定がすげえ面倒だったけど(難しくはないんだけどね)、
それさえガマン(笑)すれば、あとは便利かもねっ。
ココログ作ってるひと、私のまわりではまだ少ないから、
sinさん、一発やってみてよ(笑)。

投稿: しのぶ | 2004.02.19 21:13

よっしゃーこれでヘッダーに画像貼れるぜ!

って勢いづいてCSSを設定してみたものの、上手く行かず2日間悩んでしまいました。

しのぶさんとはCSSファイルのパスが違ってた。。。
CSSファイルのパスの位置から画像ファイルの相対パスを指定して、出来ましたよ!

投稿: Yoshida Kazuhiro | 2004.03.11 16:11

しのぶさん、はじめまして!


こちらのカスタマイズの記事を参考にさせて頂いて
私のBlogも手を加える事ができました。
ありがとうございました。。。

1度画像を背景にしようと試みたのですが、失敗★
もう時間が遅くて眠かったので、何がイケなかったのか
まだ原因はわからないのですが・・・^^ゞ
でもメゲずに頑張ろうと思います!

投稿: ちぃ | 2004.12.09 23:05

>ちぃさん
こちらこそ、初めましてっ!!

カスタマイズ、がんばってらっしゃいますね~。
私なんかの記事が参考になれば、本当に嬉しいです。

画像を背景にする件、もしもよろしかったら
スタイルシートをアップしてみてくださいますか?
ちょっと拝見して、気づいたことがあったら
コメントに書かせていただこうかな、と思います~。

投稿: しのぶ | 2004.12.09 23:38

しのぶさん、こんにちは!


遠慮なくやってきました~^^

実はですね、やはり画像を背景に出来ないんですよ。
私のスタイルシート見てもらえますか?
新しく~files/にアップしましたが、背景画像以外はちゃんと読み込んでるので(^^;、
『スペルを間違えたか』と思ったのですが、自分ではもう解からなくなってしまました。。。
根本的な何かを勘違いしてるのかも???^^

お忙しいところ済みませんが、時間のある時でいいのでヨロシクお願い致します。

ふぅぅ、疲れた。
これか笑点でも見てリラックスしてきます~

投稿: ちぃ | 2004.12.12 17:34

さっそく拝見しました~。
ちぃさんのスタイルシートでは背景画像の指定が

BODY {
BACKGROUND-IMAGE: url(blogup/bg.gif); BACKGROUND-REPEAT: repeat
}

となっていますが、画像の指定先がずれちゃってるみたいですねっ。
URLの指定先に「../」を書き加えてみてください。

BODY {
BACKGROUND-IMAGE: url(../blogup/bg.gif); BACKGROUND-REPEAT: repeat
}
こんな感じ。

でも相対パスで書くと、間違える可能性が大きいので
私は絶対パス(httpで始まるURL)で書くようにしてます。
ちぃさんの場合はこんな感じですね~。

BODY {
BACKGROUND-IMAGE: url(http://chi-104.cocolog-nifty.com/104blog/images/bg12.gif);
}

ちょっとこれでトライしてみてください。
蛇足ですが、背景画像はデフォで繰り返しになるので、
BACKGROUND-REPEAT: repeat
は、書かなくてもいいみたいですよ。

>>これか笑点でも見てリラックスしてきます~
うんうん、まあ気楽に行きましょうねっ。
私は「新選組!」の最終回を見て号泣しながら、
ちぃさんのスタイルシートを見てました(爆)。

投稿: しのぶ | 2004.12.12 22:22

しのぶさん

うわ~ん、早速ありがとうございます~
しかも号泣しながら見てくれたとは・・・(ノД`)
きっとその頃私はサッカー観ながら絶叫してました^^。

お蔭様でちゃんと表示されました!嬉しいです♪
これからもコツコツと頑張りますね。ベーシックのままで。。。


投稿: ちぃ | 2004.12.13 00:09

>ちぃさん
やった~~~っ!!!
大成功ですねっ!私まですっごく嬉しいです!!!
すっかりクリスマスの雰囲気ができましたねえ。

そうか、ちょうどあの時間はサッカーも大変なことになってたんですよね~。
私は幕末がけっこう好きで(爆)、「新選組!」は毎週見てたので
こればっかりはハズせませんで・・・。

お互いベーシックのままで(笑)がんばりましょうねっ。
容量も普通に使っていれば、ベーシックでも2年は保ちそうです(笑)。

投稿: しのぶ | 2004.12.13 22:53

はじめまして。
kimuraといいます。

MTのようなCMSではパス設定も大変ですよね。
私も少し経験があります(笑)。

「絶対パスと相対パス」という記事で、トラックバックさせていただきましたので、よろしくお願いいたします。

投稿: kimura | 2006.02.12 18:34

>kimuraさん
ていねいにコメントいただいてありがとうございます~。

そうですねえ、やはり相対パスってちょっと間違えると表示できなくなるから
できれば画像などは絶対パスで書いた方が安全だと思いますね~。
もちろん、コーディングソフトが自動的に処理してくれる分には
パスが相対か絶対かなんて意識しないで済むけど
手書きで書く場合は、私はすべて絶対パスにしています。

・・・中には「file:///C:/マイドキュメント/gazou.jpg」なんて書いてあったりして
そりゃアナタは見えるだろうけど、他の人は誰も見えないぞ、
ってのもありますねっ(笑)。

投稿: しのぶ | 2006.02.15 18:30

nice articles

投稿: ugg fluff momma black-They are sexy | 2013.10.24 19:28

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12358/198020

この記事へのトラックバック一覧です: カスタマイズ7(画像を使うにあたって):

» カスタマイズ初心者 [milchan]
 なんとかみなさんのおかげでタイトルに画像を表示してタイトル文字の色も変えることができました。  素直にcssファイルと同じフォルダに画像をおけばいいのに、つい... [続きを読む]

受信: 2004.02.15 14:25

» Opus 47:Mission Complete? [Take the え~train ]
 さて、かねてより頭を抱えていたスタイルシートだが、大体使える目処が付いたので「SHINOblog」さんや「Stylesheet Stylebook」さん、ある... [続きを読む]

受信: 2004.02.28 10:54

» スタイルシートのアップロードはだめになったの? [point of view point]
 えー、前のエントリの続き。画像のアップロードの方法が、記事作成時のアイコンクリ [続きを読む]

受信: 2004.12.10 12:36

» 絶対パスと相対パス [CGI Perl ネットビジネス用プログラムの開発日記 ~ CGIマガジン]
  CGIファイルを設定するとき意外でも、普通にホームページを作成するときなどに... [続きを読む]

受信: 2006.02.12 17:59

« このシャンプーはいいよ~~ | トップページ | イタチョコシステムのお店 »