アメブロのCSS編集－4日目の2回目－

にしても、アメブロのCSSって何がどこにあるのか把握し難い…(´Ａ｀。
親切(?)に目次みたいな物があるのに、役に立った例がない。とか。

これからはとりあえず、色んな箇所に背景やら色やら付けて、全体のまとまりを見てみようと思っております。
マズはページ全体の背景を付けてみようかしらん。
と、いうわけで下のような画像を(縦)2000x(横)2000[px]で作ってみました。



さらにそれを切り取って、(縦)2000x(横)100[px]の縦に細長い画像を作りました。
コレを横方向にずらっと並べて背景にしてしまおうってわけですな。

縦に長いのは～…ええと、簡単に言うと
もしかしたら縦長のモニタで見てるかもって言う不安からです(*´σ_｀)

body{
background-color:#ffffff;
background-image:url(http://stat.blogskin.ameba.jp/…以下略);
background-repeat:repeat-x;
background-attachment:fixed;
}

background-repeat:repeat-x;で横方向に並べて…
background-attachment:fixed;で背景を固定。
background-color:#ffffff;と、わざわざ無意味っぽい事をしているのは、
見ている人が超縦長のモニタだった場合の保険ですヽ(*´∀｀)ﾉ
(この画像の下の方は、グラデーションで#ffffffになっているので)

初歩初歩～なんて思ったら
あら？ページ最下部の[powered by ameba]の背景が∑(´･ω･|||)ノリスケ！
じゃなくてスケスケ。

あ～…じゃぁこのままスケスケで、さらに上のボーダーもとってしまおう( *´ｴ`)
このアメブロマークの部分はdiv#footerAreaなので…

div#footerArea{
margin:0;
padding:10px 5px 0 0;
border-style:none;
text-align:right;
background-color:transparent;
}

ついでにチョットだけ位置の調整もpaddingで。
background-color:transparent;は無くても良さそうですが、
あとで色を付けたくなった時分かりやすいようにっと。

最後にココまでのまとめメモ。
今回分から上書きしてるので[現在使用中のスキンCSS]の一番下に記述しないと都合悪いネ( ´△`)
/*============自分でカスタマイズ・整理分==============*/
/*-- ▼▼▼ページ全体の色・背景【body】▼▼▼ --*/
body{
background-color:#334455;
background-image:url(http://stat.blogskin.ameba.jp/…以下略);
background-repeat:repeat-x;
background-attachment:fixed;
}
/*-- ▼▼▼ページ最下部【アメブロマーク】▼▼▼ --*/
div#footerArea{
margin:0;
padding:10px 5px 0 0;
border-style:none;
text-align:right;
background-color:transparent;
}
/*-- ▼▼▼見えないようにした部分▼▼▼ --*/
#profile .piggLink,
#profile .profLink,
#profile .link_blog,
div.readerMainLink,
div#userNaviArea{
display:none;
}
/*============自分でカスタマイズ・整理分==============*/