› * Lovely Wolf Report in SLMaMe * › 【ソラマメ】 ブログカスタマイズ裏ワザ2008年10月07日
★ブログでスクリーンセーバーを作ってみる！-Case.2-
【第 77 話】 エフェクト付きのスクリーンセーバーができるかも！- 実践 編 -
★前回の記事でスクリーンセーバーを試したついでに、ある外国の方が作ったJavaScript を埋め込んでみた。
おぉ、マジでCool なブログが出来そうな予感。・・・ソラマメが世界に通用するセカンドライフブログでいっぱいになるまでは、Wolf の戦いはつづく。 - by Lovely Wolf -
★では、映画トップガンから Cool なオープニングをお届けしよう。
Now, Today's best music for u, [TOP GUN]
#Youtube 「intro top gun」より引用
http://jp.youtube.com/watch?v=9C5_-VWU6ks&feature=related
★CSS Linked Photo Shuffler
・・・著作権情報は、しっかりと表記すべきでしょ。
//
// CSS Photo Shuffler v1.0 by
// Carl Camera
// http://iamacamera.org
//
// SetOpacity Function and inpiration from Photo Fade by
// Richard Rutter
// http://clagnut.com
//
// License: Creative Commons Attribution 2.5 License
// http://creativecommons.org/licenses/by/2.5/
//
// Customize your photo shuffle settings
//
// * Surround the target <img /> with a <div>. specify id= in both
// * set background-repeat:no-repeat in CSS for the div
// * The first and final photo displayed is in the html <img> tag
// * The array contains paths to photos you want in the rotation.
// If you want the first photo in the rotation, then it's best to
// put it as the final array image. All photos must be same dimension
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
★フェードイン、フェードアウトの微妙な時間調整もできるし、リピートの回数も指定できたりして、使えるかも。
・・・いまどき、シコシコとFlash やGIF をいじってる場合ちゃうでしょ。
【ブログでスクリーンセーバーを作ってみる！ - 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e387898.html
2008年10月05日
★ブログでスクリーンセーバーを作ってみる！-Case.1-
【第 76 話】 背景画像を準備するだけでスクリーンセーバーになる！- 予告 編 -
★ブログをいじってるうちに、いつの間にかスクリーンセーバーになってしまった。orz - by Lovely Wolf -
★今、かかってる曲は、Nickelback のナンバーで、【Someday 】
Now, Today's best music for u, Nickelback licence,[Someday]
#Youtube 「Someday-Nickelback」より引用
http://jp.youtube.com/watch?v=3c9RmtC-8mI&feature=related
★織田の殿様も桶狭間に向かう前には、熱田さんに戦勝祈願をしたという。
★剣の道・・・それは、セカンドライフに唯一残された覇王への道。
★だれか、小次郎ファンのオレに２尺８寸の大刀を作ってくれないかなぁ？
★して、本日のタイトルは、「背景画像を準備するだけでスクリーンセーバーになる！」っていうことらしいが、こいつの作り方を解説したところでオレの話しについて来られる読者が何名いるだろう？ってことで、とりあえず無料配布でもしてみる？
・・・配布予定は10月中旬のつもり。個人的にこんな感じのが欲しいとかいうリクエストも受け付けますが、もしかして時間があれば作ってあげられるかも。orz
2008年09月28日
★Cool にソラマメをカスタマイズする！-Case.13-
【第 75 話】 記事内の画像をCool にアニメーションさせてみる！- 続・JavaScript 編 -
The story [75] try to change the images Cool! - Continued JavaScript Chapter -
★Movie を作るのは簡単だがどうも味気ない。かといって記事を書くのにFlash なんか使ってられないし。
セカンドライフブログは画像さえあれば、Cool に決めることができる。- by Lovely Wolf -
★今、かかってる曲は、Nickelback のナンバーで、【Far Away 】
Now, Today's best music for u, Nickelback licence,[Far Away]
#Youtube 「Nickelback - Far Away」より引用
http://www.youtube.com/watch?v=j4y-RzVGrHg&feature=related
★森を抜けると、そこは海だった。
★本日の講座は、「JavaScript を使って記事内の画像をCool にアニメーションさせてみる」だそうです。
・・・指定した順番に1 秒間隔で画像をアニメーションさせてみたんだが、フェードイン・フェードアウトの効果を付けるまで、ソースの公開はお預けということで。
★ここで、IQ サプリ。これはいったい何でしょう？
【Cool な背景に変えてみる！- JavaScript 編 - 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e374231.html
# Case 2.<Web URL> http://lovelywolf.slmame.com/e374675.html
# Case 3.<Web URL> http://lovelywolf.slmame.com/e375248.html
2008年09月22日
★Cool にソラマメをカスタマイズする！-Case.12-
【第 72 話】 記事内の画像をCool なスライド画像に変えてみる！- 続・JavaScript 編 -
The story [72] try to change the images Cool! - Continued JavaScript Chapter -
★外国産の女性二人がヒマを持て余した日にゃ、H なnoobs をからかいに来るのが定番らしい。
- by Lovely Wolf -
★今、かかってる曲は、Nickelback のナンバーで、【Rockstar 】
Now, Today's best music for u, Nickelback licence,[Rockstar]
#Youtube 「Nickelback - Rockstar [Explicit] 」より引用
http://www.youtube.com/watch?v=76i6aZgo2io&feature=related
★オレのことをH なnoobs だと思って近寄ってきたゾ。
★ムムっ！ゴージャスなランジェリーに、グローブにアームリング！おぬし、デキる・・・。
★かいきゃぁぁく。
★まさか、エスコートじゃないだろうな？とりあえずプロフをチェックしてと。
★もいちど、かいきゃぁぁく。・・・エスコートじゃなかったので、パックにつめて新鮮なうちにお持ち帰りとするか。
★本日のお題は、「JavaScript を使って記事内の画像をCool なスライド画像に変えてみる」です。
・・・もちろん、Flash でもなければ、GIF アニメでもなく、他のブログからファイルを読み込んでるわけでもない。ちょこっとJavaScript を今日の記事に書いたらできてしまったワケさ。
・・・一定時間ごとに画像を切り替えるためにsetTimeout という関数を使っていることと、スムーズに画像を表示させるために先読みさせていること、記事の改行には<br> タグが自動的に入るため一行で書く必要があることくらいか。次回、もう少しくわしく紹介する予定だ。
<script>window.onload=function(){var imgary = new Array('<img src="http://img01.slmame.com/usr/lovelywolf/08092206.jpg" alt="" >', '<img src="http://img01.slmame.com/usr/lovelywolf/08092207.jpg" alt="" >', '<img src="http://img01.slmame.com/usr/lovelywolf/08092208.jpg" alt="" >', '<img src="http://img01.slmame.com/usr/lovelywolf/08092209.jpg" alt="" >', '<img src="http://img01.slmame.com/usr/lovelywolf/08092210.jpg" alt="" >');randomimage1();function randomimage1(){var num = Math.floor((Math.random() * 100)) % imgary.length;document.getElementById("slide").innerHTML=imgary[num];timerID1=setTimeout(randomimage1, 500);};}</script>
<div id="slide" style="background-color:#000;width:500px;height:500px;"><img src="http://img01.slmame.com/usr/lovelywolf/08092210.jpg" /></div>
★JavaScript を起動する部分となる<body onload=""> とwindow.onload = funciton(){} は競合してしまうため、<body onload=""> を使って背景画像をアニメーションにしているオレのブログでは記事にスクリプトを入れると動かなくなるらしい。
【Cool な背景に変えてみる！- JavaScript 編 - 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e374231.html
# Case 2.<Web URL> http://lovelywolf.slmame.com/e374675.html
2008年09月21日
★Cool にソラマメをカスタマイズする！-Case.11-
【第 71 話】 Cool な背景に変えてみる！- 続・JavaScript 編 -
The story [71] try to change the background Cool! - Continued JavaScript Chapter -
★去り行く夏とともに、オレのブログを華やかに飾ってくれた画像たちに感謝の意を表し、永遠の眠りについてもらうことにする。
Summer left to go, and I have represents gratitude to glamorous images decorating my blog , make them to ask for eternal sleep. - by Lovely Wolf -
★今、かかってる曲は、U2 によるセッションで、【Freddy's Nightmares 】
Now, Today's best music for u, U2 session,[Freddy's Nightmares]
#Youtube 「Freddy's Nightmares by U2 」より引用
http://jp.youtube.com/watch?v=5VqvGs9rlJU&feature=related
★Baron Grayson の世界には、meditation (瞑想)に耽るためのポーズが用意されている。
Baron Grayson in his world, some poses for meditation are available.
★今の彼にとって、水をいかに表現するかがテーマのようだ。
For him now, the theme seems to be the water or how to express it.
★では【第 70 話】につづき、「Cool な背景に変えてみる！- 続・JavaScript 編 -」でもやりますか。
Story in the [second] to 70 continued, "Cool look into the background! - Continued JavaScript Chapter -" do it?
・・・今回は、ある時間になったら背景画像を入れ替えるっていうのをやってみる。
毎日ある時間になると、オレのブログは雨が降ってたんだけど、知ってた？・・・誰も知らんか。orz
This time, a time when the background of a picture I try to replace.
Every day, and there will be time, it's raining in my blog, but you know that? Anybody knows? orz
# 08:00am～03:00pm
# 03:00pm～04:00pm
# 04:00pm～05:00pm
# 05:00pm～06:00pm
# 06:00pm～08:00pm
# 08:00pm～10:00pm
★お気に入りは、夜中じゅう数枚の画像をランダムに出てくるようにセットしていた。
I set to come out a few random images all the night, especially favorite ones .
★夏の終わりを告げる一枚。
The shot of marking the end of the summer.
★では、【第 70 話】でやったJavaScript の書き方はクリアしているということで続けることにする。
【Cool な背景に変えてみる！- JavaScript 編 - 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e374231.html
・・・if というのは、条件式だ。
08:00～15:00、15:00～22:00、22:00～08:00 の3 パターンを用意してみた。細かい時間調整がしたければ、if を追加すればいい。
・・・赤字部分は、【第 70 話】でやったスクリプトに時間の指定を追加したトコロだ。
<head>
<script language="JavaScript">
function imgload(){
var h = (new Date()).getHours();
if((h >= 8) && (h < 15)){
document.body.style.backgroundImage='url("http://img01.slmame.com/usr/lovelywolf/slmame-banner-30.jpg")';
}
else if((h >= 15) && (h < 22)){
document.body.style.backgroundImage='url("http://img01.slmame.com/usr/lovelywolf/slmame-banner-31.jpg")';
}
else{
document.body.style.backgroundImage='url("http://img01.slmame.com/usr/lovelywolf/slmame-banner-32.jpg")';
}
}
</script>
</head>
★さらに、<body> タグにJavaScript を起動する部分を入れる。
・・・たったコレだけで、指定した時間になると自動的に背景画像を入れ替えることができる。
Just now, in time to be specified , it automatically can replace the background image.
<head>
HTMLヘッダ部分
</head>
<body onLoad="imgload();" >
HTMLボディ部分
</body>