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 ←アメブロとは相性が悪いです
クリックしていただけるとうれしいな
アメブロさま～ 先ほどからフォトが・・・・
先ほどからフォトが・・・・
消えました？？？？
ページの上にあったノートのリンク・・・
背景にあった付箋紙・・・・
幅が800px以上なのでフォトにアップしてあったんです・・・・
突然・・・・ 消えました・・・・
フォトを見ても 真っ白！！！？
ど～すればいいんですか～？
そのうちになおりますか～？
諦めた方がいいですか～？
ＣＳＳと違ってコレばかりは・・・・
アメブロさ～ま～！！！！！！！
■ 追 記 ■
15分ほどで復旧しました？
やはり・・・・アメブロさま相手に素早い反応はやめた方が良いですね・・・
記事がアップできない場合のように・・・・
画像がアップできない場合のように・・・・
ＣＳＳが更新できない場合のように・・・・
１回寝ちゃって・・・
起きてもまだダメだった場合だけ騒ぎましょう・・・・
失礼しました・・・・・
・・・でも
前に画像フォルダーのサムネイルの画像が消えたことがあって・・・
オリジナルはあるのですがサムネイル画像が消えちゃったんです・・・？
こんなこと意図的には出来ません
それからできるだけオリジナル画像のサイズを記事に合わせて
オリジナルを貼り付けるようになったんです・・・
オリジナルならクリックしてもしかたがないのでリンクを外しています
私のブログで画像クリックの出来る画像がほとんどないのはそんなことからなんです
■ またまた 追 記 ■ AM0:27
また・・・・ 不安定になっているようですね・・・・
昨日メンテナンスやったばかりではないんですか・・・・
もう少し様子をみてから対応を考えよう・・・
こんなときは寝ちゃうにかぎる・・・・
お休みなさい・・・・
あっ・・・・
日めくりカレンダーの数字は・・・・
yahooアドパートナーを入れるのに文字数オーバーになったので
日めくりカレンダーも外部ファイル化したのですがうまくいかなかったようで・・・
アメブロさまが原因ではありません・・・・
CSS サイドバーの背景を下まで
記事の長さの関係で・・・・
サイドバーの背景が途中で切れてしまっているブログが多くあります
下まで延ばしませんか？
カンタンに説明すると上のスキンの場合は 緑・白・青 の画像を背景に使うんです
ということで画像を作らなくてはなりません
画像ソフトで作ってもいいのですがカンタンに作っちゃう方法・・・
まず横に出来るだけ何もない部分を表示しておいて
プリントスクリーン で画像をコピーしてWINならペイントとかに貼り付けます
ペイントに貼り付けたら背景に使えそうな部分を切り取ります
下のような画像が切り取れればベストですが
一部文字とかがあった場合はないとことをコピーして貼り付ければＯＫです
縦は背景の繰り返しを使いますので1pxでも大丈夫ですが・・・
画像のURLを調べるときにクリックしにくいので適当なサイズで・・・・
↑この画像が出来たら画像フォルダのアップして画像のURLを調べておきます
そうしたらCSSの編集の最後に
/*サイドバーの背景を下まで*/
#wrap{
background-image: url(画像のURL);
background-repeat: repeat-y;
}
もし、背景が小さかった場合はサムネイルの縮小された画像のURLを使っています
その場合は画像のURLから _s を削除すればオリジナル画像になります
http://stat.ameba.jp/user_images/4a/2b/10012345_s.jpg
↓ _s を削除
http://stat.ameba.jp/user_images/4a/2b/10012345.jpg
イメージ的にはこんな感じ・・・・
※たぶん後・・・２回続きます
最後に一番カンタンな方法をアップしますので
それを読んでからチャレンジ下さい・・・・
なんで最後に・・・・？
チョット・・・訳ありなんです・・・・・
あっ・・・ でもこれが正攻法なんで試してみてください
次はサイドバーの背景に画像を使った場合のやり方です・・・ まっ・・・同じなんですがね・・
CSS サイドバーの背景を下まで3 ←アメブロとは相性が悪いです
CSS サイドバーの背景を下まで 32768 ←アメブロとは相性が悪いです
クリックしていただけるとうれしいな