時間によってメッセージを変えちゃおう | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

時間によってメッセージを変えちゃおう

せっかくフリープラグインに書ける文字数が増えたのですから・・・

贅沢に使っちゃいましょう


全ページにメッセージボード を のバージョンアップ!

時間帯によって別のメッセージを表示するようにしてみます

3800文字では絶対に入りきらないです・・・・



別のブログのCSSの編集に・・・・

すでに使っている場合はその下に追加してください


function myT() {
myDate=new Date();
myHour=myDate.getHours();
if(myHour<=3){/*0:00-3:59*/
var myTm =('早く寝ないとたいへんですよ~0:00-3:59のメッセージ');
} else if(myHour<=6){/*4:00-6:59*/
var myTm =('眠くないですか~?4:00-6:59のメッセージ');
} else if(myHour<=9){/*7:00-9:59*/
var myTm =('おはようございます7:00-9:59のメッセージ');
} else if(myHour<=16){/*10:00-16:59*/
var myTm =('こんにちは~10:00-16:59のメッセージ');
} else if(myHour<=20){/*17:00-20:59*/
var myTm =('こんばんは~17:00-20:59のメッセージ');
} else {/*21:00-23:59*/
var myTm =('おつかれさまで~す21:00-23:59のメッセージ');
}
var myObj = document.getElementById('main');
myObj.innerHTML = ( '<div id="tme">'+ myTm + '</div>') + myObj.innerHTML;}



分けすぎちゃっていますが・・・
これで時間によって別々のメッセージが表示されます
フリープラグインだけでは文字数の関係で絶対に出来なかったことです

・・で
フリープラグインには


<script type="text/Javascript" src="http://別に作ったブログのCSSファイル.css"></script>
<script language="javascript"><!--
//http://ameblo.jp/exlink/
window.onload = function(){myT();}
// --></script>



一つ一ついちいち別のブログを作る必要はありません
すでにこの方法を使っている場合は別のブログのCSSの下に付け加えていってください



ただ・・・
window.onload = function(){myT();}
この部分だけ注意です

window.onload命令は1つしか使えません
最後に出てきた一つだけが実行されます

・・・ので
もともとのフリープラグインがこうなっていた場合・・


<script type="text/Javascript" src="http://別に作ったブログのCSSファイル.css"></script>
<script language="javascript"><!--
//http://ameblo.jp/exlink/
window.onload = function(){myF();}
// --></script>


↓すでにあるwindow.onload 命令の中に myT()を加えるだけです


<script type="text/Javascript" src="http://別に作ったブログのCSSファイル.css"></script>
<script language="javascript"><!--
//http://ameblo.jp/exlink/
window.onload = function(){myF(),myT();}
// --></script>


このように修正すれば以前のも新しく入れたスプリクトも動作します