ソラマメブログ

flickr badge Gallery
... more
☆手軽にソラマメブログのスタイルシートやHTMLテンプレートを変更できるTips を紹介します。
ソラマメブログ › * Lovely Wolf Report in SLMaMe * › 【ソラマメ】 オリジナル★テンプレート

2008年10月11日

★ブログトラブルカルテ公開中! -Case.6-


【第 78 話】 医龍・Wolf のソラマメテンプレート集中治療室 25 時!- 診察編 -


★セカンドライフとは、新たな素材を手にするための新世界である!O ' Lovely 出版より

・・・リアルのおかげでセカンドライフにログインできないためか?ブログでセカンドライフを題材にした記事をほとんど書いてないにもかかわらず、セカンドライフブログと錯覚されてしまうのは素材を随所に使ってるからなのだろうか?

・・・リアルの商材を売るために存在しているスパムブログと言えど、ブログを構成する素材をセカンドライフから採ってきて使ってさえいれば、見た目はセカンドライフブログになってしまうのだから、ソラマメの住人から非難を浴びるということは少なからず抑えられるハズだ。

・・・ソノ手の連中が手間ひまかけて参戦してくる確立はゼロとは言えず、そこに需要さえあれば、あとは時間の問題かもしれない。- by Lovely Wolf -


今、かかってる曲は、Chris De Burgh のナンバーで、【Lady In Red 】

Now, Today's best music for u, Chris De Burgh licence,[Lady In Red ]

#Youtube 「Liv Tyler is Hot」より引用
http://jp.youtube.com/watch?v=maVEzIezOiw&feature=related




★本日は、「コメント、続きを読む、前のページ、サイドバーのカテゴリ、過去の記事」など、多くの部分が作動しなくなってしまいました」とお嘆きのK さんのブログを診察室に送りこんでみた。

・・・初めて見るブログだけど、とってもCool な印象。




★記事のページを開き、「前のページ(Previous Page)」と「次のページ(Next Page)」部分にカーソルを置いてみた。




★ムムっ。左下(IE の場合) に現われるリンク先がどうもおかしい。「次の記事」ではなく、ブログの「トップページ」にリンクしてるようだ。

・・・この部分ってソラマメのプログラムが認識して文字やリンクを表示させる置換タグになっていたハズ。




# Tips.1 ソラマメから提供されるURL

<ブログトップページURL>
http://lovelywolf.slmame.com

<個別記事ページURL>
http://lovelywolf.slmame.com/e394601.html

<アーカイブページURL>
http://lovelywolf.slmame.com/c30719.html
http://lovelywolf.slmame.com/d2008-10.html

<その他のページURL>
http://lovelywolf.slmame.com/sitemap.html
http://lovelywolf.slmame.com/album.html
http://lovelywolf.slmame.com/tag
http://lovelywolf.slmame.com/y0321

※「ブログトップページ」「個別記事ページ」「アーカイブページ」の3 つは、個別にHTML 編集可能である。

※共通スタイルシートを編集すると全体に反映されるが、この中に各ページのスタイルを書くこともできる。




★不具合になる原因として、「HTML を編集可能」になっているという部分が一番あやしい。

・・・K さんの「個別記事ページ」に表示されている、「前のページ(Previous Page)」と「次のページ(Next Page)」のHTML ソースを見てみた。


<div class="menu"><IfPrevPage>[<a class="amenu" href="">Previous Page</a>]</IfPrevPage><IfNextPage>[<a class="amenu" href="">Next Page</a>]</IfNextPage></div>
<div class="pagetop"><a class="aposted" href="#top">▲To Top of page</a></div>


・・・次は、オリジナル★テンプレートで作ったばかりの「個別記事ページ」のHTML ソース。
日本語の部分を比較するんじゃなくて、その、<IfPrevEntry> ~ </IfPrevEntry>と、<IfNextEntry> ~ </IfNextEntry> の部分に注目してほしい。


<div class="menu"><a class="amenu" href="http://lovelywolf.slmame.com/">このBlogのトップへ</a><IfPrevEntry>│<a class="amenu" href="#">前の記事</a></IfPrevEntry><IfNextEntry>│<a class="amenu" href="#">次の記事</a></IfNextEntry></div>


★K さんのは、この部分が<IfPrevPage> ~ </IfPrevPage>と、<IfNextPage> ~ </IfNextPage> となっている。これって「トップページ」用のページャのリンク方法だと思うけど。もしや、「個別記事ページ」のHTML 部分に「トップページ」のHTML ソースを入れたとか?


Tips 2.ソラマメでは、「ブログトップページ」「個別記事ページ」「アーカイブページ」のそれぞれにテンプレートの編集ができる。

・・・我々がイジクリまわしたHTML をキレイに表示してくれるのがプログラムのお仕事なワケで、いわゆる置換タグ(<IfPrevPage> ~ </IfPrevPage>と、<IfNextPage> ~ </IfNextPage> )がなかったり、修正されていると機能しなくなるのは当たり前か。「コメント」や「トラバ」を置換するタグも、「個別記事ページ」にないから出てこなくなったというワケだ。

・・・して、対処法は簡単だ。

# 1.新たに「オリジナル★テンプレート」を作り、「ブログトップページ」「個別記事ページ」「アーカイブページ」それぞれに入っているHTML ソースを一度、テキストエディタを使ってバックアップする。

・・・それぞれを比較してもらうとわかるハズだが、部分的に微妙な違いがあるようだ。たとえば、「コメント」や「トラバ」を表示させる部分は「個別記事ページ」にしかないし、「次へ」「前へ」を表示させる部分も名前が違う。




# 2.不具合になってるそれぞれのHTML ソースも念のためバックアップして、テキストエディタに展開する。

# 3.新しく作ったほうのHTML ソースにデザインやカスタマイズした部分を移植する。

# 4.完成したら一番下にある「保存」ボタンを押して、「このテンプレートを使う」をクリックすれば終わり。


# Tips 2.ソラマメの画面上で操作していると何行目を修正しているのかわからなくなるので、手間でもテキストエディタ上で作業をしたほうがよい。ただし、修正した内容をソラマメの入力欄にコピペする際には、「ブログトップページ」「個別記事ページ」「アーカイブページ」をごちゃ混ぜにしないように注意が必要だ。


# Tips 3. デザインの修正は、こまめに「プレビュー」ボタンを使って確認しながらやったほうがよい。


  

2008年09月03日

★ブログをCool にする背景画像プレゼント中!-Case3


【第 67 話】 ブログの背景にCool な影を付けてみる!
- オリジナルテンプレート専用背景画像ダウンロード編 -


The story [67] in the background of your blog with a shade more Cool! - Background images only downloaded the original template Chapter -

★先着100 名までリクエストしてくれた方にプレゼントしています。
作ってある画像は好きなだけダウンロードして使ってください。くわしくは、記事の最後をご覧ください。
Up to the first 100 people who requested me to present. Please download and use the image as you like.For details, please see the end of the article. - by Lovely Wolf -


★夜な夜なご主人さまの訪問を待ち続けるSlave たちの棲み家のことを聞き、幸運にも潜入に成功した。
Nightly I listened to the compartmentalization of the house of slaves wait for visit by master , successfully infiltrated by luck.



★これが、Gorean Meter か?ご主人さまに撃ち殺されたくなければ、Observe モードにしてと。
Is this Gorean Meter? As customers do not want your husband to shot, make sure to set the mode of ovservers.



★おぉ、アレがウワサのSlave の城か?
Oops, Is that slave castles of the rumors?



★ドラキュラ伯爵もいっしょに棲んでそうな雰囲気だけど。
Maybe, the atmosphere is likely vampire's mansion..



★ピンポ~ン。
Hello?



★あのぉ~、どなたかいらっしゃいますか~~。
Well, anybody is home?



★玄関を開けっ放しにして、泥棒でも入ったらどうするつもりやねん、まったく。
Opeing the front door, what is the hell of going on, if thiefs come in ? Once you going to do at all.



★おぉ!さっそく、期待していた代物を見つけてしまった。
Oops ! Now, I was hoping to find stuff.



★あっ!
Oh!



★ココは使える!・・・これなら、3 人同時に遊べそうだ。まずは、LM を保存して。
Can be used here! This bed is so nice because three plays at the same time. First, I have to save LM.



★ムムっ!この先は?・・・いよいよ修行中のSlave たちとご対面か?
MUMU ! The destination? Slave in training and we finally meet them?






★Cool な背景画像プレゼント中!



★リクエストをくれた方はこちらもご覧ください。 >

# Cool な影 - case 06 -



# Cool な背景画像プレゼント応募方法 「××ブログですが、画像ください」と図にあるようなメッセージからリクエストしてください。

# 締め切り 2008 年 9 月 15 日

# 応募した時のあなたのブログの色、横幅にて作ってあげます。あとでデザインを変更された場合には、もちろん対応しませんが。



★どんな画像かは、次の記事をみてください。
オレのサーフィン姿の画像を想像した方は、残念なことにお持ち帰りにはなれません。

・・・作った画像は誰でもダウンロードできますので、先着100 名というよりも先着リクエスト100 色までと言ったほうが正しいかも。

【Cool な背景画像 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e338585.html#present


  

2008年08月30日

★ブログをCool にする背景画像プレゼント中!-Case2


【第 65 話】 ブログの背景にCool な影を付けてみる!
- オリジナルテンプレート専用背景画像ダウンロード編 -



★先着100 名までリクエストしてくれた方にプレゼントしています。
作ってある画像は好きなだけダウンロードして使ってください。くわしくは、記事の最後をご覧ください。
- by Lovely Wolf -


★今、かかってる曲は、The Prodigy のナンバーで、【Smack My Bitch Up 】

Now, Today's best music for u, The Prodigy's license,[Smack My Bitch Up]

・・・映画「Charlie's Angels (2000)」をバックにお届けしよう。

#Youtube 「C's A Pt 10: After The Thin Man 」より引用
http://jp.youtube.com/watch?v=30TRzd5rEJE&feature=related




★じぃぃぃーーーっ!



★じぃぃぃーーーーーーーーーーっ!



★どうやら彼女はリアルもSL も、ホンモノのSlave のようだ。

・・・以前、彼女はブログのことでオレからコメントをもらったらしいが、イマイチよく覚えてない。
偶然にもセカンドライフで出会ってしまったということは、オレ達には縁があるということかもしれない。



★「エロとの戦い」・・・それはソラマメ合衆国がスローガンに掲げる終わりなき戦いである。

・・・とは言え、透け透けが世界を救っているのもまた事実である。





★Cool な背景画像プレゼント中!



★リクエストをくれた方はこちらもご覧ください。 >

# Cool な影 - case 06 -



# Cool な背景画像プレゼント応募方法 「××ブログですが、画像ください」と図にあるようなメッセージからリクエストしてください。

# 締め切り 2008 年 9 月 15 日

# 応募した時のあなたのブログの色、横幅にて作ってあげます。あとでデザインを変更された場合には、もちろん対応しませんが。



★どんな画像かは、次の記事をみてください。
オレのサーフィン姿の画像を想像した方は、残念なことにお持ち帰りにはなれません。

・・・作った画像は誰でもダウンロードできますので、先着100 名というよりも先着リクエスト100 色までと言ったほうが正しいかも。

【Cool な背景画像 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e338585.html#present


  

2008年08月23日

★ブログをCool にする背景画像プレゼント中!-Case1


【第 64 話】 ブログの背景にCool な影を付けてみる!- オリジナルテンプレート専用背景画像ダウンロード編 -


★自分のブログにもCool な影を付けてみたいという欲張りな方へ、先着100 名の方にプレゼントしています。くわしくは記事の最後をご覧ください。- by Lovely Wolf -


★今、かかってる曲は、Remy Zero のとぉってもCool なナンバーで、【Older I Get 】

・・・Tru Calling ファーストシーズン第1 話「ストレンジ・デイ / Pilot 」をバックにお届けしよう。

#Youtube 「Tru Calling - Older I Get」より引用
http://jp.youtube.com/watch?v=mKerXx7UtUk&feature=related




★セカンドライフには、Avatar の実写なのかリアルの絵なのか見分けのつかないようなモノがある。

・・・とある家具屋さんに飾ってあった。

# Secret Pleasures Mall Rent Shop
<SLURL>&nbsp;secondlife://Secret Pleasures/42/155/27/


アラブのご主人さま :Hair Fair って何のことだかわかるか?
召し使い :はい、ご主人さま。世界じゅうのステキなHair が集まっているイベントでございます。



アラブのご主人さま :おまえも欲しければ、連れてってやるぞ。
召し使い :わたくしは、ご主人さまにいただいたこのHair が一番のお気に入りでございます。



Wolf :わたくしは、ご主人さまにホットタブ付きのH で豪華 なXXX ベッドを買ってほしいのですが。orz





★Cool な背景画像プレゼント中!



★リクエストをくれた方はこちらもご覧ください。 >

# Cool な影 - case 04 -



# Cool な背景画像プレゼント応募方法 「××ブログですが、画像ください」と図にあるようなメッセージからリクエストしてください。

# 締め切り 2008 年 9 月 15 日

# 応募した時のあなたのブログの色、横幅にて作ってあげます。あとでデザインを変更された場合には、もちろん対応しませんが。



★どんな画像かは、次の記事をみてください。
オレのサーフィン姿の画像を想像した方は、残念なことにお持ち帰りにはなれません。

・・・作った画像は誰でもダウンロードできますので、先着100 名というよりも先着リクエスト100 色までと言ったほうが正しいかも。

【Cool な背景画像 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e338585.html#present


  

2008年08月23日

★ブログをCool にする背景画像をここでダウンロード!


【第 63 話】 オリジナルテンプレートをもっとCool にしたい! - 背景画像ダウンロード編 -


★利用方法:必ずダウンロードし、ご自分のブログにアップロードしてからお使いください。

- case 1.-

# ブログの横幅:750px
# ブログの背景色:うすいグレー # 999999






- case 2.-

# ブログの横幅:750px
# ブログの背景色:白 # FFFFFF





- case 4.-

# ブログの横幅:750px
# ブログの背景色:黒 # 000000
# フラッシュ効果色:水色 # 00FFFF





- case 5.-

# ブログの横幅:750px
# ブログの背景色:うすいピンク # ECD9FFF
# この色はオリジナル★テンプレートの色ではありません。





- case 6.-

# ブログの横幅:750px
# ブログの背景色:グレー # 999999






# Tips 1.背景画像の設定

【Cool な背景画像 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e338585.html#present


# Tips 2.ブログの背景色

赤字部分がブログの背景色。


/* HTMLタグ設定 */
body{
margin: 0px;
padding: 0px;
text-align: center;
background-color: #000000;
font-size: 100%;
}
★背景色はbackground-color を使って指定されている。



★#000000 は黒のこと。ココでオリジナルテンプレートの背景色を一瞬にして変えることができる。

# 拡大図


★オリジナルテンプレートを初めて作ったときには、背景色を指定してるはずだ。

・・・とは言え、そんなこと覚えてるヤツならこのブログなんか読む必要はないと思うが。orz




# Tips 3.ブログの背景画像

赤字部分がブログの背景画像。・・・しかし、そのままコピペするのだけはヤメてほしいゼ、まったく。


/* HTMLタグ設定 */
body{
margin: 0px;
padding: 0px;
text-align: center;
background:#000000 url(http://img01.slmame.com/usr/lovelywolf/slmame-back-04.jpg) repeat-y top center;
background-color: #000000;
font-size: 100%;
}