ソラマメブログ › * Lovely Wolf Report in SLMaMe * › 【シンプルテンプレート講座】

2008年04月09日

★シンプルテンプレートをHack する! -Case.3-


【第 17 話】 ソラマメの基本テンプレートの背景画像をスクロールしないように同じ位置に固定したい!- スタイルシート編集編 -


★春はあけぼの、やうやうしろくなりゆく山ぎわ。




★して、春は出会いの季節。このスチールを見てもピンと来ないキミ。毎日鏡で自分の顔見てからお出かけしましょう。




★おぉ!このモデルさんっ、まさかチラミスの旦那なのか?




★おぉい、俺も仲間に入れてくれぇ。商品いっぱい買ったから、Np でしょ?




★それにしても、春といえば、やっぱピンク。




★しっかり寄付のお願いを忘れないとこなんか、チラミスさんって感じ。

hmmm...どうやら彼女のブログも新しいドメインを取って生まれ変わったようだ。

# ETD blog
< Web Url > http://blog.elikatiramisudesigns.com/

# - ETD - Elika Tiramisu Designs -
< SL Url > secondlife://ETD isle/105/145/31



★して、ひさびさのお題はコレっ!

「シンプルテンプレートを使って、背景画像をスクロールしないように同じ位置に固定してみる!」です。

・・・うまく使えれば、So Cool って外国産のお姉さま方に連呼してもらえそうなこのワザ!ソラマメでもやってる人まだ少ないんだよなぁ。ってことで、読者のみなさんもやってみますか?- by Lovely Wolf -




★ブログの上部に画像を配置する場合、ソラマメではスタイルシートの以下の部分(#banner)に画像を入れる記述をしている人が多い。

#banner{

 background-image: url(//img01.tec29.com/usr/lovelywolf/slmame-banner_06.jpg);

}
★しかし、この方法では記事を読んでるときに画面をスクロールさせるといっしょに画像も消えてしまう。消さずに残しておきたいって場合どうすればいいのかな?ってのが、本日の講座のポイントだ。

講座といっても、別にむづかしい話をするつもりなんかなくて、スタイルシートの以下の赤字部分をちょこちょこって直してみるだけ。
(body というところに、固定的に表示させたい画像のリンクを書くだけ)

body{

 position:center;
 margin:0px 0px 0px 0px;
 background:#000;
 text-align:center;
 background-image: url(//img01.tec29.com/usr/lovelywolf/slmame-banner-11.jpg);

}
★すると、ほら、この通り。スクロールしても、背景画像は身動きひとつしないでしょ。

・・・使い道としては、常にブログの固定位置にオススメ商品を表示したりできそう。JavaScriptと併用すれば、ページが開くたびに設定した商品をランダムに表示させるなんてこともソラマメなら簡単にできるハズだ。



【ソラマメにアップロードした画像のリンクを調べる&スタイルシートを直す方法】

# Tips. <Web URL> http://lovelywolf.slmame.com/e154857.html


   Comments(0)【シンプルテンプレート講座】