ブログカスタマイズ3（背景スクロール編）

みんなで背景をスクロールしましょう(笑)

１、背景用画像を用意します（カラーは薄い方がいいかも）

2、ボディに背景を入れる
　
【スタイルシートを編集】
半角英数で入力してください（ファイル名は除く）
body{
　　　　　color:#000;
　　　　　margin:0px;
　　　　　background:#fffafa;
　　　　　text-align:center;
}
　　　　　　　　　　　↓

body{
　　　　　color:#000;
　　　　　margin:0px;
　　　　　background:#fffafa;
　　　　　text-align:center;
　　　　　background-image:url(http://img02.naturum.ne.jp/usr/go123/背景3.JPG);　
　　　　　background-repeat: no-repeat;　
　　　　　background-position: 50% 50%;
　　　　　background-attachment:fixed;　 　
}

3、ブログの背景色をなくす
　やり方は背景色の設定を完全に消すか
　background-color:#ffffff;を/* */ではさんでスタイルシートの効果をなくすかです
　下の赤字の５か所を編集してやると背景がよく見えます　

【スタイルシートを編集】
※半角英数で入力してください
#container{
　　　　　　　　　　font-size:12px;
　　　　　　　　　　width:940px;
　　　　　　　　　　/*background-color:#ffffff;*/
　　　　　　　　　　margin:0px auto;
　　　　　　　　　 border-top-width: 1px;
　　　　　　　　　　border-right-width: 2px;
　　　　　　　 　　 border-bottom-width: 1px;
　　　　　　　　　　border-left-width: 2px;
　　　　　　　　　　border-right-style: solid;
　　　　　　　　　　border-left-style: solid;
　　　　　　　　　　border-top-color: #FFFFFF;
　　　　　　　　　　border-right-color: #4e454a;
　　　　　　　　　　border-bottom-color: #FFFFFF;
　　　　　　 　　　 border-left-color: #4e454a;
text-align:left;
}
#content{
　　　　　　　　width:590px;
　　　　　　　　float:right;
　　　　　　　　/*background-color:#ffffff;*/
　　　　　　　　　　　　　　　padding:20px 5px 20px 5px;
}

#links{
　　　　　　　　width:160px;
　　　　　　　　float:left;
　　　　　　　　text-align:left;
　　　　　　　　margin:0px 0px 0px 0px;
　　　　　　　　padding:20px 5px 20px 5px;
　　　　　　　　/*background-color:#ffffff;*/
　　　　　　　　overflow:hidden;
}

#links2{
　　　　　　　　width:160px;
　　　　　　　　float:right;
　　　　　　　　text-align:left;
　　　　　　　　margin:0px 0px 0px 0px;
　　　　　　　　padding:20px 5px 20px 5px;
　　　　　　　　/*background-color:#ffffff;*/
　　　　　　　　overflow:hidden;
}
.blogbody{
　　　　　　　　/*background:#fffafa;*/
　　　　　　　　margin:0px 0px 10px 0px;
　　　　　　　　padding:8px;
　　　　　　　　border-left:1px solid #8c0000;
　　　　　　　　border-right:1px solid #8c0000;
　　　　　　　　border-bottom:1px solid #8c0000;
}　　

４、文字色の調整
　背景色をなくすと文字が見えにくくなるので調整が必要な箇所を赤字にしてます
　色見本はここを参考に

【スタイルシートを編集】　　
※半角英数で入力してください
.title{
　　　　　　color:#333333;
　　　　　　font-size:12px;
　　　　　　font-weight:bold;
　　　　　　height:10px;
}

.main{
　　　　　　width:572px;
　　　　　　color:#333333;
　　　　　　font-size:12px;
　　　　　　font-weight:bold;
　　　　　　 padding:15px 0px 15px 0px;
　　　　　　overflow:auto;
　　　　　　line-height:135%;
}
.comments-body{
　　　　　　color:#333333;
　　　　　　 font-size:12px;
　　　　　　font-weight:bold;
　　　　　　 line-height:135%;
　　　　　　margin:20px 0px 15px 13px;
}
.side{
　　　　　　width:148px;
　　　　　　color:#333333;
　　　　　　font-size:11px;
　　　　　　font-weight:bold;
　　　　　　line-height:140%;
　　　　　　margin:0px 0px 10px 0px;
　　　　　　padding:5px 5px 5px 5px;
　　　　　　border-left:1px solid #8c0000;
　　　　　　border-right:1px solid #8c0000;
　　　　　　border-bottom:1px solid #8c0000;
}

これでくるくる出来るはずです

さあ『くるくる』しましょう(笑)

あなたにおススメの記事