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

kuu♪からのお知らせ

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

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

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

サイドバーに外枠をつけよう [サイドバー]

【サイドバーに外枠をつけよう】

 

 

変える部分をで書いています。


/*-----Side-----*/ とあります。

.sidebar {
width:198px;
padding-left:5px;
padding-right:5px;
padding-bottom:10px;
margin-bottom:10px;
overflow:hidden;
}

border:1px solid #9a9a9a;を付け加えます。

.sidebar {
width:198px;
padding-left:5px;
padding-right:5px;
padding-bottom:10px;
border:1px solid #9a9a9a;
margin-bottom:10px;
overflow:hidden;
}

border:1pxの数字を変えると線の太さが変わります。

solidは線の種類です。solidを↓↓の種類に変えることもできます。
solid(普通の線)
double(二重の線)
groove(谷型の線)
ridge(山型の線)
inset(凹型)
outset(凸型)
dotted(点線) 一部の古いブラウザでは未対応
dashed(大きい点線) 一部の古いブラウザでは未対応
none(線なし)

#9a9a9aの部分が色の指定です。好きな色に変えましょう。
色の載せ方は、 、【基本の背景色を変えよう】に記述してあります。

 

 

 


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

nice! ありがとう 5

コメント 8

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

タイトルと枠の余白ができてしまうのですがどうすればいいのでしょうか?
by 奈奈穂 (2008-12-26 12:12) 

kuu

★奈奈穂さん

・どこのタイトル と どこの枠に余白ができるのでしょうか?
・奈奈穂さんはどのようにしたいのでしょうか?

詳しく教えてくださいね。
by kuu (2008-12-27 14:42) 

真先

はじめまして。いつもお世話になっております!

サイドバーに枠をつけたのですが、本文側(右)の線が
表示されなく、切れたようになってしまいます。

幅を変えたりしてみたのですが上手くいきません・・・


by 真先 (2009-01-05 14:09) 

kuu♪

★真先さん

ごめんなさい。
この記事は説明不足ですよね^^;

これは、ひとつひとつを囲む場合の記事なんですが、その際
.sidebar {
width:198px;

の数字を線の太さ×2 引いてください。
1pxの線なら -2 引いて、 width:196px;です。

ちなみに、今私がしているように、サイドバーを囲む場合は
#side-a, #side-b {
の中に
border: 1px solid #7D6D60; と入れてみてください。
こっちの方が見栄えもいいし、簡単かもしれません。
by kuu♪ (2009-01-05 16:06) 

真先

御丁寧にありがとうございました!
早速やってみます。
by 真先 (2009-01-06 01:29) 

kuu♪

★真先さん

うまくご自分の作りたいスキンができるといいですね。
by kuu♪ (2009-01-14 09:45) 

Ryokan

とても参考になりました、ありがとうございました
たくさんのページを見せていただきましたが、ここに代表して御礼を書かせていただきます
四苦八苦してますが、またいろいろと参考にさせてくださいませ
by Ryokan (2009-08-31 15:12) 

kuu♪

★Ryokanさん

参考になってよかったです。
素敵なオリジナルスキンを作ってくださいね[ニコッ]
by kuu♪ (2009-09-25 14:55) 

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

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

  

         

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

×

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