実は・・・
この新しい「CSS編集用デザイン」はいままでの「ベーシック」などとは比べ物にならないくらい背景を入れる場所？がいっぱいあります
こんなに使い切れないだろ～ってくらい背景を入れることが出来ます
まず基本は画面全部に背景画像を敷き詰めます（このブログのコルク画像）
↑これはこのブログで使っている画像です（お持ち帰り自由）
このような画像を作ったり素材サイトで仕入れてきたら自分のブログの画像フォルダーにアップします
画像のURLの調べ方・・・
Internet Explorerの場合・・・
画像フォルダーの中で画像のURLを調べたい画像の上をクリック
立ち上がった小窓の中に表示されている画像の上で右クリック → プロパティ
プロパティの中で URL がこの画像の画像のURLになります
FirefoxやGoogleChromeの場合・・・
画像フォルダーの中で画像のURLを調べたい画像の上で右クリック→画像URLをコピー
これでコピーされますのでそのままCSSの画像のURL部分に貼り付けます
では基本の背景です CSSの最後に付け加えてください
/*背景1番下*/
body{
background-image:url(画像のURL);/*背景画像*/
}
これで画損全体に背景画像が敷き詰められます
このブログではスクロールをするとコルクの背景もそれに沿って動きますが・・
背景を固定してスクロールしても動かないようにするには・・・
background-attachment: fixed;/*背景固定*/
これを使います
たとえば・・
/*背景1番下*/
body{
background-image:url(画像のURL);/*背景画像*/
background-attachment: fixed;/*背景固定*/
}
これだと背景画像が画面全体に敷き詰められて・・・
かつスクロールしても動かなく固定された背景になります
・・・・ただし
以前の「ベーシック」のようなブログ本体に背景が設定されていませんので・・
↓このようになってしまいます
以前はこのようにするためにCSSを書きましたが・・・
今度のデザインは何もしないとこの状態です・・・
で・・・・ bodyに背景をつけるとブログ本体部分の背景が必要になってきます
いろいろなやり方（や・・入れる場所）があるのですが・・・
まずは・・お手軽に背景色で・・・
.skinFrame{/*ブログの背景*/
width:1020px;/*横幅 A*/
background-color:#ffffff;/*背景色*/
margin:0 auto;
}
次は背景画像を使ってみます
↑このような横幅1050px（横幅は980pxに左右の余裕をつければ適当に）の画像を作ります
（お持ち帰り自由－クリックしてブラウザーに原寸大で表示させてから右クリック→名前をつけて保存）
.skinFrame{/*ブログの背景*/
width:1050px;/*背景画像の横幅*/
background-image:url(画像のURL);/*背景画像*/
background-repeat:repeat-y;/*縦にだけ繰り返し*/
margin:0 auto;
}
↑この場合はヘッド画像がブログ本体の背景の中に入りますが・・・
ブログ本体の画像と別にヘッド画像をつけようと思っている場合は・・・
.skinContentsFrame{/*ブログの背景*/
width:1050px;/*背景画像の横幅*/
background-image:url(画像のURL);/*背景画像*/
background-repeat:repeat-y;/*縦にだけ繰り返し*/
margin:0 auto;
padding-top:20px;/*上のスキマB*/
}
↑このような横幅1050px（横幅は980pxに左右の余裕をつければ適当に）の画像を作ります
（お持ち帰り自由－クリックしてブラウザーに原寸大で表示させてから右クリック→名前をつけて保存）
この画像を使うと↓このようになります・・・
今度のスキンはまだまだ背景を入れるところがあります・・・
次回に続く予定です
横幅が800pxを超える画像はCSSの編集のブログデザインヘッダ・背景用画像の追加にアップします
ブログデザインヘッダ・背景用画像には5枚しかアップできません
また普通に画像フォルダーにアップすると横幅800pxに縮小されてしまいます
順番に記事にしていますのでまだ記事にしていない部分へのコメントでの質問は・・・・