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

kuu♪からのお知らせ

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

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

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

カスタムスキン作成方法・2 [背景編] [最初の一歩]

必要な部分のみ変更してください。 

カスタムスキンの始め方
カスタムスキン作成方法・1 [バナー編] 
もご覧ください。



【3】背景を変えよう(全体の背景)

#ffffff; を変更します。

/*-----Common-----*/ 
 body {
background: #ffffff;
}
 
sakusei-05.PNG
クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

   ☆色の指定
     #ffffff というのは色の指定です。好きな色の色番号に変えましょう。
      その時、「#FF0000」というふうに、#を必ず入れましょう。
      私は色を選ぶのは『HTML 色一覧』もしくは『HTMLCOLOR』をDLして使っています。
      『HTMLCOLOR』はパソコン上にある好きな色番号を教えてくれるのでスキン作成にはかかせません。

[見本]
#000000;(黒) を入れてみます。(お好きな色を入れてみてくださいね)

/*-----Common-----*/ 
 body {
background: #000000;
}
sakusei-06.PNG
(クリックで拡大)

②”プレビュー”で確認

③気に入った色が決まったら”保存

 【参考】
  * 背景色を変えよう
  * 背景に画像をのせてみよう



【4】内側の背景色を変えよう
(しなくてもOKです)

①バナーの下(記事、サイドバー、記事・サイドバーの周り)部分の色を変え、余白を作る。

/*-----Content-----*/
元々は記述がなく、何も入っていません
sakusei-06.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

/*-----Content-----*/ 内に背景色を指定します。元々何も記述がないので下記タグをすべてコピーして貼り付けます。

/*-----Content-----*/
#content {
background: #FFFFFF;
padding: 20px 10px 0px 10px;
}


#FFFFFF はお好きな色に変えてください
padding: 20px 10px 0px 10px; 
の数字は、〔上、右、下、左〕の余白が変わります。
ご自分で調整してください。

sakusei-07.PNG
(クリックで拡大)



②バナーと①で色をつけた部分の間を詰める

/*-----Header-----*/
#banner {
height:200px;
background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat;
margin-bottom:20px;
clear:both;
}


sakusei-08.PNG

             ↓   ↓   ↓   ↓   ↓   ↓

margin-bottom:20px; → margin-bottom:0px;

/*-----Header-----*/
#banner {
height:200px;
background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat;
margin-bottom:0px;
clear:both;
}


sakusei-09.PNG
(クリックで拡大)

③”プレビュー”で確認

④気に入った色が決まったら”保存



【5】外枠に線を入れよう
(しなくてもOKです)

*これをする場合は、【4】内側の背景を変えよう をしてください。
 その時に、背景色の指定はしなくてもいいです。

①赤い境界線を入れてみます

/*-----Common-----*/
#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#444444;
}


 

sakusei-09.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

border: 1px solid #FF0000; を付け加えます
*線の太さ、種類、色は【線の種類と記述方法】を参考にご自分で変えてください。
*必要な部分のみ線を入れてもOKです。

/*-----Common-----*/
#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#444444;
border: 1px solid #FF0000;
}


 

sakusei-10.PNG
(クリックで拡大)

②”プレビュー”で確認

③気に入った色が決まったら”保存

 

 


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

nice! ありがとう 8

コメント 2

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

こんにちは。
ちょっとご無沙汰している間に、
変則3ペインになっているなんて驚きです。
使い勝手に合わせて、こういうスタイルもアリですね(^^)
by ぜろこ (2008-12-15 12:49) 

kuu♪

★ぜろこさん
私の使いたいように変えたらこんなになってしまいました^^
自分でアレンジできるって楽しいですね♪
by kuu♪ (2008-12-17 11:48) 

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

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

  

         

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

×

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