ソラマメブログ › * Lovely Wolf Report in SLMaMe * › 【Cool デザインTips】

2008年05月08日

★Cool にソラマメをカスタマイズする! -Case.1-


【第 27 話】 ブログのカスタマイズは、着てるものを脱がすことから始めてみる!- スタイルシート編集 編 -


★セカンドライフの世界には、ブログをカスタマイズしただけでCool を連発してもらえる風潮がある。
- by Lovely Wolf -

★Cool にソラマメをカスタマイズする! -Case.1-


★デザインに関していえば、PEUGEOT の仕掛けはいつもおもしろい。

★Cool にソラマメをカスタマイズする! -Case.1-


★RC の名を予感させるデティール。

★Cool にソラマメをカスタマイズする! -Case.1-


★マニアにとって超ウレしいFreebie のレーシングギヤ。

★Cool にソラマメをカスタマイズする! -Case.1-


★ライオンのエンブレムがますますでかくなっている。

★Cool にソラマメをカスタマイズする! -Case.1-


★じつは、自転車のメーカーとしても有名なのさ。

★Cool にソラマメをカスタマイズする! -Case.1-


★コックピットは、リアルのカタログと見間違うほどだ。

★Cool にソラマメをカスタマイズする! -Case.1-


★試乗車のテストコースもある。

★Cool にソラマメをカスタマイズする! -Case.1-


★RCZ は、いわゆるコンセプトカー。昨年の秋にフランクフルトモーターショウで発表されたばかり。

★Cool にソラマメをカスタマイズする! -Case.1-


★ところが、先月末、2010 年発売に向けて量産化を決定した。

★Cool にソラマメをカスタマイズする! -Case.1-


# PEUGEOT island
<SLurl> secondlife://PEUGEOT/136/239/23/
★Cool にソラマメをカスタマイズする! -Case.1-


★プジョーらしく、L$ 70,000 をかけたPEUGEOT DESIGN CONTEST 2008 が開かれている。

★Cool にソラマメをカスタマイズする! -Case.1-


★では本日のお題いきます。「着てるものを脱がすことから始めてみる!」ってことで、いったいどうやって脱がすんだか?・・・とっても、気になる。

★ソラマメは、テンプレートの各領域に対して次のような名前が指定されている。

<div id="container">~<div> ・・・・・・・上部画像領域+記事本体+コメント+トラックバック
<div id="banner">~<div> ・・・・・・・・・上部画像領域
<div id="content">~</div>・・・・・・・・・記事本体+コメント+トラックバック
<div id="links">~</div>・・・・・・・・・・・・サイドバー
<div class="blogbody">~</div>・・・・記事本体


★テンプレートを修正するときは、サイドメニュー「ブログの設定」-「テンプレート」を選んでから、「カスタマイズ」(赤アミ部分)をクリックする。

★Cool にソラマメをカスタマイズする! -Case.1-


★デフォルトのスタイルシートは、各領域の背景色に白(#FFFFFF)が指定されている。見た目ダサいのはこのせい?

・・・ってことで、これを全部除去してみよう。

★Cool にソラマメをカスタマイズする! -Case.1-


★領域の探し方は、バックナンバーを見てもらうことにして。

・・・赤字部分が修正ヶ所。background-color(背景色)をコメントアウトしてみる。(/*~*/ で囲む)


# シンプルグレイ(幅100%) 2カラムテンプレートの場合

#container{ font-size:12px;
 width: 100%;
 /* background-color: #ffffff; */
 margin: 0px auto;
 text-align: left;
}

#content{
 margin-left: 200px;
 /* background-color: #ffffff; */
}

#links{
 width: 185px;
 float: left;
 text-align: left;
 padding: 20px 0px 0px 10px;
 margin: 0px;
 /* background-color: #ffffff; */
 overflow: hidden;
}

.blogbody{
 /* background: #fff; */
 margin: 0px 0px 10px 0px;
 padding: 8px;
 border-left: 1px solid #484848;
 border-right: 1px solid #484848;
 border-bottom: 1px solid #484848;
}
# オリジナルテンプレート2カラム(サイドバー右)の場合

#container{
 text-align: left;
 padding: 0px;
 width: 750px; margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 /* background-color: #FFFFFF; */
 color: #;
}

/* ブログタイトル・概要 */
#banner{
 /* background-color: #ffffff; */
 height: 200px;
 width: 750px;
 margin: 0px;
 overflow: hidden;
 background-image: url();
}
★これだけで、シースルーなブログになってしまった。・・・これからの季節、やっぱ透け透けがウレしいでしょ?

★Cool にソラマメをカスタマイズする! -Case.1-


Posted by Lovely Wolf at 12:25│Comments(4)【Cool デザインTips】


同じカテゴリー(【Cool デザインTips】)の記事画像
★Cool にソラマメをカスタマイズする!-Case.13-
★Cool にソラマメをカスタマイズする!-Case.11-
★Cool にソラマメをカスタマイズする!-Case.10-
★Cool にソラマメブログの衣替え! -Case.4-
★Cool にソラマメブログの衣替え! -Case.3-
★Cool にソラマメをカスタマイズする! -Case.8-
同じカテゴリー(【Cool デザインTips】)の記事
 ★Cool にソラマメをカスタマイズする!-Case.13- (2008-09-28 21:17)
 ★Cool にソラマメをカスタマイズする!-Case.11- (2008-09-21 21:49)
 ★Cool にソラマメをカスタマイズする!-Case.10- (2008-09-21 14:29)
 ★Cool にソラマメブログの衣替え! -Case.4- (2008-09-19 12:25)
 ★Cool にソラマメブログの衣替え! -Case.3- (2008-09-16 12:25)
 ★Cool にソラマメをカスタマイズする! -Case.8- (2008-08-14 12:25)
この記事へのコメント
わからない事だらけだけど勉強させていただきました。
少しずついじっていけたらなって思います^^
Posted by tubaki at 2008年05月16日 09:52
tubaki さん、コメントありがと。
そらまめで楽しくお勉強って、いいかも。
トラぶったら、Wolf の救急治療室 25 時で救急オペをお受けください。
私ごとで恐縮ですが、そろそろこのブログを閉鎖しよっかなって思ってま
したが、もう少し続けることにします。
Posted by Lovely WolfLovely Wolf at 2008年05月16日 10:15
早速聞きに来ちゃいましたw
この画面と同じ状態に今の椿もなってるわけですが
←こちら側の名前 メール URL の文字が出てないんです;;
まっくろのままで おかしいなぁ~と思い
聞きにきました^^;
きっと簡単なことかもしれないけど椿にとっちゃ初めていじる分野なので
一個一個謎だらけじゃ@@;
Posted by tubakitubaki at 2008年05月17日 07:54
tubaki さん、これでいけますか?
http://lovelywolf.slmame.com/e243109.html
Posted by Lovely WolfLovely Wolf at 2008年05月17日 16:16
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。