So-net無料ブログ作成
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。

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

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

sidebarwaku-01.PNG

↓   ↓   ↓   ↓   ↓   

sidebarwaku-02.PNG

 


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

1. topの画像
sidebar-top.GIF

2. sideの画像
sidebar-side.GIF

3. bottomの画像
sidebar-bottom.GIF


[作成] 

【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;
}

 

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


nice!(2)  コメント(8) 
共通テーマ:blog

nice! ありがとう 2

コメント 8

コメントの受付は締め切りました
みゆちこ。

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

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

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

kuu

★みゆちこ。さん

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

なので、そこに合ったタグに背景を入れるんですけど、上に記述したやり方は無理です。
この3つは高さが決まっているので、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) 

kuu

★みゆちこ。さん

「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) 

kuu♪

★みゆちこ。さん

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

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

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

  

         

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。