CSS サイドバーの背景を下まで2
こんどは・・・・
サイドバーに背景画像を設定している場合です・・・
＋＋ 注意 ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
背景が片側しかつきません・・って質問が多いです
画像の作り方が間違っています
サイドバーの部分だけの画像を使っています
http://stat.ameba.jp/user_images/07/98/10096763391.jpg
下で説明している画像です↑みなさまが作らなくてはいけない画像もこのような画像です
ダウンロードして確認下さい
横幅が760pxのスキンですからこの画像も横幅760pxで作っています
ベーシックでしたら横幅は800pxになります
この画像が下に繰り返して表示されて↓このような感じでスキンの背景になります
http://stat.ameba.jp/user_images/20110522/10/exlink/6d/0c/j/o0760057611243244370.jpg
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
はっきりいって・・・
前回と同じです ！！！
文字が見にくくなりますので
こんな背景画像を使う方はおられないとは思いますが
説明をわかりやすくするためにこのようなスキンで説明します・・・・
やはり前回と同じように背景画像を作ります
前回は単色でしたので縦はどんなサイズでもかまいませんでしたが
今回は柄がありますから縦の切り方には注意ください
サイドに指定した背景画像の高さと同じになるはずです
同じでないと繰り返しがうまくいかなくなります・・・・
そんなときには・・・魔法の？ＣＳＳ・・・
#main,
#sub_a,
#sub_b {
padding-top: 100px;
}
あ～ら・・・ふ・し・ぎ・・・・ 上があいちゃいました
※このＣＳＳは画像をコピーし終わったら削除してください
または、保存しないでプレビュー画面をプリントスクリーン でコピーしてください
背景画像によっては100px以上あける必要が有る場合もあります・・・・
背景の繰り返しになりますのでうまく切り取らないと繰り返したときおかしな模様になってしまいます
↑もし上のように切り取ったら繰り返しがうまくいかなくなりますよね・・・わかりますか？
こんな画像が出来たら・・・・・
/*サイドバーの背景を下まで*/
#wrap{
background-image: url(画像のURL);
background-repeat: repeat-y;
}
まったく前回
と同じです・・・・
ただ・・・・今回は柄があります・・・・
前回の単色では気になりませんでしたが
柄を使うとサイドバーの終わりと下の背景とがずれた場合は気になります・・・
※全部の場合でずれるとは限りません・・・ピッタリな場合も、気にならない場合もあります
もし、気になる場合は・・・・
サイドバーの背景は消しましょう・・・・・？
消して透明にすれば・・・・！！
そう・・・その下の背景だけになるから切れ目なんて物はあるはずがない・・・・
/*サイドバーを透明に*/
#sub_a,
#sub_b {
background-color: transparent;/*透明に*/
background-image: none;/*背景画像をとる*/
}
サイドを透明にして下の#wrapに設定した背景画像だけを表示させます
ためしに #wrapにこんな画像を設定してみます
はっきりわかる画像ならよかったのですが・・・ 手抜きな画像ですみません・・・
サイドバーの背景はそのままの場合・・・ 境目がわかります・・・
サイドバーを透明にした場合・・・・・
※今回紹介したのはすでにサイドに画像を使った背景を設定されている場合の方法です
これから作成する方ははじめから#wrapに設定する背景画像だけを作ればOKです
スキンによっても違うのですが・・・スタンダードのグリーン、ピーチ・・などのスキンの場合は
横760pxのスキンの場合 左170px 中420px 右170px で画像を作れば合うと思います
・・・・次回は画像を使わない方法です
ちょっと訳ありな方法なんで・・・・
あっ・・・別に悪い事ではありませんよ
以前に海外のサイトで見つけた方法なんですが
今回記事にするにあたって探したのですが見つからないんです・・・
そこに書かれていた数字を思い出せないというか覚えていないというか・・・
どうなることやら・・・・
CSS サイドバーの背景を下まで3 ←アメブロとは相性が悪いです
CSS サイドバーの背景を下まで 32768 ←アメブロとは相性が悪いです
クリックしていただけるとうれしいな