« カスタマイズ11(背景を食い込ませる1) | トップページ | おニューの帛紗 »

2004.04.19

カスタマイズ11(背景を食い込ませる2)

いよいよスタイルシートの作成です。
それぞれのタグは「カスタマイズ11(背景を食い込ませる1)」で詳しく解説しています。

バナー部分の幅と背景の設定

#banner {
height: 120px;
padding: 25px;
background-image: url(upper.jpg);
background-repeat: no-repeat;
background-position: left top; }
タイトル部分
高さを指定
タイトル余白
背景画像のファイル名を指定
背景画像は繰り返しなし
背景画像は左上寄せ

背景を覗いた全体(コンテナ)の幅と背景の設定

#container {
width: 800px;
border-right: 1px solid #66CC66;
border-bottom: 1px solid #66CC66;
border-left: 1px solid #66CC66; }
背景を覗いた全体
幅を指定
ボーダーは緑色で1pxの実線

borderは私は上だけ何も指定しなかったのでborder-right、border-bottom、border-leftの3辺を個別に指定してるけど、四辺を囲みたい場合は
「border: 1px solid #66CC66;」のみの記述でオッケーです。
もちろん、4辺それぞれ別な色に指定することも可能です(笑)。
上部は「border-top: 1px solid #66CC66;」のように書きます。

左サイドバーの設定

#left {
width: 200px;
background-image: url(left2.jpg);
background-repeat: no-repeat;
background-position: left top; }
左サイドバー
幅を指定
背景画像のファイル名を指定
背景画像は繰り返しなし
背景画像は左上寄せ

右サイドバーの幅と背景の設定

#right {
width: 200px;
background-image:url(right2.jpg);
background-repeat: no-repeat;
background-position: left top; }
右サイドバー
幅を指定
背景画像のファイル名を指定
背景画像は繰り返しなし
背景画像は左上寄せ

記事部分の幅と背景の設定

#center {
width: 400px;
background-image: url(center2.jpg);
background-repeat: no-repeat;
background-position: left top; }
記事部分
幅を指定
背景画像のファイル名を指定
背景画像は繰り返しなし
背景画像は左上寄せ

記事部分の背景の設定
固定リンクのページで余計な画像が表示されるのを防止します。
「#center」で指定する背景画像より「.content」クラスの背景画像の方が上に表示されます。
そのため、「.content」の背景色を透明にしています。

.content {
background-color: transparent;}
記事部分
背景は透明

background-image: url(center2.jpg);」などの画像ファイルは自分が作ったファイル名を指定してください。
画像指定の仕方は「画像を使うにあたって」を参照してねっ。
一個一個の設定が面倒だったら、このタグ全コピペして画像のファイル名とボーダーの色だけ変えれば使えると思います(笑) 。

|

« カスタマイズ11(背景を食い込ませる1) | トップページ | おニューの帛紗 »

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

コメント

こんにちは~しのぶさん!
いや、今からはしのぶ先生と呼びましょう!

すごいですね~ビックリです、
今の私にはチンプンカンプンですが勉強させて下さいね。

あちこちブログを見ていますが「くいこませる」
手法はしのぶ先生オンリーのような気がします。(脱帽)

投稿: おきなわ | 2004.04.20 17:10

はじめまして(^^)
ココログをカスタマイズする時に、
参考にさせていただきました。
ありがとうございました。
ブログにリンクも貼ってみたのですが。
いいでしょうか?

投稿: ともよ | 2004.07.22 23:27

>ともよさん
こちらこそ初めましてっ!!!
リンクはもうガッツンガッツン!貼ってやってくださいねっ。

でも、私なんかのブログで良かったのかな(汗)、
もっともっとすごいカスタマイズ方法を紹介してる方が
たくさんいらっしゃるんで、恐縮しまくっちゃいます~。
「オマエの文は意味分からん」ってのがあったら(笑)
遠慮なくおっしゃってくださいねっ。

これからもよろしくお願いしま~す!

投稿: しのぶ | 2004.07.23 18:40

 またまたまた参考にさせていただいたので、こちらの記事へリンクを貼らせていただきました。
 食い込ませた訳ではないのですが、とても参考になりました!
 いつもありがとうございますm(__)m

投稿: リカ | 2004.07.29 16:36

>リカさん
コメントつけてくださってありがとうです~。

何か不明な点がありましたら、
遠慮なくおっしゃってくださいねっ。
たとえば、文章が読みにくいんだよ!とか(大汗)。

私も夏の帰省とかで良い写真が撮れたら
背景変えてみようと思ってま~す。

投稿: しのぶ | 2004.07.30 00:41

コメントを書く



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




トラックバック

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

この記事へのトラックバック一覧です: カスタマイズ11(背景を食い込ませる2):

» ココログデザイン(背景を食い込ませる改良編) [SHINOblog]
ひさびさにココログのデザインカスタマイズです。 私がいつも使っている、背景画像を記事部分にまで表示さ [続きを読む]

受信: 2006.01.29 18:36

« カスタマイズ11(背景を食い込ませる1) | トップページ | おニューの帛紗 »