テキストの時計表示
ブログ初心者の私はMovable Typeを自分好みにする為
寝る前ＰＣをガチャガチャさわっていると時間の感覚が鈍り、
思ったより長時間ＰＣかまってる事があった為、
ブログに時計が付いてたら良いのにと思い検索してみると
かなり色んな方法で時計が表示できる事がわかった。
（ちなみにウインドウズＰＣなら右下には時刻表示が出ていると思うが
人間の性質はどうしても視線が左上に集まりやすいらしい）
自分で作ったりする事は出来ないので、フリーの物を探して
最初はフラッシュの時計を置いてみるが、デザインは良いが
どうしてもサイズがでかくなってしまうのと、表示させたい
ページと同じ階層にファイルを置かないと上手く表示されなかったり
するので、あっても無くてもあまり見た目に影響が無いような
シンプルなフラッシュなしのテキストタイプを探して見た。
参考にしたＨＰ→ 時計をテキストに… と ＨＴＭＬの小技 *時刻を表示する
手順は３つしかないから簡単（まずは最後まで読んでからバックアップとってから）
１・まず時計を表示させたいページの
<head> から </head>の中に↓を置きます。
<Script Language="JavaScript">
<!--
var spSTim11=" ";
function time01() {
var dayTim,jiTim,funTim,byoTim,goze;
dayTim=new Date();
jiTim=dayTim.getHours();
funTim=dayTim.getMinutes();if (funTim<10) {funTim="0"+funTim}
byoTim=dayTim.getSeconds();if (byoTim<10) {byoTim="0"+byoTim}
if (jiTim<12) goze="AM ";
else {
goze="PM ";
jiTim=jiTim-12;
}
document.getElementById('clk').innerHTML =spSTim11+goze+jiTim+":"+funTim+":"+byoTim;
setTimeout("time01()",1000);
}
// End -->
</Script>
２・（１と同じページの）時計を表示させたい所に↓を置きます。
<div class="clock">
<span id="clk">
<FORM NAME="time01">
<INPUT TYPE="text" size="25" name="timeform">
</FORM>
<Script Language="JavaScript">
<!--
time01();
//--></Script></span>
</div">
３・スタイルシートのどっか（一番下で良い）に↓を置きます。
/* 時計メニュー */
.clock {
color: #483D8B; /* 文字色 */
font-size: 10px; /* 文字サイズ */
}
保存して再構築して確認します。
色を変えたい時はここで見るとわかり易いかも→ ＨＴＭＬ色見本
この記事を書くまで知らなかった事はタグをページで表示する方法。
< (タグの左側)は、< で表現し、> （タグ右側）は、> で表現するということです。
テキストエディタの置換を使うと 左、右の２操作で全て変換されます。
＜変更点＞
私はサイドのレイアウトをいじりたくないのと、表示を上の方に持ってきたかったので、
タイトルをいじって２・の部分を↓としました。この場合は３・の所は必要ありません。
<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description">
<$MTBlogDescription$><span id="clk">
<FORM NAME="time01">
<INPUT TYPE="text" size="25" name="timeform">
</FORM>
<Script Language="JavaScript">
<!--
time01();
//--></Script></span>
</div></div>
ＪＡＶＡの事わからないけど何とかなりました＾＾
しかし”転送バイト数の増加”の観点からすると良い方法ではありません。
もっと良いやり方があるはず。。。
