★埼玉散策★　Macky's Blog

バナーの背景変更の応用。



オリジナルデザイン変更画面から「スタイルシート」の中から以下の部分を見つけて、

.blogbody{

	background		:#fff;

	margin			:0px 0px 10px 0px;

	padding			:8px;

	border-left		:1px solid #00514D;

	border-right		:1px solid #00514D;

	border-bottom		:1px solid #00514D;

}

のbackgroundのところに背景にする画像のURLを記入する。

.blogbody{

	background	:#fff url(http://blog.saitamania.net/usr/△△△/◎◎◎.gif);

	margin			:0px 0px 10px 0px;

	padding			:8px;

	border-left		:1px solid #00514D;

	border-right		:1px solid #00514D;

	border-bottom		:1px solid #00514D;

}

同じく、サイドメニューの背景を変えるのは・・・
backgroundがないので追加しましょう。

.side{

	font-size			:12px;

	line-height		:140%;

	margin			:0px 0px 10px 0px;

	padding			:8px;

	border-left		:1px solid #00514D;

	border-right		:1px solid #00514D;

	border-bottom		:1px solid #00514D;

	width			:167px;

	background	: url(http://blog.saitamania.net/usr/△△△/◎◎◎.gif);

}

あれ？カレンダーの背景が変わらない？
ここも変更（追加）します。

.calendartable{

	margin				:0px auto 20px auto;

	padding				:0px;

	width				:185px;

	text-align				:left;

	background			:#fff

	border-top			:1px solid #00514D;

	border-left			:1px solid #00514D;

	border-right			:1px solid #00514D;

	border-bottom			:1px solid #00514D;

	empty-cells:show;

	border-spacing:0px;

	border-collapse:collapse;

	background	: url(http://blog.saitamania.net/usr/△△△/◎◎◎.gif);

}

background-repeat:repeat-x;　を追加すれば、横方向に並べ、
background-repeat:repeat-y;　を追加すれば、縦方向に画像を並べられます。
大きな画像の場合は、
background: url(http://blog.saitamania.net/usr/△△△/◎◎◎.gif) left bottom;
background:（画像の位置）（左右の基準）（上下の基準） ;

あくまでも一例です。

詳しくは→「TAG INDEX」

今日はこの辺で。