« カスタマイズ12(プロフィール) | トップページ | 万華鏡(カレイドスコープ) »

2004.05.13

背景画像食い込み訂正(涙)

以前ここで背景画像を食い込ませるテクを紹介しましたが、私の方式だと固定リンクのページでコメント部分に余計な背景画像が表示されてしまう不具合があることが判明いたしました。
あれからいろいろ試行錯誤しまして、ようやく不具合を解消することができました。
この方式を採用してくださったみなさまには、大変ご迷惑をおかけしたことをお詫びいたします。

修正した方式では、コメントを書いて「確認ボタン」を押した後に飛ぶページは、「#banner」の画像のみが表示されることになります。
以前の方法だと「#banner」の画像の下に、位置のずれた「#center」の画像が表示されていたので(うわーーん)、今のほうが多少スマートになるかなとは思います。

*修正した箇所

#center {
width: 400px; }
.content {
background-image: url(center2.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;}
.content {
background-color: transparent;}

「#center」で指定する背景画像より「.content」クラスの背景画像の方が上に表示されます。
そのため、「.content」の背景色を透明にしています。
すいません、transparent(透明)というタグ、ついこないだ知りました~~~っ(涙)。

考えてみたら、「#container、#left、#right」と、他のとこは#つきタグだったのに、真ん中だけ「.content」ってのも変だよな、とは思っていました、あはははっ(っておいっ)。
おのれは、クラス(.)とID(#)の違いも分かってなかったのかと・・・・。
コメント部分だけポコッと画像が出たのは、入力部分のINPUT typeあたりが原因か、あるいはこの部分が子セレクターになってるのか(親子関係にあるセレクターは親の背景画像を継承してしまうのです。これはニフティの罠か?)、とも思いつつ、結局よく分かりませんでした、本当にごめんなさいっ(涙)。

以前の「カスタマイズ11(背景を食い込ませる2)」も同時に修正してあります。
うううう・・・やっぱ私がこんなことやったのは分不相応だったのか・・・・。

ついでと言っては何なんですが「#center」の幅を400pxにした場合、コメント本文入力部分のテキストエリアが少しはみ出てしまうので、以下のタグを入れるいいみたいです。

#comment-text{
width: 365px;
}
370pxだと微妙にはみ出るようです

|

« カスタマイズ12(プロフィール) | トップページ | 万華鏡(カレイドスコープ) »

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

コメント

しのぶはtransparentの呪文を覚えた!!

で、bodyに画像を置いて、leftやrightもtransparent
にすれば、画像の分割はしなくてええのでは?

投稿: 南郷力丸 | 2004.05.13 20:58

レベル3くらいにはなったかしら(涙)。
ああもう、おっしゃる通りです。
BODYに置けば、固定リンクやコメント確認のページでもきちんと表示されるようです。
どうしよう、この方式は完全改訂版として再掲するか、それとももうカスタマイズものは個人的にやってる方がいいかも、とマジで考え中です。

投稿: しのぶ | 2004.05.13 21:09

 うちも「食い込み画像」は分割しています。
 というのは、#leftと#centerとでは、バックを違う色にしているので「ransparentの呪文をとなえる」わけにはいかんので。
 こういうのは、いろいろやってみて、ああでもない、こうでもないというのがあった方が、見ている方も参考になるだろうし、引き続き、いろいろやってみたら?

投稿: 南郷力丸 | 2004.05.14 03:35

ううう、ありがとうございます・・・。
こういうの何て言うんだっけ?
失敗は成功の元?破壊と建設?ヒット・エンド・ラン?
久しぶりにコーディングソフトをまともに使うようになってタグもだいぶ思い出しました(汗)。

リトル松井にライバル心燃やしてたんですが、これって、みんなのとは違うテンプレート使ってるよね。

投稿: しのぶ | 2004.05.14 15:32

コメントを書く



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




トラックバック

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

この記事へのトラックバック一覧です: 背景画像食い込み訂正(涙):

« カスタマイズ12(プロフィール) | トップページ | 万華鏡(カレイドスコープ) »