kuu♪からのお知らせ

長年公開してきたカスタムスキンへの道ですが、
新しいサイト　Harbot's field内の「ssブログ（so-netブログ）のカスタマイズ方法」　へ引っ越しをします。

徐々に時間をかけて引っ越す予定で、今よりも見やすいサイトに変更しています。

今後ともよろしくお願いいたします。

サイドバーの外枠を画像で作ろう

サイドバーの外枠を、線ではなく画像で囲みます。
画像で囲めば、角の丸いもの、線がグラデーションしているものなど、オリジナルなものが作れます。

↓　　　↓　　　↓　　　↓　　　↓　　　

 

---

[用意するもの]
自分のサイドバーの横幅に合わせた画像を3つ用意します。
　＊自分のサイドバーの横幅は　.sidebar {　の中に　width:190px;　という記述があると思います。

1.　topの画像 2.　sideの画像 3.　bottomの画像

[作成]　

【1】topの画像を入れる
　　■自分の作った画像の高さを記入する　
　　　height: 40px;

　　■画像を挿入する
　　　background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat;

/*-----Side-----*/

.sidebar-title { margin:0; padding: 12px 0px 0px 35px; height: 40px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat; font-size:x-small; font-weight:normal; }

【2】sideの画像を入れる
　　■画像を挿入する　画像を縦に繰り返す必要があるので、repeat-y　を入れる
　　　background:url("/_images/blog/_aaa/bbb/ccccc.PNG") repeat-y;

/*-----Side-----*/

.sidebar { width:190px; margin-bottom:10px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") repeat-y; overflow:hidden; }

【3】bottomの画像を入れる
　　.sidebar-end{　という記述がない場合は、新たに書き込む。　
　
　　■自分の作った画像の高さを記入する　
　　　height: 20px;

　　■画像を挿入する
　　　background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat;　

/*-----Side-----*/

.sidebar-end{ height: 20px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat; }

 

＊画像の透過などにも気を配って作ってみてください。

タグ：ソネブロ So-net blog ソネットブログ ソネット カスタムスキン カスタマイズ サイドバーの外枠を画像で作ろう

コメント 8

コメントの受付は締め切りました

色々と参考にさせていただいております。

上記の方法で、サイドバーを囲んだのですが
「POWERD　BY～」のところと「RSS1.0｜RSS2.0」と
「メッセージを送る」のところにだけ
画像が出て来ないのですが、
何か相性の合わない要素があるのでしょうか？

色々な所に入れて試してみたのですが・・・
どこか見落としがありそうでしょうか？
by みゆちこ。 (2008-12-18 18:18) 

★みゆちこ。さん

「POWERD　BY～」と「RSS1.0｜RSS2.0」と「メッセージを送る」は別設定になっていると思います。

なので、そこに合ったタグに背景を入れるんですけど、上に記述したやり方は無理です。
この３つは高さが決まっているので、4面を囲んだ画像を用意して、中を透過して直接はめこむしかないと思います。

「メッセージを送る」のタグ（入ってないと思うので追加）
/*--send-message--*/
#send-message {
margin: 5px 0px 5px 30px;
}

「POWERD　BY～」の画像はこの中に
#powered img {
padding:0 12px;
margin-top:6px;
margin-bottom:6px;
}

「RSS1.0｜RSS2.0」の画像はこの中に
#rssfeed {
padding:0 12px;
}

確認する時間がないのではっきりは言えませんけど、たぶんここに背景として入れると大丈夫だと思います。
padding　と　marginでうまく幅をあわせたらきっちりはまると思います。
by kuu (2008-12-19 08:03) 

朝早くからありがとうございます。

早速やってみたいと思います。
コメントした後もhtmlを入れたり、色々してみたのですが
別になってるとはつゆ知らずでした(-公-、)

出来ましたら、ご報告に上がります。
by みゆちこ。 (2008-12-19 08:54) 

アクセス障害のおかげでコメントが出来ず
はらはらしておりました(´；ω；`)ｳｩｩ

画像透過せず挿入できました。
color指定してなかったので、透過画像ですと
思いっきり背景が反映されていたので、試しに透過無しで
入れてみたら　可能でした。

お忙しい中、迅速な対応ありがとうございました!!!
またお邪魔させていただき　勉強させていただきます。
by みゆちこ。 (2008-12-20 01:12) 

またまた質問攻めですみません・・・orz

何故か「POWERD　BY」「RSS1.0｜2.0」の間に
必ず隙間が出来てしますのですが、
どうにか対処できますでしょうか？

楽しい育児日記にしたいので
妥協せず見てて楽しいものにしたいのでご存知の事が
ございましたら
お時間のあるときで結構ですので、ご返答お待ちしております。
by みゆちこ。 (2008-12-20 02:11) 

★みゆちこ。さん

「POWERD　BY～」の中に
margin-bottom:6px;
がありますか？

これを消してみてください。
下に隙間を作りたいなら、
padding-bottom:6px;
に変えてみてもらえますか？

これでできなかったら原因は他の場所のcssの指定なのでまた教えてくださいね。


by kuu (2008-12-20 10:05) 

言葉だけではちょっと伝えきれないので
画像などを使って　困っている所を記事にしてみました。

よろしければこちらを見ていただけるとわかりやすいかもです。
http://material-and-custom.blog.so-net.ne.jp/2008-12-21
by みゆちこ。 (2008-12-21 10:06) 

★みゆちこ。さん

うまくいきましたか？
がんばってくださいね。
by kuu♪ (2008-12-22 13:42) 

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。