た け の こ 生 活

アクセスカウンタ

zoom RSS CSS編集・背景画像を敷き詰める

<<   作成日時 : 2005/01/22 02:45   >>

ブログ気持玉 0 / トラックバック 1 / コメント 6

またまた時間が空いてしまいました。前回は背景に色を指定しましたが、今回は画像(壁紙)を配置したいと思います。

ここで問題は、ウェブリブログの場合、ファイルを個別にアップロードするという機能がまだありません(いずれは付加されるものと思いますが)。画像ファイルは記事に表示することを前提にしてのみ、アップロードできる仕組みとなっています。

そのためブログの背景に壁紙画像を敷き詰めるには、必要な画像ファイルを、

1.別の場所(自分のホームページのフォルダなど)に、アップロードする
2.壁紙画像を記事に表示させて、その画像を使う


の、ふたつの方法があります。

すでにホームページをお持ちの方は、1の方法で。
お持ちでない方や、FTPでのファイル転送がわからない方は、2の方法を使ってください。
この記事では1についてお話しするので、2の方法を使われる方は、この記事を飛ばして次回の記事をお読み下さい。




まず壁紙用の画像を用意します。ここでは仮にその画像のファイル名をback.gifとしておきます。

back.gifをFTPを使って、ご自身のホームページのフォルダにアップロードし、そのURLをメモしておきます。

例えばご自身のホームページのアドレスが、
http: //www5a.biglobe.ne.jp/~homepage/  の場合、
index.htmlと同じ一番上の階層フォルダ内に保存したのなら、画像ファイルのURLは、
http: //www5a.biglobe.ne.jp/~homepage/back.gif

下層フォルダ(例えばimageフォルダ)の中に保存したのなら、
http: //www5a.biglobe.ne.jp/~homepage/image/back.gif となります。

アップロードが終わったら、ブラウザのアドレスバーにこのURLを入力し、正しく画像が表示されるか確認しておきましょう。この時画像は敷き詰められるのではなく、ブラウザの画面左上に1枚だけ表示されます。
うまく表示されたら、このURLをコピーしておきます。




ウェブリブログの設定画面に行きます。
前回と同じく下記の画面です。


/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
}



見つけたら以下のように変更して見ましょう。赤字の部分はコピーしたご自身の画像のURLを入れます。
この時先に背景色を設定していたら、その行は削除しておきます。背景色と背景(壁紙)画像をどちらも設定した場合、下の行に設定している方が有効になります。
今回もコロンとセミコロンに注意。backgroundの後ろはコロン、行の終わりはセミコロンです。


body{
background:url("http: //www5a.biglobe.ne.jp/~homepage/back.gif");
}




変更したら、「更新」ボタンをクリックし、、ブログを確認してみましょう。

うまく表示されない場合、ほとんどの場合がタイプミスが原因です。もう一度コロンやダブルクォーテーション、()、URLなどを確認してみてくださいね。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(1件)

タイトル (本文) ブログ名/日時
背景画像を敷き詰める(その2)
今回は背景画像をブログ内の記事に表示させて、その画像をブログの背景に使う方法です。 ...続きを見る
た け の こ 生 活@WebryBlo...
2005/02/11 23:32

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(6件)

内 容 ニックネーム/日時
初心者で全くcssがわからない私ですが、どうしても背景をいじりたかったのでした。「上級者用」とあったのですが、「やりながら勉強する」っていうのもありだと思って。ちょっとしたこと(背景画像をどこに入れるかなど)がわからなくてblogもストップしていたのですが、ちょうどたけのこ生活さんの記事を見つけて天にも昇る気持ちでトライしました。助かっている人、いっぱいいると思います。今後もよろしく。
http://min-and-mint.at.webry.info/
ミントのみん
2005/01/24 00:34
コメントありがとうございます〜。お役に立ててうれしいですっ!
あ、おんなじ色使いですね。背景が違うだけで、印象も違って個性が出ますよねぇ。(ガーデニング、うらやましいです。土いじりが苦手なので)(^_^;)
これからも少しずつ更新していきますので、よろしくお願いします。
たけのこ(管)
2005/01/24 02:55
ミントのみんさま、わかります!
でも、一歩進んだんですねえ。すごいです。見習わねば!
私も、いつかたけのこさんのBlog見ながらトライしようと思いつつ、ズルズルずーっと同じ背景。実は、偉そうに友人には、ここ紹介したりして^^;)
エルクラブ@WebryBlog 
2005/01/25 00:20
エルさんもやってみそ〜です。
なかなか雰囲気変わってうれしいですよ。(^o^)/
たけのこ
2005/01/25 01:03
きゃはー (+--)/(^0^)ゞ面目ないぃ!
春くらいまでにはリニューアルしたいですぅ。
エルクラブ@WebryBlog
2005/01/25 11:54
簡単にいじれるようになりたいけど、いじると「さらに」くずれそうで・・。
でもたけのこさんのblogの文章は、わかりやすくてありがたいです♪
これからも拝見させてくださーい。
ミントのみん
2005/01/25 23:42

コメントする help

ニックネーム
本 文
CSS編集・背景画像を敷き詰める た け の こ 生 活/BIGLOBEウェブリブログ
文字サイズ:       閉じる