2009年02月25日
★90 秒で作る！美女たちのランダム画像 -Case.1-
【第 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(//img01.tec29.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(
"//img01.tec29.com/usr/lovelywolf/09022406.jpg",
"//img01.tec29.com/usr/lovelywolf/09022407.jpg",
"//img01.tec29.com/usr/lovelywolf/09022408.jpg",
"//img01.tec29.com/usr/lovelywolf/09022409.jpg",
"//img01.tec29.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 だから、ブログパーツとかと競合することはないハズ。
・・・できたら、迷わず公開しちゃいましょう。ご質問は、コメント欄からどおぞぉ。
Posted by Lovely Wolf at 12:25│Comments(5)
│【SEXY デザインTips】
★ソラマメの記事のデザインをHackする！-Case8-
★ソラマメの記事のデザインをHackする！-Case7-
★ソラマメの記事のデザインをHackする！-Case6-
★ソラマメの記事のデザインをHackする！-Case5-
★ソラマメの記事のデザインをHackする！-Case4-
★ソラマメの記事のデザインをHackする！-Case3-
★ソラマメの記事のデザインをHackする！-Case7-
★ソラマメの記事のデザインをHackする！-Case6-
★ソラマメの記事のデザインをHackする！-Case5-
★ソラマメの記事のデザインをHackする！-Case4-
★ソラマメの記事のデザインをHackする！-Case3-
この記事へのコメント
初めまして。
当方 Mac + Firefox で閲覧していますが、js のソースが表示されていないようです。
あと、js は head と body の間ではなく、head 内に記述する必要があります。
当方 Mac + Firefox で閲覧していますが、js のソースが表示されていないようです。
あと、js は head と body の間ではなく、head 内に記述する必要があります。
Posted by Yume at 2009年02月25日 13:37
Yume さんコメントどおも。
最近のSEO的観点では、<head>～</head>タグ内にJavaScript を
書かないようです。
http://www.onflow.jp/cyano/archives/44
JavaScript を外部ファイル化した時は、読み込むコンテンツの表示が待
たされますので、最後の</body>タグの後に入れるのがよいようです。
しかし、今回紹介したのはCSS をJavaScript で出力してますので、
<head>～</head>タグ内に書くべきでしょう。スタイルの表示は、<body>タグの前に書くことが推奨されますから。
とはいえ、この記事を書いたの寝る前の04:00 頃。そこまで頭、回りま
せんでした。
また、Mac + Firefox は動作検証してません。
Mac をお持ちの読者のみなさん、是非対処法をお寄せください。
Wolf
最近のSEO的観点では、<head>～</head>タグ内にJavaScript を
書かないようです。
http://www.onflow.jp/cyano/archives/44
JavaScript を外部ファイル化した時は、読み込むコンテンツの表示が待
たされますので、最後の</body>タグの後に入れるのがよいようです。
しかし、今回紹介したのはCSS をJavaScript で出力してますので、
<head>～</head>タグ内に書くべきでしょう。スタイルの表示は、<body>タグの前に書くことが推奨されますから。
とはいえ、この記事を書いたの寝る前の04:00 頃。そこまで頭、回りま
せんでした。
また、Mac + Firefox は動作検証してません。
Mac をお持ちの読者のみなさん、是非対処法をお寄せください。
Wolf
Posted by Lovely Wolf at 2009年02月25日 22:59
度々失礼します。
私のコメントが言葉足らずでした。申し訳ありません。
js の外部ファイル化がベーシックなのは存じています。
私はこの記事で、スクリプトが head の終了タグと body の開始タグの間に記述されている点、つまり、html タグ直下に記述されている点が気になったのですが、ソラマメでは画像以外のファイルをアップロードすることができませんから、外部ファイル化の代わりにそのような手法を取られているのでしょうか。
head 内か body 内、または外部ファイルに記述されている js しか見たことが無いので、コメントした次第です。
また、ご返答いただいた中の以下の部分についても初耳です。
> JavaScript を外部ファイル化した時は、読み込むコンテンツの表示が待
> たされますので、最後の</body>タグの後に入れるのがよいようです。
お手数ですが、この情報のソース元を教えていただけますか。
私のコメントが言葉足らずでした。申し訳ありません。
js の外部ファイル化がベーシックなのは存じています。
私はこの記事で、スクリプトが head の終了タグと body の開始タグの間に記述されている点、つまり、html タグ直下に記述されている点が気になったのですが、ソラマメでは画像以外のファイルをアップロードすることができませんから、外部ファイル化の代わりにそのような手法を取られているのでしょうか。
head 内か body 内、または外部ファイルに記述されている js しか見たことが無いので、コメントした次第です。
また、ご返答いただいた中の以下の部分についても初耳です。
> JavaScript を外部ファイル化した時は、読み込むコンテンツの表示が待
> たされますので、最後の</body>タグの後に入れるのがよいようです。
お手数ですが、この情報のソース元を教えていただけますか。
Posted by Yume
at 2009年02月26日 03:19
at 2009年02月26日 03:19Yume さん、コメントどおも。
参照元は以下のサイトのルール6 です。
http://stevesouders.com/hpws/
サイトを最適化するためにはJavaScript を一番下に書くのが
ベストだそうです。
原文をよく読みましたら、</body>タグの後じゃなくて</body>
タグの直前になっていました。
この意味はコンポーネントのダウンロードにかかるコストを減ら
すためだそうです。オレ個人的にはキャッシュさせれば、そこ
まで綿密にしなくてもいいと思うが。
JavaScript を<head>～</head>、<body>～</body>の
間に書かなくてはいけないというルールがあるかどうかは、オレも
知りません。
今のブラウザに実装されているJavaScript エンジンはお利口さん
なので、このタグの外に置いても動作するようですが、間違った情報
を記事にするのはよくないですから記事を訂正しておきます。
参照元は以下のサイトのルール6 です。
http://stevesouders.com/hpws/
サイトを最適化するためにはJavaScript を一番下に書くのが
ベストだそうです。
原文をよく読みましたら、</body>タグの後じゃなくて</body>
タグの直前になっていました。
この意味はコンポーネントのダウンロードにかかるコストを減ら
すためだそうです。オレ個人的にはキャッシュさせれば、そこ
まで綿密にしなくてもいいと思うが。
JavaScript を<head>～</head>、<body>～</body>の
間に書かなくてはいけないというルールがあるかどうかは、オレも
知りません。
今のブラウザに実装されているJavaScript エンジンはお利口さん
なので、このタグの外に置いても動作するようですが、間違った情報
を記事にするのはよくないですから記事を訂正しておきます。
Posted by Lovely Wolf at 2009年02月26日 08:40
at 2009年02月26日 08:40</body>タグ直前ということであれば、納得しました。
アクセス解析など、サイトのコンテンツに直接関連のないものは</body>タグ直前に書くことが多いですね。
ご返答ありがとうございました。
アクセス解析など、サイトのコンテンツに直接関連のないものは</body>タグ直前に書くことが多いですね。
ご返答ありがとうございました。
Posted by Yume at 2009年02月26日 14:21
at 2009年02月26日 14:21
