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

2008年04月09日

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


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


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

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


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

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


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

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


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

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


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

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


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

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

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

# - ETD - Elika Tiramisu Designs -
< SL Url > secondlife://ETD isle/105/145/31
★シンプルテンプレートをHack する! -Case.3-


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

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

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

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


★ブログの上部に画像を配置する場合、ソラマメではスタイルシートの以下の部分(#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と併用すれば、ページが開くたびに設定した商品をランダムに表示させるなんてこともソラマメなら簡単にできるハズだ。

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

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

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


Posted by Lovely Wolf at 12:25│Comments(0)【シンプルテンプレート講座】


同じカテゴリー(【シンプルテンプレート講座】)の記事画像
★Cool にソラマメをカスタマイズする! -Case.6-
★シンプルテンプレートをHack する! -Case.5-
★シンプルテンプレートをHack する! -Case.4-
★シンプルテンプレートをHack する! -Case.2-
★シンプルテンプレートをHack する! -Case.1-
同じカテゴリー(【シンプルテンプレート講座】)の記事
 ★Cool にソラマメをカスタマイズする! -Case.6- (2008-07-30 12:25)
 ★シンプルテンプレートをHack する! -Case.5- (2008-04-15 12:25)
 ★シンプルテンプレートをHack する! -Case.4- (2008-04-14 12:25)
 ★シンプルテンプレートをHack する! -Case.2- (2008-02-28 12:25)
 ★シンプルテンプレートをHack する! -Case.1- (2008-02-26 12:25)
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。