【第 136 話】 セカンドライフブログは表示するたびに次々と美女が出てくる！
- JavaScript + スタイルシート 初級 編 -
The story [136] Would you like to be making style of your blog up more? - Continued JavaScript & CSS Chapter -
★そろそろ2 月も終わりに近づき、リアルの忙しさも落ち着きつつある本日は、読者の皆さんにとって禁断のTips を紹介する。【悪用厳禁】
久しぶりのWolf のデザイン講座に来た読者のみなさんには、ソラマメで最も利用率が高いと言われているオリジナル★テンプレートのメイン画像をランダムに表示させる裏ワザでもやってもらおうじゃないか。
・・・これを機にソラマメが究極の美女の肢体でいっぱいになることを祈願いたしまして。orz
- by Lovely Wolf -
★とは言いつつ、お昼ごはんを食べながらのお勉強は胃によくない。しゃっくりが出だしたら、13 時までに止まらないっすよ。
★まずは、Redgrave の最新作でもおひとつどおぞ。
★hmmm...オレが色気を感じるのは、やっぱDeep Tan かも。
★お口直しにお茶でもグイっといってもらったトコロで、そろそろ退屈な講座でもやりますか。
・・・気の短いキミは、いきなり公開中のブログをいじって、どうぞパニくっちゃってください。
・・・しかし若葉マークのキミは、まずは公開してないテンプレートを新たに作り、ウォーミングアップから地道に始めるのがよろし。
★では、オリジナルテンプレート3カラム(サイドバー左右)をちゃっちゃと作ってください。
・・・事例で紹介しているサンプル画像のサイズは、横750 px、縦500 px です。
★はい、ココまでわずかに30 秒。
・・・今度は、カスタマイズ用の画面にある「スタイルシート」を
赤字部分のように修正する。
サンプル画像は縦500 px なので、スタイルシートの文法にのっとって修正すると、不思議なことに彼女がマッパになってくれるハズだ。
# Tips 1. コメント（/* ～ */）を追加すると、設定されているスタイルを無効にできる。
# Tips 2. ソラマメのオリジナル★テンプレートでは、メイン画像領域（banner）のサイズは、デフォルト横750 px、縦200 px に設定されているが、そんなんお好きなように直してしまえばいいさ。
/* ブログタイトル・概要 */
#banner{
background-color: #333333;
/* height: 200px; */
height: 500px;
width: 750px;
margin: 0px;
overflow: hidden;
background-image: url(http://img01.slmame.com/usr/lovelywolf/09022406.jpg);
}
# 実際の図
★さらに、ココまでわずか45 秒。
# 実際の図
★つぎに、カスタマイズ用の画面で「トップページ」を修正する。
・・・探すのは、</head>タグの部分。この直前に改行を入れてから、以下のJavaScript を放り込む。
JavaScript をコピペする場合には、著作権情報を記載してください。スクリーンセーバーじゃないけど、名前はスクリーンセーバーってことで。もちろん、画像部分はご自分のものと入れ替えてください。
赤字部分を自分の画像にすれば、そのまま使えます。
-----------------------------------------------------------
- お詫び - 2009/02/25 Wed 23:00
以下のスクリプトの一部がこの記事上に
きちんと表示されていませんでした。
理由は、< >タグをHTMLエンコードし忘
れて書いてしまったため、実際にJavaScript,
CSS コードとして動作してました。orz
朝 04:00 に書いた記事なのでご容赦ください。
-----------------------------------------------------------
<script language="JavaScript">
/*--------------------------------------------------------------------------
* Blog Screen Saver, version 1.0.7
* Copyright(C)2009/* Lovely Wolf Report in SLMaMe * ALL Rights Reserved
* For details, please check the website :
http://lovelywolf.slmame.com/
*--------------------------------------------------------------------------*/
var imglist = new Array(
"
http://img01.slmame.com/usr/lovelywolf/09022406.jpg",
"
http://img01.slmame.com/usr/lovelywolf/09022407.jpg",
"
http://img01.slmame.com/usr/lovelywolf/09022408.jpg",
"
http://img01.slmame.com/usr/lovelywolf/09022409.jpg",
"
http://img01.slmame.com/usr/lovelywolf/09022410.jpg" );
var num = Math.floor((Math.random() * 100)) % imglist.length;
document.write('<style type=text/css>');
document.write('#banner{');
document.write('background-image: url(' + imglist[num] + ');');
document.write('}');
document.write('</style>');
</script>
# 実際の図
</head> の前に入れても、後に入れても動きますが、</head> の直前に入れるようにしてください。
・・・「トップページ」「個別記事」「アーカイブ」すべて同じように入れれば、どのページを見ても差異なく動いてくれる。
★できあがったら「プレビュー」ボタンをクリックして、うまくいったか試してみてください。
・・・クリックするたびに、次々と美女が出てくれば正解！Wolf せんせぇ、感動しましたって声が聞こえたような聞こえなかったような。
★ココまでわずかナインティーンセカンズ！ってことは、オレもニコラス刑事みたくクルマ泥棒になれるかも。orz
★いちおう、「トップページ」「個別記事」「アーカイブ」それぞれの「プレビュー」をチェックするのがプロの仕事です。
★とりあえず簡単なJavaScript だから、ブログパーツとかと競合することはないハズ。
・・・できたら、迷わず公開しちゃいましょう。ご質問は、コメント欄からどおぞぉ。