★ソラマメのデザインをHack する！ - セカンドライフブログテンプレート 編 - *Lovely Wolf Report in SL*

2008.02.09.Sat

第202 話 【★Wolf is back to SLMaMe！】

★読者のみなさん、Konnichiwa！2月に入り、しばらくごぶさたしておりましたが、いかがお過ごしでしょうか？

・・・セカンドライフにも来ないで、何やってるの？って言われた日にゃ、セクシーな美人Avatar さまの豊満なボディを穴が開くまで激視する楽しみを犠牲にしてまでも、交感神経への刺激にともなう脳内物質の垂れ流しが止まらなくなるほどの楽しみに浸っているとだけ付け加えておくことにしよう。
- by Lovely Wolf -


★問題のブログはコレだ！

# ♪ヽ(∇⌒= )　みぃのブログ　( =⌒∇)ﾉ♪
<WEB Url> http://mee.slmame.com/e116715.html

・・・ソラマメの住人☆みぃ☆さんのブログ。ソラマメのテンプレート編集がうまくできないという記事を見て、そのことをずっと頭の片隅に残したまま、何日も過ぎてしまい。



★忘れないうちにやっちゃえ〜ってことで、一昨日の2/7 に、あるブログをいっきに立ち上げてしまった。

・・・ソラマメの住民のために始めたブログなので、エロも奴隷も美女も無し。ソラマメやってない人には、関係ないかも。セカンドライフのことを書くつもりもないし。

・・・ソラマメからもっともっとカッコいいブログが出てくることだけを期待して、Wolf せんせがソラマメをFuck してみた。ブログのテンプレートなんて、基本形のスタイルシートを少しいじれば、自分らしいデザインを起こせるようになっているわけで。

・・・セカンドライフでモノづくりできる人たちが他人の作ったブログテンプレートをいつまでも使わせてもらっているようじゃ、日本のセカンドライフブログはいつまでたっても世界に追いつけやしない。

とか言いつつ、始めてしまったのだけれど、・・・リアルH な時間が益々削られていく。俺ってどこまでお人よしなんだか？

# Lovely Wolf Report in SLMaMe
<WEB Url> http://lovelywolf.slmame.com/

---

☆ソラマメでアクセス解析 - #1 -

2007.04.24.Tue

第26 話【☆ソラマメでアクセス解析 - #1 - 】

いつも思うのですが、ソラマメってすごい。
Google のキーワード検索の結果で、私のブログがあちこちでランキング1位！！

これってすごくない？


第1位：「セカドル」＋「Sae rosse」

・・・記事自体の内容は私のプライベートばかりで、なんじゃコレ？って感じなんだけど。
なぜか第1位。Sae rosse さん、ありがとう。


第1位：「甲賀湯」

・・・不動の第1位。ここだけは誰にも渡さないと誓ったのだ。


第2位：「SL」＋「SEXY」、「SL」＋「美人」

・・・「セカンドライフ」＋「SEXY」や、「セカンドライフ」＋「美人」では、全く見つからない。
これは、次回の記事で試す価値あり。きっと、上位に食い込むはずである。


ちなみに、昨日の記事「☆週末に行ったところ - メルティングドッツ編 - 」は、まだ、Google bot に収集されてもいないようだ。
・・・「メルティングドッツ」でGoogle 上位にランクイン？別にどっちでもいいけど。


☆ソラマメトップページの検索ボタンを使ってWolf のブログに来た人は、こんなキーワードを入れている。



☆やはり、「セカドル」、「Sae Rosse」が強い。
☆「Sexy」、「SS」あたりは、オレの代名詞と化したようだ。
☆「スクリプト？」、「LSL？」・・・何じゃそれ？


気になる「Lovely Wolf」をGoog ってみた。ランキングの第1位は？

<WEB Url>
http://www.welaf.com/funny-picture-6310.html

---

【☆Lovely Wolf 本日の記事】

☆イベント情報　ゴールデンウィークもセカンドライフ三昧？
http://lovelywolf.blog121.fc2.com/blog-entry-25.html

---

☆今日の裏ワザ

2007.04.18.Wed

第17 話【Case2. さらに、ソラマメブログのデザインをいじる】

Wolf の本日の裏ワザは、昨日のつづきで、自分の好きな位置にブログの説明文を表示させてみることにする。

ブログのタイトルロゴを、画像編集ソフトでCool に決めて、ダサいテキスト文字とはおさらばしようゼ。



1.操作メニューの「デザイン」を選び、左サイドバーメニューの「オリジナルデザインの登録」を選ぶ。

注意：スタイルを編集する前に、入力欄のテキストデータを丸ごとファイルにバックアップしてください！失敗してもすぐに復旧できますから。



2.まずは、「スタイルシート」で、画像の上に表示された文字の位置を移動してみる。

・ブログのタイトル名

.blogtitle{
font-size:30px;
font-weight:bold;
padding:20px 0px 0px 10px;
text-align:left;
letter-spacing:2px;

}

・ブログの説明文

.description{
color:#fff;
font-size:12px;

padding:0px 0px 0px 0px;
text-align:left;
letter-spacing:2px;
position: absolute;
top: 300px

}

Tips.1 ここがポイント！

ブログの説明文に、赤字部分を追加してみた。

この指定をすると、ブラウザ表示領域の最上部からの距離を指定できる。
とりあえず、ざっと指定して様子をみながら、数値をチューニングしてみるのがよい。
オレはtopから300pxの位置でのおさまりがちょうどシックリおさまった。

3.さらに、リンクテキストにマウスオーバーしたときにCool に下線を表示させる方法である。

・ブログのタイトル名がリンクテキストである場合の設定

#banner a{color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{color:#fff;text-decoration:none;}
#banner a:active{color:#fff;text-decoration:underline;}
#banner a:hover{color:#fff;text-decoration:underline;}

・ブログの説明文がリンクテキストである場合の設定

#subbanner a{color:#fff;text-decoration:none;}
#subbanner a:link{color:#fff;text-decoration:none;}
#subbanner a:visited{color:#fff;text-decoration:none;}
#subbanner a:active{color:#fff;text-decoration:underline;}
#subbanner a:hover{color:#fff;text-decoration:underline;}

Tips.2 ここがポイント！

color:#fff;文字の色を指定する。#fff は白のこと。
text-decoration:underline; 下線を表示する。
text-decoration:none; 下線を表示しない。
a:active{ } マウスオーバーしてるとき
a:hover{ } 同上

4.次は、ブログのタイトル名を消す方法である。「トップページ」のHTMLの中から以下の部分を探してみよう。デフォルトでは、34行目付近にある。

<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" mce_href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>



Tips.3 ここがポイント！

ブログのタイトル名を消したければ、赤字部分を丸ごと消せばよい。

<%BlogUrl%> ブログのURLのこと。
<%BlogTitle%> ブログのタイトル名のこと。
<%BlogDescription%> ブログの説明文のこと。

4.「個別記事」「アーカイブ」のHTMLも同じようにいじっておこう。見た目が統一できるゾ。

---

 【☆Lovely Wolf 本日の記事】

★SEXY SL 美人 - No2 -
http://lovelywolf.blog121.fc2.com/blog-entry-18.html

---

☆今日の裏ワザ

2007.04.17.Tue

第16 話【Case1. ソラマメブログのデザインをいじる】

先日、RLのお友達に、ソラマメブログの使い方を教える機会があった。
私のブログのデザインについて、ここをこうすればいいんだヨっていう話しになったので、日頃遊びに来てくださっているソラマメ読者の皆さんにも、教えよう。

・・・もしよかったら、SL 内のお友達にも教えてあげてくれ。実は、オレのブログも元々、シンプルテンプレート 3カラム シンプルグレー(人気度現在：85件) がベースなのだ。でも、他の人とまったく同じデザインってやっぱイヤだよネ。

☆Wolf の本日の裏ワザでは、自分が撮影したSSを使ってブログの顔ともいうべき一番上のトップ部分に画像を表示させてみることにする。



#1. まずは画像を登録しよう。

・・・自分が使うデザインテンプレートに応じて画像のサイズを変える必要があるが、オレの場合、「シンプルテンプレート 3カラム シンプルグレー」という名前のテンプレートを使っている。（幅100%）と書かれたテンプレートを使っていなければ、横幅サイズが740px（縦：自由）の画像を準備すればよい。



・・・デザインテンプレートとは？？？

ブログの基本デザインのことをさす。また、3カラムとは、ページの構成が左側メニュー部分・中央記事部分・右側メニュー部分の3列になっているものをさす。2カラムなら、左側メニュー部分・右側記事部分の2列のみ。さらに、（幅100%）のテンプレートは、開いているブラウザのサイズに応じて、画面が左右に移動するので、トップ画像の幅はキレイに収まるように考えてデザインしてあげる必要があるので難易度は高め。



#2. 操作メニューの「記事の投稿」を選び、左側メニュー部分にある「記事投稿メニュー」の中から「画像・動画の登録、一覧、削除」を選ぶ。



#拡大図



#3. 「画像のアップロード」をするための入力欄が表示されるので、ここから画像を登録する。



#拡大図



☆ここがポイント#1.

・・・「アップロード」ボタンを押す前に、「オリジナルサイズ」がチェックされているか確認すること。



#4. 「参照」ボタンをクリックして、登録したい画像を選ぶ。



#5. 「アップロード」ボタンをクリックして、画像を登録できたら、操作メニューの「デザイン」を選び、
「オリジナルデザインの登録」を選ぶ。



#拡大図



#6. トップの画像を差し替えるためには、「オリジナルデザインの登録」の画面にある「スタイルシート」入力欄からスタイルシートを修正する必要があるのだ。

・・・スタイルシートとは？？？

自分のブログの基本デザインを一度に変更できる仕組みだ。たとえば、ブログ内のリンク文字の色をすべてピンク色にしたり、マウスオーバーした時に下線を消したりなどもできる。さらに、ブログの各部の見出しの背景の画像を変える場合にもスタイルシート部分で細かく設定できるようになっている。

！ご注意：スタイルを編集する前に、入力欄のテキストデータを丸ごとファイルにバックアップしてください！失敗してもすぐに復旧できますから。バックアップの方法は「ここがポイント#2.」を参考にしてくれ。



☆ここがポイント#2.

・・・スタイルシートを修正する場合には、テキストエディタを使って編集することをおすすめする。
テキストエディタとは、Windows標準の「メモ帳（ノートパッド）」や「ワードパッド」などのテキスト文字を編集できるソフトのこと。

・・・ソラマメの「スタイルシート」入力欄で編集作業すると、いちいちスクロールしなければならないので非効率の上に、ミスが起きやすいからだ。以下では、「メモ帳」を使ってスタイルシートを加工する方法を紹介する。

#手順1. 「スタイルシート」入力欄の中に入ってるものをすべて選択したあと（「Ctr」+「A」キーを同時に押す）、右クリックで「コピー」を選ぶ。



#手順2. 「メモ帳」を開き、右クリックで「貼り付け」を選ぶ。これを保存すれば、バックアップの完成。



#手順3. 「メモ帳」の上で、「Ctr」＋「F」キーを同時に押し、「検索」ウィンドウを出す。

・・・ここで、「#banner,#subbanner」と入力し、「次を検索」ボタンをクリックする。



#手順4. 赤文字部分を修正する。

<スタイルシートの設定>
#banner,#subbanner{
background:#787878 url(http://www.slmame.com/usr/lonelywolfrep01/slmame-banner02.jpg) left bottom;
padding:0px 10px 10px 10px; width:720px; height:355px}



#手順5. 「メモ帳」で、修正したら別名でファイルを保存しておく。

#手順6. 修正した部分をソラマメの「スタイルシート」に登録する。

・・・てっとり早いやり方は、「メモ帳」の中をすべて選択してから（「Ctr」+「A」キーを同時に押す）、右クリックでコピーする。



#手順7. 「スタイルシート」入力欄の中に入ってるものをすべて選択したあと（「Ctr」+「A」キーを同時に押す）、右クリックで「貼り付け」を選び、上書きする。



#手順8. 画面一番下にある「登録」ボタンをクリックする。以上で「スタイルシート」の設定は終了だ。



☆ここがポイント#3.

<スタイルシートの設定値>
画像の保存先：http://www.slmame.com/usr/lonelywolfrep01/slmame-banner02.jpg)
画像のサイズ：width:720px; height:355px

・・・Wolf せんせは、画像の保存先とサイズをどうやって調べたのだろうか？

#手順1. 画像の保存先の調べ方は、冒頭の#1.〜#4. でやった「画像・動画の登録、一覧、削除」をもう一度見てほしい。赤線で囲んだ部分の画像をクリックする。



#手順2. 新しくウィンドウが開き、原寸大の画像が表示される。



#手順3. 画像上で右クリックして、「プロパティ」を見る。



#手順4. 画像の「プロパティ」に保存先とサイズが表示された。

・・・この情報を「スタイルシート」に記入すればよいのだが、横×縦の各サイズはそのまま入れると表示が崩れるようだ。

・・・画像のサイズは「プロパティ」では、、width:740px; height:365px となっているが、実際に「スタイルシート」に指定する値は、width:720px; height:355px にしなければならない。

・・・つまり、画像の実寸よりも、横20px, 縦10px を差し引いた値をスタイルシートに設定しないといけないようだ！どうしてかって？そんなことはWolf せんせの知ったこっちゃない。

<スタイルシートの設定値>
画像の保存先：http://www.slmame.com/usr/lonelywolfrep01/slmame-banner02.jpg)
画像のサイズ：width:720px; height:355px

・・・width とは、横幅。height とは、高さのこと。何度も言ってるが、画像の高さは自分の好きなサイズで作ればよいが、スタイルシートには、縦10px を引いた値を設定するんだゼ。



・今日はここまで。ブログのメインタイトル（Wolf は消してる。）、ブログの概要の修正方法は明日のレポートで紹介するつもりだ。

---

【☆Lovely Wolf 本日の記事】

☆今日行ったところ - 禁断の街 ドイツ -
http://lovelywolf.blog121.fc2.com/blog-entry-15.html

---