CSS サイドバーの背景を下まで | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

CSS サイドバーの背景を下まで

記事の長さの関係で・・・・

サイドバーの背景が途中で切れてしまっているブログが多くあります


下まで延ばしませんか?




カンタンに説明すると上のスキンの場合は 緑・白・青 の画像を背景に使うんです



ということで画像を作らなくてはなりません

画像ソフトで作ってもいいのですがカンタンに作っちゃう方法・・・


まず横に出来るだけ何もない部分を表示しておいて

プリントスクリーン で画像をコピーしてWINならペイントとかに貼り付けます




ペイントに貼り付けたら背景に使えそうな部分を切り取ります

下のような画像が切り取れればベストですが

一部文字とかがあった場合はないとことをコピーして貼り付ければOKです

縦は背景の繰り返しを使いますので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




                         イメージ的にはこんな感じ・・・・



※たぶん後・・・2回続きます

 最後に一番カンタンな方法をアップしますので

 それを読んでからチャレンジ下さい・・・・

 なんで最後に・・・・?

 チョット・・・訳ありなんです・・・・・



あっ・・・ でもこれが正攻法なんで試してみてください

次はサイドバーの背景に画像を使った場合のやり方です・・・ まっ・・・同じなんですがね・・


CSS サイドバーの背景を下まで2

CSS サイドバーの背景を下まで3  ←アメブロとは相性が悪いです

CSS サイドバーの背景を下まで 32768 ←アメブロとは相性が悪いです



画像のURLって・・・?

画像のURLが・・・変更されています

クリックしていただけるとうれしいな