Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2007年01月03日

背景画像を使用するブログカスタマイズ方法

今回は背景画像を使用するカスタマイズの解説です。多少クセがあるので、説明を参考にしてカスタマイズしてみてください。(背景画像はリピートさせる、標準指定を想定しています)

1.ボックス外部の背景画像


body{
text-align: center;
background-image: url(背景画像のアドレス);
}

#bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}

#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
background: #fff;
}

カスタマイズ
抹消線のbackground: #fff;は削除してください。
左右に背景画像が表示されます。大きいモニタだと、意外に横にスペースがありますので、意味はあります。

2.背景画像をボックス内にも適用

背景画像を、コンテンツが無い部分に対して全体的に使用します。コンテンツがある部分は背景色を適用させます。


body{
text-align: center;
background-image: url(背景画像のアドレス);
}

#bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}

.mainbox{
width: 100%;
margin: 0 auto 10px;
border: solid 1px #000;
background: #fff;
}

.mainnavi{
margin-top: 10px;
text-align: center;
font-size: 12px;
background: #fff;
}

.comment-entry{
font-size: 12px;
color: #000;
width: 100%;
background: #fff;
}

カスタマイズ
抹消線のbackground: #fff;は削除してください。
変更箇所は離れていますので、検索などを使用して該当部分を見つけて下さい。エントリ部分やフリーエリア、左右カラムメニューなどの背景色は指定していますので、それ以外の部分には背景画像が適用されます。

以上が基本的な背景色を使用する際のカスタマイズ方法です。ちょっと簡単とまではいかないので、これ以外のカスタマイズをする場合は少々面倒かもしれません。

スポンサーサイト
プロフィール

templatetube

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。