【第 49 話】 スクロールバーをCool にしてみる！- スタイルシート編集編 -


★セカンドライフとは快適な眠りにつくための睡眠薬だ！O ' Lovely 出版より

・・・セカンドライフ日本語版が登場する少し前、「セカンドライフ症候群」とか、「セカンドライフ眠り病」とかいう言葉が世に送り出された。夜中じゅうゲームに熱中して寝不足になることはよくある話だが、セカンドライフを始めたばかりの人たちにも同じ症状が現われ、会議室で居眠りが多発！なんてのがクローズアップされた時期があった。

・・・セカンドライフをやりますか？それとも、リアルライフをやめますか？みたいな。- by Lovely Wolf -


★という、どうでもいい前置きは置いときまして、彼女のお気に入りの場所に呼んでもらった。



★この体勢で微妙に回転しながら移動を続けてるようだ。



★おぉ！いい感じ。そろそろ眠くなってきたゾ。



★環境設定Environment Settings をMidnight にしてみた。



★あっ！間違えてクリックしちゃった。ちくしょぉ、彼女といい感じだったのに。orz

・・・「Snapshot」と「Stand up」のボタンが近すぎるっちゅうの！



★もう一度仕切りなおし。ここでは、こんなこともできちゃいます。




★という前置きも置いときまして、本日のお題になりますが、「スクロールバーをCool にしてみる！」ということで、何をするのかと思ったら、ブラウザのスクロールバーの色を変えてみただけなんだけど。死ぬほどヒマがある方はどうぞお試しください。

・・・以下の操作はIE 6.0 のみで動作確認済みなので、その他のブラウザでできるかどうかはオレのブログのサイドバーを見て判断してほしい。

★シンプルテンプレートでの例をあげるが、スタイルシートの一番最後の行に以下の部分をまるごと追加するだけだ。

・・・ねぇ、ブログのカスタマイズって簡単でしょ？

---

  

【第 46 話】 医龍・Wolf のソラマメテンプレート集中治療室 25 時！- 手術編 -


★ソラマメブログは、スタイルシートやHTML の知識を駆使すれば、ほとんどその原型をとどめないほどカスタマイズできるようになっている。

・・・そのためか、カスタマイズが中途ハンパに終わってるブログを時々みかける。

治療代にしては、1L$ にもならないような他人のブログの修正を、どうして続けているのか、いまだに自分でもわからんワケだが。完璧を求める性格がわざわいしてか、お昼ごはんを食べに行くのも忘れるほど、見て見ぬフリだけはできなかったとだけ言っておこう。- by Lovely Wolf -


★妖艶な奥さまのブログを見て、髪の毛の先からアドレナリンを空気中に放出している最中に、このブログって何かへんってことに気が付いた。ちなみにタイトル「奥さまは」・・・メイド？？？くそぉ、こぉんな奥さまを毎日メイド姿にしてる旦那がうらやましいゼ、まったく。



★あれ、左側のサイドバーが落っこちてんじゃない？



★とりあえず、デザインのプロも使っているIE 6.0 「Web Accessibility Toolbar 日本語版」でdiv タグの検査をしてみた。



★「このページにFRAMES要素が指定されているため利用できません」だって。ムムっ！こいつは重症だぁ。



★IE がダメなら、FireFox があるさ。IE よりもFireFox はあいまいに書かれた部分も解釈してくれるから、大丈夫と思うが。

・・・FireFox でもやっぱ、落っこちてる。それでは手術のお時間になりましたので、セクスィな奥さまには裸になって治療室に入っていただきます。ご覧の皆さんも指をくわえたままお待ちください。



★本日はFireFox 用のプラグイン「Web Developper」を使って、奥さまのおカラダに優しくタッチしてみる。

・・・「css」－「スタイル情報を表示する」をクリック。



★画面のどこかをクリックするとdiv タグの領域が赤い線で囲まれ、その部分のスタイルシートをみることができるようになっている。



★FireFox の下のほうにスタイルシートが表示されるので、div タグの領域名とそこに設定されたスタイルシートの内容をチェックすることができる。



★マジでソラマメのデザインをCool にしたけりゃ、これだけは抑えておいて損はない。

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

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


・・・「Web Developper」を使って領域を探すポイントは、画像や線の境界あたりをこまめにクリックして、領域の名前を探してみることだ。



★スタイルシートを見てみると、#container のwidth（横幅）が800 px になってる。

・・・どうやら、この数値を大きくすれば、よさそうだ。



★それでは、FireFox に表示させたまま、奥さまのカラダをいじってみることにする。

・・・して、気持ちいい声が出そうになった時は、我慢せずにお出しください。・・・「css」－「css を編集する」をクリック。



★スタイルシートのウィンドウとcss 編集のウィンドウをタブ切り替えできるようになった。



★なぜだかわからないが、「css 編集」タブを開いているときは、FireFox 上の領域をクリックしてもそのスタイルシートの部分を示してくれない。

・・・入力欄があるので、container と入れてから、虫メガネをクリック。さらに、width（横幅）が800 px を赤字部分のように大きくしてみた。



・・・このあたりは少しづつ広げながら試行錯誤してみてくれ。


★奥さまがこんなふうになっちゃいましたが、お気に召していただけたでしょうか？




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

---

  

【第 19 話】 画像付きのバックナンバーを記事の下に表示したい！- 続編 -


★毎日一日一スカウトしてみたら、一年で365 モデルが誕生する。



★ところで、一年前に日本人のモデル探しの仕事を依頼してくれた広告代理店の人は、まだSL をやってるんだろうか？



★とりわけ、初代SEXY SS モデルのドイツの姉さまは、いまだにお色気度全開というワケでして俺の手には負えない始末。



・・・目の保養も済んだことだし、そろそろいつものヤツでもヤリますか？して、本日のお題は「画像付きのバックナンバーを記事の下に表示したい！」の続編です。マイアルバムから抜き取った画像のレイアウトやデザインの仕方についてもう少し見てみることにする。- by Lovely Wolf -


【シンプルテンプレートをHack する！関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e154857.html
# Case 2.<Web URL> http://lovelywolf.slmame.com/e156571.html
# Case 3.<Web URL> http://lovelywolf.slmame.com/e162253.html
# Case 4.<Web URL> http://lovelywolf.slmame.com/e206206.html


★前回は、「マイアルバム」のページでHTML ソースを取り出し、テンプレートカスタマイズ画面で「個別記事」を編集するところまでやった。使ったのは「シンプルテンプレート 2 カラム」で横幅固定のテンプレートだ。

・・・横に4 つ並べられるようだ。



★「シンプルテンプレート 2 カラム(幅100%)」の場合

hmmm...どうやら、こっちは別に何もしなくてもテンプレートの横幅に合わせて画像が表示されるようになっているようだ。・・・ってことは、横幅を指定してあげれば、お好きな数だけ画像を並べるられるってことか？



★前回、テンプレートに貼り付けたHTML ソースをもう一度見てみよう。

★たとえば、「シンプルテンプレート 2 カラム(幅100%)」に表示されている画像を一行につき 4 個表示させてみる。このテンプレートは横幅100% だから、そのままだと画像が入るだけ並んでしまう。以下の赤字部分を追加してみた。

・・・あっ！もうできちゃった。album という領域の横幅 width に自分の好きなサイズを指定するだけか。チョロすぎるゼ。



★では引き続き、並んでる画像の大きさでも変えてみますか？

・・・さわるトコロといえば、さきほどのソース部分にある。画像の縦、横のサイズを150 px ×150 px にしてみた。以下の赤字部分を修正するだけだ。

★次回は、マイアルバムの画像をサイドバーに縦一列にレイアウトする方法を紹介しよう。

・・・ってことで、ブログパーツなんか使わなくとも、なんとかなるというわけさ。

---

  

【第 18 話】 画像付きのバックナンバーを記事の下に表示したい！- マイアルバム編集編 -


★とうとう、作品No.27 まで来ましたか。



★昨年の夏は、04 が最新だった。・・・以前はひと目見てD-Skin ってわかったけど、今のは個性的な部分がなくなったような。儲けるためならしゃあないのか？



★当時は、Google で「セカンドライフ」 + 「D-Skin」と検索すりゃ、本家を抑えてトップをキープしていた俺のブログもいつの間にか14位。てか、当時は本家のブログも存在すらしてなかったが。



★ふたたびD-Skin にあやかるつもりなどこれっぽっちもあらっしゃいませんが、半額セール実施中とあらば、外国産のお姉さま方とのデートに使ったところでなんらNp でしょ？



# D-Skin
<SL Url> secondlife://Linji/238/169/31/


★俺も何か始めなきゃ。

・・・と思いつつも、無常にも時だけは過ぎ去りし。俺に出来ることと言えば、シコシコとソラマメをHack することくらいか？ってことで、本日も退屈なWolf のデザイン講座でもやりますか。

・・・して、本日のお題は「画像付きのバックナンバーを記事の下に表示したい！」ってことだそうです。
さぁて、いったいどんなことをするんだか？- by Lovely Wolf -


【シンプルテンプレートをHack する！関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e154857.html
# Case 2.<Web URL> http://lovelywolf.slmame.com/e156571.html
# Case 3.<Web URL> http://lovelywolf.slmame.com/e162253.html


★管理画面　サイドメニューか、上部メニューから「管理画面TOP」を表示させたら、「このブログのアドレス一覧」のところにある「マイアルバムのURL（画像付きの記事の一覧表示ページ） 」に注目。



# 拡大図 「マイアルバムのURL（画像付きの記事の一覧表示ページ） 」



★このURL をクリックしてみたら、画像の一覧が表示されたゾ。

hmmm...ちょっと手を加えれば、これは何かに使えそうだ。



★さらに画面の上で右クリックし、「ソースの表示」を選ぶ。



★メモ帳が自動的に開いてソースが表示された。

・・・それでは、以下の部分をコピペして、テンプレートに貼り付けてみましょ。単なるコピペなので、新しく記事を書いたのに表示されないとかは、自分で対処してくれ。プログラムを作ってるわけじゃないし、コピペした内容しか表示されないのは当然ってことさ。

# Tips 1.
メモ帳に表示されたソースから該当部分を一発で探す方法がある。

・・・「Ctr」＋「Fキー」で検索ウィンドウを開き、たとえば、<style> で検索すればその場所がすぐにわかる。
簡単でしょ。


# Tips 2.
記事がものすごく多くて、上記のHTMLをすべてコピペするのはかなりたいへん。

・・・しかも、<div> タグで囲まれているから、閉じタグ</div> が１個少なかった日にゃ、一瞬にしてキミのブログのデザインは手に負えないほどまでに崩れまくるハズだ。

して、こんなときに重宝するのが、Wolf せんせのTips だ。

まずは基本を抑える。・・・して、コピペする部分の最終行付近のチェックを忘れずに。（以下の赤字部分）


★コピペ先は、テンプレート「個別記事」にしてみた。テンプレートは公開中のものを含め、3つまで作ることが出来る。もちろん、公開中のテンプレートは置いといて、新規にテンプレートを追加してからテストすることをおすすめする。



★すべてのページで同じように表示したければ、お好みで「トップページ」や「アーカイブ」も編集すればよい。



★肝心のコピペ先を公開しよう。48 行目付近にある「Posted by」 の直前に貼り付けてみた。

# Tips 3.
ソラマメの画面では、入力欄が小さすぎてミスしやすい。

・・・面倒でも、「個別記事」にカーソルを置き、「Ctr」＋「Aキー」で「個別記事」のソースを全て選択してから、「Ctr」＋「Cキー」でコピーし、メモ帳などのテキストエディタに貼り付けてから進めることだ。

・・・失敗する可能性もゼロじゃないから、Wolf せんせのTips は神の声と思って心して聴くように。


★テキストエディタ上で「個別記事」のソースに「マイアルバム」のソースを追加できたら、「Ctr」＋「Aキー」で全てを選択してから、「Ctr」＋「Cキー」でコピーし、ソラマメの「個別記事」の入力欄に貼り付ける。このとき、ソラマメに保存されている「個別記事」のソースを「Ctr」＋「Aキー」で全て選択してから上書きする必要があることは言うまでもない。

・・・「プレビュー」ボタンで、できあがりをチェックし、Ok なら忘れずに「登録」ボタンを押す。「登録」するまでは、「プレビュー」を見ながら、何度でもやり直せるというわけさ。



★どうやら、「Posted by」の前に画像を入れることができたようだ。

・・・画像数やデザインの変更の仕方は、次回の講座にて。

---

  

【第 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）に画像を入れる記述をしている人が多い。
★しかし、この方法では記事を読んでるときに画面をスクロールさせるといっしょに画像も消えてしまう。消さずに残しておきたいって場合どうすればいいのかな？ってのが、本日の講座のポイントだ。

講座といっても、別にむづかしい話をするつもりなんかなくて、スタイルシートの以下の赤字部分をちょこちょこって直してみるだけ。
（body というところに、固定的に表示させたい画像のリンクを書くだけ）
★すると、ほら、この通り。スクロールしても、背景画像は身動きひとつしないでしょ。

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



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

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

---