2008.06.04
5・6年生にもわかるやさしいJavaScriptの「日付入りの時計を表示させよう」からコードを戴いて来ました。
JavaScriptは外部ファイルにして他のサイトでも使い回しが出来るように以下のコードの黒い文字部分のみをテキストエディターにコピペし適当な名前を付け拡張子を.js（僕の場合はdatetime.jsとしました。）としてデスクトップに保存それをサイトの適当な位置にアップロードします。
<!–今日の日付と時刻のJavaScriptここから –>
<script language="JavaScript">
<!–
function Clock3(){
myDate=new Date();
myyear=myDate.getFullYear()-1988;
mymonth=myDate.getMonth()+1;
myday=myDate.getDate();
myhour=myDate.getHours();
myminute=myDate.getMinutes();
mysecond=myDate.getSeconds();
if (myhour<10) {myhour="0"+myhour}
if (myminute<10) {myminute="0"+myminute}
if (mysecond<10) {mysecond="0"+mysecond}
document.myform3.myclock3.value="平成 "+myyear+"年"+mymonth+"月"+myday+"日"+myhour+"時"+myminute+"分"+mysecond+"秒";
setTimeout("Clock3()",1000);
}
//–>
</script>
<!–今日の日付と時刻のJavaScriptここまで –>
僕の場合平成の年号を使用したかったので青い部分を追加修正しました。
HTMLソースの時計を表示させたい場所の HEAD区間又はBODY区間に以下のJavaScriptを呼び出すScriptを記述します。
<script type="text/javascript" src="http://JavaScriptを設置した場所のURL/datetime.js"></script>
HTMLソースの時計を表示させたい場所の BODY区間に以下を貼り付けます。
<form name="myform3">
<input name="myclock3" size="25" style="background-color: #7896aa; color: #fff; font-weight: bold; border:0px #f00 solid;" >
</form>
<script language="JavaScript">
<!–
Clock3();
//–>
</script>
青く表示されている部分は表示される文字の色、背景色、文字の太さなどの指定部分です。
僕の場合は背景色をヘッダーと同じ色に文字色は白にしています。
当サイトの場合直接このブログに記述するとValidにならないために静的ページを作成し、objectを使用してヘッダーに設置しています。
2008.05.08
サイドバーのArchivesを折りたたみにするためにHTMLに以下のように記述しました。（折りたたみjavascriptを外部ファイルとして設置する方法）
以下のコードをoritatami.jsとしてサーバーの適当なディレクトリ（設置したWordPressの外部ディレクトリにしておけば複数ののWordPressを遣う場合に便利です。）に保存
function oritatami(id){
obj=(document.all)?document.all(id):((document.getElementById)?
document.getElementById(id):null);
if(obj) obj.style.display=(obj.style.display==”none”)?”block”:”none”;
}
header.phpに以下javascriptを読込むコードを書き込みます。
<!–折りたたみメニューjis読込みここから –>
<script type="text/javascript" src="http://minobu.net/oritatami.js"></script>
<!–折りたたみメニューjis読込みここまで –>
サイドバーArchivesの設置部分を以下の様に書き換えます、これで一応の折りたたみの完成です。
<li>
<h2><a href="URL" onclick="oritatami(’
ori1‘);return false" onkeypress="o">
Archives</a>
</h2>
<div id="
ori1" style="display:none">
<ul>
<?php wp_get_archives(); ?>
</ul>
</div>
</li>
しかし、この方法だと四角い罫に囲まれたメニュータイトルの文字にリンクが張られています、これをメニュータイトルの文字へのリンクではなく、四角い罫に囲まれた部分全体にリンクが出来ないかと考えました。そこで
<li>
<a href="URL" onclick="oritatami(’
ori1‘);return false" onkeypress="o">
<h2>Archives</h2></a>
<div id="
ori1" style="display:none">
<ul>
<?php wp_get_archives(); ?>
</ul>
</div>
</li>
のようにArchives部分をを<h2>Archives</h2>のようにしてみました。
ori1の部分は他のidと異なる別のidを書いていきます。
なんと現在のこのサイトの左サイドバーにあるCalender部の折りたたみのように、思い通り四角い罫に囲まれた部分のどこをクリックしても折りたたみの開閉が出来ているではあ〜りませんか。
しかしです、この方法ではAnother HTML-lint に「<h2> を n行目の 〜 内に書くことはできません。」と指摘されValidでなくなってしまうのです。
小粋空間さんの以下もすてきなんですがWordPressに流用出来ないものでしょうか？
折りたたみメニュー
サイドメニューの折りたたみ（定義リスト編）
小粋空間: サイドメニューの折りたたみ（v4.0）
小粋空間: サイドメニューの折りたたみ（v5.0：ゆっくり折りたたむ）
