スキン編集(画像表示位置指定と背景固定)
2005年 02月 02日
|
▼
マイスキンの背景は画像表示の位置によってがらっと印象が変わります。
どんな風になるのか?検証してみました。
背景画像はうさ友さんの『ろこさん』のところからお借りしました^^
可愛い素材がいっぱいのろこさんのサイトはこちらの『フリー素材ROCO☆』 です。
まずは・・・
CSS編集のところから下記の部分を探してください。
BODY{ BACKGROUND : #FFFFFF; MARGIN : 0PX;PADDING : 0PX; }
◆背景画像を全体に繰り返す
BODY{ BACKGROUND : #FFFFFF; BACKGROUND-IMAGE : URL(イメージURL) ; MARGIN : 0PX;PADDING : 0PX;}
こんな風に表示されます。
◆背景画像を左上から横方向のみ繰り返す(repeat-x)
BODY{ BACKGROUND : #FFFFFF; BACKGROUND-IMAGE : URL(イメージURL) ; MARGIN : 0PX;PADDING : 0PX; background-repeat:repeat-x;}
こんな風に表示されます。
◆背景画像を左上から縦方向のみ繰り返す(repeat-y)
BODY{ BACKGROUND : #FFFFFF; BACKGROUND-IMAGE : URL(イメージURL) ;MARGIN : 0PX;PADDING : 0PX;background-repeat:repeat-y;}
こんな風に表示されます。
◆背景画像の繰り返しを無効にする(no-repeat;)
BODY{ BACKGROUND : #FFFFFF; BACKGROUND-IMAGE : URL(イメージURL) ;MARGIN : 0PX;PADDING : 0PX; background-repeat:no-repeat;}
これで、背景画像はウィンドウの左上に表示する事ができます。
『解説』
MARGIN : 0PX;PADDING : 0PX; これは画像の位置を示しており、これは水平位置0PXで垂直位置0PXで左上をさしています。このエキサイトの場合、ピクセルで位置表示を示していますが他に%での指定もできます。
その場合、MARGIN : 0PX;PADDING : 0PX; を消して下さい。
そしてbackground-position:○% ○%を加えてください。(○とはゼロじゃなくてマルだよ)
○に数字を入力してください。
BODY{ BACKGROUND : #FFFFFF; BACKGROUND-IMAGE : URL(イメージURL) ;background-repeat:no-repeat;background-position:○% ○%}
例をあげると、真ん中に表示したい時はbackground-position:50% 50%です。
左上 background-position:0% 0%
右上 background-position:100% 0%
左下 background-position:0% 100%
右下 background-position:100% 100%
left・right・center・top・bottomでも上下左右、中心を指定できます。
例えば右上で表示の場合はこうです。
BODY{ BACKGROUND : #FFFFFF;BACKGROUND-IMAGE:URL(イメージURL); background-repeat:no-repeat;background-position:100% 0% }
こんな風に表示されます。
◆背景画像を固定する(fixed)
BODY{ BACKGROUND : #FFFFFF;BACKGROUND-IMAGE:URL(イメージURL);margin: 0px; padding: 0px; background-attachment: fixed;}
fixedと指定してあげれば背景が固定され、スクロールバーを動かしても背景は動きません。
とまあ、こんな感じで使用する画像によって背景画像の位置を変えてみるのは楽しいですね^^
作業の度にプレビューボタンをクリックしてどんな感じになったかを必ず確認してくださいね。(これはホントに大事です)
あとは、壁紙の色によってリンクの色を変えたりなどの作業もしてみたりとか・・・。
そして最終的にコレ!というものになったら保存ボタンをクリックしてマイスキンでブログ生活を楽しみましょう♪(^▽^)/
どんな風になるのか?検証してみました。
背景画像はうさ友さんの『ろこさん』のところからお借りしました^^
可愛い素材がいっぱいのろこさんのサイトはこちらの『フリー素材ROCO☆』 です。
まずは・・・
CSS編集のところから下記の部分を探してください。
BODY{ BACKGROUND : #FFFFFF; MARGIN : 0PX;PADDING : 0PX; }
◆背景画像を全体に繰り返す
BODY{ BACKGROUND : #FFFFFF; BACKGROUND-IMAGE : URL(イメージURL) ; MARGIN : 0PX;PADDING : 0PX;}
こんな風に表示されます。
◆背景画像を左上から横方向のみ繰り返す(repeat-x)
BODY{ BACKGROUND : #FFFFFF; BACKGROUND-IMAGE : URL(イメージURL) ; MARGIN : 0PX;PADDING : 0PX; background-repeat:repeat-x;}
こんな風に表示されます。
◆背景画像を左上から縦方向のみ繰り返す(repeat-y)
BODY{ BACKGROUND : #FFFFFF; BACKGROUND-IMAGE : URL(イメージURL) ;MARGIN : 0PX;PADDING : 0PX;background-repeat:repeat-y;}
こんな風に表示されます。
◆背景画像の繰り返しを無効にする(no-repeat;)
BODY{ BACKGROUND : #FFFFFF; BACKGROUND-IMAGE : URL(イメージURL) ;MARGIN : 0PX;PADDING : 0PX; background-repeat:no-repeat;}
これで、背景画像はウィンドウの左上に表示する事ができます。
『解説』
MARGIN : 0PX;PADDING : 0PX; これは画像の位置を示しており、これは水平位置0PXで垂直位置0PXで左上をさしています。このエキサイトの場合、ピクセルで位置表示を示していますが他に%での指定もできます。
その場合、MARGIN : 0PX;PADDING : 0PX; を消して下さい。
そしてbackground-position:○% ○%を加えてください。(○とはゼロじゃなくてマルだよ)
○に数字を入力してください。
BODY{ BACKGROUND : #FFFFFF; BACKGROUND-IMAGE : URL(イメージURL) ;background-repeat:no-repeat;background-position:○% ○%}
例をあげると、真ん中に表示したい時はbackground-position:50% 50%です。
左上 background-position:0% 0%
右上 background-position:100% 0%
左下 background-position:0% 100%
右下 background-position:100% 100%
left・right・center・top・bottomでも上下左右、中心を指定できます。
例えば右上で表示の場合はこうです。
BODY{ BACKGROUND : #FFFFFF;BACKGROUND-IMAGE:URL(イメージURL); background-repeat:no-repeat;background-position:100% 0% }
こんな風に表示されます。
◆背景画像を固定する(fixed)
BODY{ BACKGROUND : #FFFFFF;BACKGROUND-IMAGE:URL(イメージURL);margin: 0px; padding: 0px; background-attachment: fixed;}
fixedと指定してあげれば背景が固定され、スクロールバーを動かしても背景は動きません。
とまあ、こんな感じで使用する画像によって背景画像の位置を変えてみるのは楽しいですね^^
作業の度にプレビューボタンをクリックしてどんな感じになったかを必ず確認してくださいね。(これはホントに大事です)
あとは、壁紙の色によってリンクの色を変えたりなどの作業もしてみたりとか・・・。
そして最終的にコレ!というものになったら保存ボタンをクリックしてマイスキンでブログ生活を楽しみましょう♪(^▽^)/
by usachibi2001
| 2005-02-02 20:36
| スキン編集
|
Comments(6)
▲
Commented
by
cloud_sugar at 2005-02-02 22:29
いつもいつも、うさこちゃんのお母さんには感心させられます♪
いっぱい背景の変え方などを教えていただき、とっても参考になります(^○^)ありがとうございます♪
いっぱい背景の変え方などを教えていただき、とっても参考になります(^○^)ありがとうございます♪
0
Commented
by
kupukupu04 at 2005-02-02 23:29
わあぁ、こんなに詳しく、色々教えていただいてありがとうございます!
一番上の全面にするタイプ、それこそ私がしたかった事なのです!
しかし、私のもう一つのブログはrepeat-xにしているのにも関わらず、
全面に画像が表示されているのです。
謎です。。。
一番上の全面にするタイプ、それこそ私がしたかった事なのです!
しかし、私のもう一つのブログはrepeat-xにしているのにも関わらず、
全面に画像が表示されているのです。
謎です。。。
Commented
by
kieribotan at 2005-02-03 00:40
Commented
by
burukiyo at 2005-02-03 09:53
--(*^o^*)オ(*^O^*)ハ(*^o^*)ヨーー!
新しくσ(^_^)ワタシのメインのHP
http://www.geocities.jp/burukiyo_tori/の方に
ブログ日記を、付けましたので
ご挨拶方々エキサイトブログリンク
させて、頂きましたm(._.*)mペコッ
どうぞ、これからも(((-^^)爻(^^ ))) ヨロシク♪
(-人-) オネガイ致しますm(._.*)mペコッ
新しくσ(^_^)ワタシのメインのHP
http://www.geocities.jp/burukiyo_tori/の方に
ブログ日記を、付けましたので
ご挨拶方々エキサイトブログリンク
させて、頂きましたm(._.*)mペコッ
どうぞ、これからも(((-^^)爻(^^ ))) ヨロシク♪
(-人-) オネガイ致しますm(._.*)mペコッ
Commented
by
kupukupu04 at 2005-02-03 15:47
Commented
by
usachibi2001 at 2005-02-03 22:36
> cloud_sugarさん
いや〜、照れますな・・・(;^_^A アセアセ・・・
実験してわかったことをメモ帳代わりに載せただけですが、参考になりました!?
> kupukupu04さん
いえいえ、一度こうやって記載すればあとで背景を変える時に自分も楽だなって思って(^▽^;)
理想のマイスキンが出来てよかったですね^^
お役に立てて嬉しいです(^▽^)/
> kieribotanさん・ burukiyoさん
おおっ!本サイトの方にもブログを!?
リンクもして下さったんですか!?有難うございます<(_ _)>
こちらこそ、どうぞよろしくお願い致します^^
いや〜、照れますな・・・(;^_^A アセアセ・・・
実験してわかったことをメモ帳代わりに載せただけですが、参考になりました!?
> kupukupu04さん
いえいえ、一度こうやって記載すればあとで背景を変える時に自分も楽だなって思って(^▽^;)
理想のマイスキンが出来てよかったですね^^
お役に立てて嬉しいです(^▽^)/
> kieribotanさん・ burukiyoさん
おおっ!本サイトの方にもブログを!?
リンクもして下さったんですか!?有難うございます<(_ _)>
こちらこそ、どうぞよろしくお願い致します^^