CSS 背景3
こちらも問い合わせの多い・・・ 背景・・・
スキンと背景の境にヒラヒラをつけたり影をつけたりしたい・・
↑こんなの・・・
見本のブログ・・・・
http://ameblo.jp/exlink02/
5種類の背景がランダムで表示されます
ブラウザーの更新をして5種類を確認ください
ランダムなんですんなり見ることができないかもですm(_ _)m
もし・・気に入った背景がありましたら下で配布していますのでお持ち帰りください
で・・・仕組みを
簡単に説明すると・・
背景のバックが単色でない場合は
（模様であったりグラデーションのような場合・・・）
見ている方のディスプレイのサイズより横幅が大きくないと
両端に空白が出来てしまいます
出来れば横幅3000px以上がいいと思います・・・
単色の場合はbackground-colorで色を合わせれば大丈夫です
まずは・・画像を作ります・・・
周りに模様とかグラデーションを使う場合はディスプレイの横幅より大きな画像が必要です
縦は繰り返しますので小さくてもいいのですが・・・・
ある程度のサイズがないとあとで画像のＵＲＬを調べるときに困ります
真ん中の部分にスキンが入るイメージです・・・
周りを単色にするのでしたらＣＳＳで色をつけますので大きな画像は必要ありません
※スキンの入る位置をピッタリ真ん中でないと表示がずれておかしくなります
画像ができたらアメブロにアップしますが・・・
たぶん・・画像は横幅800px以上だと思います
画像フォルダーにはアップできません（自動で800pxに縮小されます）
なので・・・・
http://upphoto.ameba.jp/ucs/photo/uploadpop.do?popup=1&backPageNo=2
種を明かせばスライドショーの画像アップなんですが・・・ 以前あったフォトです
アップしたらついでに画像のＵＲＬを調べておきます
サムネイル画像の上で右クリック→プロパティ
ＵＲＬをコピーしてメモ帳とかに貼り付けた後・・・
ＵＲＬの中の medium （ミディアム）を org （オリジナル）に変更します
これで画像のＵＲＬを取得できました・・・
http://img0.photo1.ameba.jp/e/exlink/medium/0860hha04tyE10dwN3177S.gif
↓
http://img0.photo1.ameba.jp/e/exlink/org/0860hha04tyE10dwN3177S.gif
オリジナル画像のＵＲＬです
やっとＣＳＳの出番です・・・
body{
background-image:url(画像のＵＲＬ);
background-color: #ffffff;
background-position:center top;
background-repeat:repeat-y;/*縦に繰り返す*/
}
お持ち帰りよう素材・・ 画像をクリックしてください
※↓この画像だけＣＳＳが少し違います
body{
background-image:url(画像のＵＲＬ);
background-color: #ffffff;
background-position:center bottom;
background-repeat:no-repeat;/*繰り返さない*/
background-attachment: fixed;/*背景を固定する*/
}
お持ち帰りする場合・・・
画像が大きいために縮小されて表示されている場合があります
カーソルを画像の上で少しおいておくと・・・虫眼鏡や拡大ボタンが現れます
虫眼鏡のプラスが出ている場合はクリックしてオリジナルサイズを表示させてから画像を保存してください
ＩＥ6とかでは拡大ボタンが出る場合があります
その場合もクリックすればオリジナル画像が表示されます
オリジナル画像を表示させてから→右クリック→名前をつけて保存
保存した画像を上の説明のようにスライドショーの画像にアップします
ちなみに・・・・
画像をアップしたときに画像のＵＲＬを調べ忘れたり・・・
メモがわからなくなってしまった場合は・・・
ルームの編集で・・スライドショー
上でも書いていますが縦が小さい場合・・・
画像の位置がわかりにくいです・・・
だいたいの位置で右クリック→プロパティ・・・・
画像のＵＲＬが・・・・・・ 出てきません・・・・
だいたいの位置に合わせて少しそのままにしておくと
画像の上にカーソルがある場合は画像名が表示されます
画像の上にカーソルがあるってことですから→右クリック→プロパティ・・
今度は画像のＵＲＬが出てきました・・・
ただ・・この画像のＵＲＬは上のページの一覧で表示されている
サムネイル画像のＵＲＬです
なのでメモ帳とかに貼り付けてから small （スモール）を org （オリジナル）に変更します
http://img0.photo1.ameba.jp/e/exlink/small/0860hha04tyE10dwN3177S.gif
↓
http://img0.photo1.ameba.jp/e/exlink/org/0860hha04tyE10dwN3177S.gif
このように760pxのスキンに800px用の背景を使うことで左右に20pxの余裕が出来ます・・
ＣＳＳで横幅を広げなくても余裕ができますのでお勧めです