みなさんこんにちは
しばらくいじっていない間にCSSの表示？？が変わってたので
新しいCSSでの背景変えをメモ代わりに記事にしておきます
ケータイ組さん、スキン興味ない方は長いので読み飛ばしてくださいませ
まず、壁紙に使う画像を用意します
「ブログを書く」の「デザインの変更」から「スキンの選択」画面に行き
スキンを「スタンダード」の「ベーシック」にします
「スキンCSSの編集」をクリックして編集画面を出します
スキンヘッダ・背景用画像の追加のところで
用意しておいた画像をアップロード
画像の下にパスが表示されます
↓今やCSSの最初にこんなんが書いてあってちょこっとカスタマイズできちゃうのね～
/*============ ☆ かんたんスキンカスタマイズはこちら ☆ ==============*/
/*:(コロン)と、;(セミコロン)の間に色、画像、サイズなどを指定して下さい*/
/*１）ブログタイトルの文字サイズを変更する*/
#header h1{
font-size: 3.0em; /*-- 25px相当の文字サイズ --*/
}
/*２）ブログタイトルの文字色を変更する*/
#header h1 a{
color:#333333; /*-- 濃いグレー --*/
}
/*３）ブログ説明の文字サイズを変更する*/
#header h2{
font-size: 1.0em; /*-- 12px相当の文字サイズ --*/
}
/*４）ブログ説明の文字色を変更する*/
#header h2{
color:#333333; /*-- 指定なし --*/
}
/*５）ページ背景に画像を入れる*/
body{
background-image:url();
ここの（）の中にダウンロードした画像のパスをコピー→ペーストします
}
/*６）ページ全体の文字色を変更する*/
body{
color: #333333; /*-- 濃いグレー --*/
}
/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
}
/*８）記事タイトルの文字色を変更する*/
.entry h3.title{
color: #333333; /*-- 濃いグレー --*/
}
/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #333333; /*-- 濃いグレー --*/
}
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
ピンクの部分が
/*５）ページ背景に画像を入れる*/
body{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20100409/14/09/b1/j/o05000534jasmin1651270792531695.jpg);
↑のようになりました
このままだと、記事とサイド部分はバックが白いままで背景が見えないので
さらにCSSを下にスクロールし
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■ スキン基本設定 ■■■■■■■■■■*/
スキン基本設定の中の
/*■■■デザインカスタマイズ - スキン基本設定*/
/*■リンク*/
a{
text-decoration:none;
color:#0066CC;
}
/*■リンク：訪問済み*/
a:visited{
text-decoration:none;
color:#996699;
}
/*■リンク：マウスオーバー時*/
a:hover{
text-decoration:underline;
color:#FF3366;
}
/*■コンテンツ全体*/
#frame{
background-color:#FFFFFF;
コンテンツ全体、サイドカラムA,サイドカラムBの＃FFFFFFを消去します
}
/*■メインカラム*/
#main{
}
/*■サイドカラムA*/
#sub_a{
color:#666666;
background-color:#FFFFFF;
}
/*■サイドカラムB*/
#sub_b{
color:#666666;
background-color:#FFFFFF;
}
/*■コンテンツ全体*/
#frame{
background-color:;
このようになりました
}
/*■メインカラム*/
#main{
}
/*■サイドカラムA*/
#sub_a{
color:#666666;
background-color:;
}
/*■サイドカラムB*/
#sub_b{
color:#666666;
background-color:;
}
これで、記事部分の色が透明になり、バックの画像が全体に表示されます。
ここまでだと背景は記事と一緒にスクロールするので
/*５）ページ背景に画像を入れる*/
body{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20100409/14/09/b1/j/o05000534jasmin1651270792531695.jpg);
background-attachment:fixed; ←ここにbackground-attachment:fixed;の文字を入れると
記事だけがスクロールします
表示を確認して、よければ保存します
しばらくいじっていない間にCSSの表示？？が変わってたので
新しいCSSでの背景変えをメモ代わりに記事にしておきます
ケータイ組さん、スキン興味ない方は長いので読み飛ばしてくださいませ
まず、壁紙に使う画像を用意します
記事部分の背景の横幅は８００px、PCの画面にもよるけど、横全体で１０００pxくらいが
表示されているのかな。なので、大きい画像だったら一枚で全面に
貼ることが出来ます。小さい画面だとリピートされます
(ヘッダの画像は横８００px）
普通の写真の場合は画像加工ソフトで、明るさを上げてコントラストを落とすと
白っぽい画像になって、字が見やすくなります
「ブログを書く」の「デザインの変更」から「スキンの選択」画面に行きスキンを「スタンダード」の「ベーシック」にします
「スキンCSSの編集」をクリックして編集画面を出しますスキンヘッダ・背景用画像の追加のところで用意しておいた画像をアップロード
画像の下にパスが表示されます
↓今やCSSの最初にこんなんが書いてあってちょこっとカスタマイズできちゃうのね～
/*============ ☆ かんたんスキンカスタマイズはこちら ☆ ==============*/
/*:(コロン)と、;(セミコロン)の間に色、画像、サイズなどを指定して下さい*/
/*１）ブログタイトルの文字サイズを変更する*/
#header h1{
font-size: 3.0em; /*-- 25px相当の文字サイズ --*/
}
/*２）ブログタイトルの文字色を変更する*/
#header h1 a{
color:#333333; /*-- 濃いグレー --*/
}
/*３）ブログ説明の文字サイズを変更する*/
#header h2{
font-size: 1.0em; /*-- 12px相当の文字サイズ --*/
}
/*４）ブログ説明の文字色を変更する*/
#header h2{
color:#333333; /*-- 指定なし --*/
}
/*５）ページ背景に画像を入れる*/
body{
background-image:url();
ここの（）の中にダウンロードした画像のパスをコピー→ペーストします}
/*６）ページ全体の文字色を変更する*/
body{
color: #333333; /*-- 濃いグレー --*/
}
/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
}
/*８）記事タイトルの文字色を変更する*/
.entry h3.title{
color: #333333; /*-- 濃いグレー --*/
}
/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #333333; /*-- 濃いグレー --*/
}
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
ピンクの部分が/*５）ページ背景に画像を入れる*/
body{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20100409/14/09/b1/j/o05000534jasmin1651270792531695.jpg);
↑のようになりました
このままだと、記事とサイド部分はバックが白いままで背景が見えないので
さらにCSSを下にスクロールし
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■ スキン基本設定 ■■■■■■■■■■*/
スキン基本設定の中の
/*■■■デザインカスタマイズ - スキン基本設定*/
/*■リンク*/
a{
text-decoration:none;
color:#0066CC;
}
/*■リンク：訪問済み*/
a:visited{
text-decoration:none;
color:#996699;
}
/*■リンク：マウスオーバー時*/
a:hover{
text-decoration:underline;
color:#FF3366;
}
/*■コンテンツ全体*/
#frame{
background-color:#FFFFFF;
コンテンツ全体、サイドカラムA,サイドカラムBの＃FFFFFFを消去します}
/*■メインカラム*/
#main{
}
/*■サイドカラムA*/
#sub_a{
color:#666666;
background-color:#FFFFFF;
}
/*■サイドカラムB*/
#sub_b{
color:#666666;
background-color:#FFFFFF;
}
/*■コンテンツ全体*/
#frame{
background-color:;
このようになりました}
/*■メインカラム*/
#main{
}
/*■サイドカラムA*/
#sub_a{
color:#666666;
background-color:;
}
/*■サイドカラムB*/
#sub_b{
color:#666666;
background-color:;
}
これで、記事部分の色が透明になり、バックの画像が全体に表示されます。
ここまでだと背景は記事と一緒にスクロールするので
/*５）ページ背景に画像を入れる*/
body{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20100409/14/09/b1/j/o05000534jasmin1651270792531695.jpg);
background-attachment:fixed; ←ここにbackground-attachment:fixed;の文字を入れると
記事だけがスクロールします
表示を確認して、よければ保存します