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の余裕が出来ます・・
ＣＳＳで横幅を広げなくても余裕ができますのでお勧めです
一応・・再開・・・ してみようかな・・
風邪もなんとか・・・
まだ・・鼻が詰まっちゃっているのですが・・・
プチメはもう少しごめんなさいですが
コメントは再開してみます・・
ご迷惑おかけしました m(_ _)m
関係ありませんが・・・
ピグで
IEでしたらマイページから入れますが・・・
Firefoxとかの場合はどうやってピグに入るのでしょう？
今日は休みました・・
相変わらず咳が止まりません
頭も痛いし・・・
で・・
今日は休んで何とか風邪を治さないと
さすがの辛さにはじめてコメントまで閉じさせていただきましたが・・・
わかっていても・・・
何度もブログを開いて
コメントがきていないのはさびしい物です・・・
過去のコメントが読めるようにＣＳＳでコメント部分を消しているだけですので
携帯からは普通にコメントが出来るんですけどね・・・
昨日・・・ 携帯ピグの記事を書きましたが・・・
（正式に発表されていませんのであくまでも推測なのですが・・・）
今日も緊急メンテ・・・・
ここ最近毎日メンテをやっているようですね
携帯対応に向けてトラぶっているんでしょうか？
携帯からネットも出来ないわたしには関係ないのですが
ＰＣの大きな画面での楽しさをどうやって携帯の小さな画面で表現するのかはすごく興味はあります・・
もちろんＰＣからも携帯からもいっしょに同じ世界に入れるんですよね？
それともＰＣと携帯とは交わることなく別世界？
ＰＣなら裏でブログとかでも出来るから順番待ちも何とかなりますが・・
携帯で順番待ちはつらいですよね・・
わたしは携帯を使いこなせていませんのでよくわからないんですが
携帯でネット（ピグ）しながら電話やメールなんて出来ませんよね・・ たぶん
順番が来るまで待っているの？
順番が来たらメールでお知らせしてくれるとか？
その辺をどう処理するのかも興味あります
携帯をはじめることによって
一気に参加人数が増えると予想されますから
順番待ちしなくてもすぐに入れるくらいに
サーバーを増やして一気に世界を広げて・・・
だれでもすぐに入れるなんて・・・
・・・なんて出来るはずないですよね・・
キーボード入力が苦手なもので・・・
チャットが怖くてピグに入れませんが・・
すごく興味はあります
コメントが着ているはずは無いのですが・・・
一応・・確認してから
また寝ます