ブログパーツをさがせ : ブログパーツ風味の一行時計（JavaScript）

ブログパーツ風味の一行時計（JavaScript）

またの名を「ぶろぐぱーつ風味。（命名:*kirara管理人の葵さん）」最初っからこっちにすればよかったな。ひらがなだとまたちがった風情。

とうとう自前のブログパーツが登場です。（自前っていうかただのJavaScriptだけどさ・・・）ちっちゃな一行時計。種類はノーマル、年月日版、レア？な和暦版の３種類。背景色や文字色、はたまた背景画像など他にもあなたのお好み次第。ただし時計は見てるパソコンの体内時計と一緒。パソコンがくるってたらこの時計もくるいます。そしてJavaScriptなので多少リソースを消費します。これについてはあんまり詳しくないのでご勘弁。

一挙３種紹介でサイドバーの掲示板などアップアップのエラー表示がでることがありますが、一行時計じたいのスクリプトエラーはチェック済です。が・・ブログパーツを沢山つけてる方はあまりエラーが頻出するようならやめておいたほうがよいかも。

ブログパーツ風味の一行時計（ノーマル）

以下のソースを好きな場所にペタッと貼り付けよう

<SCRIPT type="text/javascript"><!--
//-----------簡単設定ここから----------

marg="10 0 10 0";  //時計周りの余白(上右下左)
fontc="#228B22";   //文字色(色名[forestgreenなど]、16進数でも指定可能)
fonts="10px";      //文字サイズ
lette="0.15em";    //文字間隔
texta="center";    //文字の位置(左)left(中央)center(右)right
backc="white";     //背景色(色名、16進数[#FFFFFFなど]でも指定可能)
backi="http://blogparts.seesaa.net/image/dot.gif";
　　//↑背景画像
borde="darkseagreen 1px dashed";
　　//↑枠線の色、太さ、スタイル(なし)none(実線)solid(二重線)double(破線)dashed(点線)dottedなど

//-----------簡単設定ここまで------------
function Watch() {
 now = new Date();
 year = now.getYear();
 month = now.getMonth()+1;
 day = now.getDate();
 youbi = new Array("Sun ","Mon ","Tue ","Wed ","Thu ","Fri ","Sat ");
 hour = now.getHours();
 minute = now.getMinutes();
 second = now.getSeconds();
 if (year < 1000) { year += 1900 }
 if (hour < 10) { hour = '0' + hour }
 if (minute < 10) { minute = '0' + minute }
 if (second < 10) { second = '0' + second }
 document.sato.koto.value =year + '.' + month + '.' + day + '.'
 + youbi[now.getDay()] + hour + ':' + minute + ':' + second;
 setTimeout('Watch()',1000);
}

document.write("<FORM name=sato style='margin:"+marg+"'>");
 document.write("<INPUT type=text name=koto size=35 style='vertical-align:middle;");
 document.write("font-size:"+fonts+";letter-spacing:"+lette+";border:"+borde+";text-align:"+texta+";");
 document.write("color:"+fontc+";background-color:"+backc+";background-image:url("+backi+");'>");
 document.write("</FORM>");
Watch();/* satokoto.blog10.fc2.com */
//--></SCRIPT>

ブログパーツ風味の一行時計（年月日版）

以下のソースを好きな場所にペタッと貼り付けよう

<SCRIPT type="text/javascript"><!--
//-----------簡単設定ここから----------

//-----------簡単設定ここまで----------
function Watch2() {
 now = new Date();
 year = now.getYear();
 month = now.getMonth()+1;
 day = now.getDate();
 youbi = new Array("(日)","(月)","(火)","(水)","(木)","(金)","(土)");
 hour = now.getHours();
 minute = now.getMinutes();
 second = now.getSeconds();
 if (year < 1000) { year += 1900 }
 if (hour < 10) { hour = '0' + hour }
 if (minute < 10) { minute = '0' + minute }
 if (second < 10) { second = '0' + second }
 document.sato2.koto2.value =year + '年' + month + '月' + day + '日'
 + youbi[now.getDay()] +  hour + ':' + minute + ':' + second;
 setTimeout('Watch2()',1000);
}

document.write("<FORM name=sato2 style='margin:"+marg+"'>");
 document.write("<INPUT type=text name=koto2 size=40 style='vertical-align:middle;");
 document.write("font-size:"+fonts+";letter-spacing:"+lette+";border:"+borde+";text-align:"+texta+";");
 document.write("color:"+fontc+";background-color:"+backc+";background-image:url("+backi+");'>");
 document.write("</FORM>");
Watch2();/* satokoto.blog10.fc2.com */
// --></SCRIPT>

ブログパーツ風味の一行時計（和暦平成版）

和暦バージョンは平成のみ対応。数字も漢数字にしたかったけど、どえらく長くなるのであきらめました。
以下のソースを好きな場所にペタッと貼り付けよう

<SCRIPT type="text/javascript"><!--
//-----------簡単設定ここから----------

marg="10 0 10 0";  //時計周りの余白(上右下左)
fontc="#228B22";   //文字色(色名[forestgreenなど]、16進数でも指定可能)
fonts="10px";      //文字サイズ
lette="0.1em";     //文字間隔
texta="center";    //文字の位置(左)left(中央)center(右)right
backc="white";     //背景色(色名、16進数[#FFFFFFなど]でも指定可能)
backi="http://blogparts.seesaa.net/image/dot.gif";
　　//↑背景画像
borde="darkseagreen 1px dashed";
　　//↑枠線の色、太さ、スタイル(なし)none(実線)solid(二重線)double(破線)dashed(点線)dottedなど

//-----------簡単設定ここまで----------
function Watch3() {
 now = new Date();
 year = now.getFullYear()-1988;
 month = new Array("睦月","如月","弥生","卯月","皐月","水無月","文月","葉月","長月","神無月","霜月","師走");
 day = now.getDate();
 youbi = new Array("(日)","(月)","(火)","(水)","(木)","(金)","(土)");
 hour = now.getHours();
 minute = now.getMinutes();
 second = now.getSeconds();
 if (minute < 10) { minute = '0' + minute }
 if (second < 10) { second = '0' + second }

var eleven;
if (hour>11){
hour=hour-12;
eleven="午後";
}
else{
eleven="午前";
}

document.sato3.koto3.value ='平成' + year + '年' + month[now.getMonth()] + day + '日'
 + youbi[now.getDay()] + eleven + hour + '時' + minute + '分' + second + '秒';
 setTimeout('Watch3()',1000);
}

document.write("<FORM name=sato3 style='margin:"+marg+"'>");
 document.write("<INPUT type=text name=koto3 size=50 style='vertical-align:middle;");
 document.write("font-size:"+fonts+";letter-spacing:"+lette+";border:"+borde+";text-align:"+texta+";");
 document.write("color:"+fontc+";background-color:"+backc+";background-image:url("+backi+");'>");
 document.write("</FORM>");
Watch3();/* satokoto.blog10.fc2.com */
// --></SCRIPT>

JavaScriptのリアルタイム時計で曜日が入った例をあまり見かけないので作ったっていうか、例をもとに曜日部分と、CSS部分は変更しやすいように加筆しただけ。もっと簡単にできるようにしたかったけど、今のところこれがいっぱいいっぱいこんなんでよかったらご自由にお持ち帰り下さい。無事貼り付けることができたらトラバ打ってくれると喜びます。ソースの変更もご自由に。動作確認はWindowsのFirefox1.0.6、InternetExplorer6のみ。Macの方、動いてなかったりしたら教えていただだけると助かります。

上の３種類は貼り付ければだいたい同じように表示されるはず。ブログパーツ風味の一行時計（世界バージョン２つ）もございます。簡単設定の説明はソースに書いてあるとおりですが、着せ替え簡単サンプルもございます。色の組み合わせ（配色）に役立つサイトの紹介もあるので続きをどぞ～。

着せ替え簡単サンプル

ここではスタイルを変えるとどういう風になるのかの見本です。そのまま貼り付けられるようにもなってるけど配色は下に参考サイトを紹介しているので、ご自分のブログに合わせてご自由にどぞ。

自分でいろいろやってみる

背景画像の変更は
幅の変更は
【配色の参考に】
背景と文字色の組み合わせ: WEB COLOR 216
背景と文字色の組み合わせ: Webパレット・カラーピッカー（216色）Java版
背景とボックスと文字色の組み合わせ: 色見本のページ（配色のページもあります）
テーマカラーがひとつだけ決まっているときに（おすすめ）: Ohanasiya Color-Maker v3.1
[動作環境：FlashPlayer6.4以降]

深謝。
AWCSさん>時計
 ESLiさん>JavaScript例文集>日付オブジェクト

37件のコメント

2005-08-22 [365]

ごぶさたしてます～
とっても可愛いのでさっそく貼ってみましたよ～♪

yuma
URL
編集

2005-08-22 [369]

>yumaさん
こんばんは！！
だいじょぶですか？ええと、動き不安定になってませんか？（汗
こちらから見ることができなかったので、ちょっと心配・・・。

satokoto
URL
編集

2005-08-23 [372]

こんばんは（＾＾）
ご訪問コメントありがとうございます！
シンプル＆とても可愛かったので
速攻で、設置させて頂きましたぁ♪
ありがとうございましたm(__)m

葵
URL
編集

2005-08-23 [373]

>葵さん
サブネーム命名者、勝手に決定ｗ
記事内にリンクしたので、ご通知にトラバさせていただきました。ご迷惑だったらどぞお知らせ下され。今後ともよろしくお願いします♪

satokoto
URL
編集

2005-08-23 [374]

>satokotoさん

TBありがとうございますぅ！迷惑だなんてとんでもないです。
その上、さぶねーむ認定まで・・・恐縮ですっ
こちらこそ、今後ともどうぞよろしくお願いしまぁす（＾＾）

葵
URL
編集

2005-08-23 [375]

おはよ～ございます＾＾
全然だいじょぶでしたよ～～♪

yuma
URL
編集

2005-08-23 [376]

>葵さん
よかった

ぶろぐぱーつ風味。なんだかおぜんざいのようなたたずまい。えらく気に入ってしまいました。

>yumaさん
おぉ！ありがとございます。安心しました

satokoto
URL
編集

2005-08-24 [402]

今日もまた、頂きにあがりました(-"-;A ...ｱｾｱｾ
本当は「年月日版」を貼りたかったんですけど
ちょっと大きくてサイドバーからはみだしてしまいo(TヘTo)
目立たないながらも天気のパーツの下に貼りました。
ｓａｔｏｋｏｔｏさんの自信作なのに
本当に目立たない場所でスミマセンm(*_ _)m

もときち
URL
編集

2005-08-24 [405]

>もときちさん
まぁ！ありがとございます。いやいや、自信作かな（汗
サイズ、まだちとはみ出し気味？ですよね？結構テンプレによって表示がかわるなぁ・・。

ペタッと貼り付けたソースの下から6行目くらい。

document.write("<INPUT type=text name=koto size=35 style=・・・

この「35」を34とか33とか調整してみてくださいまし。

satokoto
URL
編集

2005-08-25 [408]

「30」でキッチリ入りました。（●＾o＾●）
いつも教えてもらえて感謝してます・・・
嬉しくて(T-T )( T-T) ウルウル！

もときち
URL
編集

2005-08-25 [413]

>もときちさん
よかったー♪ そんな話のよこでは♂ダルマ様が・・

satokoto
URL
編集

こんばんは

2005-10-05 [654]

一行時計、貼らせて頂きました～。ありがとうございました！
まだsatokotoさん仕様のままなので、追々色替えなどをしていけたら…無事に出来るといいなぁ

ゆっけ
URL
編集

>ゆっけさん

2005-10-06 [660]

まぁ、なんと奇特な！ありがとうございます。
こんなんで良かったら、そしてすぐ、とかでなくて大丈夫なら、色変えお手伝いいたしますので、どぞお申し付けください♪（今の背景の色に合わせた感じでドットがいいのだ！とか）

satokoto
URL
編集

はじめまして。

2005-10-12 [693]

とってもシンプルで私のブログにもピッタリでした！
ありがとうございました(〃'∇'〃)ゝ

poohring
URL
編集

>poohringさん

2005-10-15 [710]

なんとありがたや。こちらこそありがとうございます！うれしいなぁ♪

satokoto
URL
編集

はじめ

2005-10-19 [736]

ブログに時計を付けたいなと思っていたところで見つけたもので、貼らせていただきました。
シンプルで素敵だと思います。
ありがとうございました。

ちょこ
URL
編集

はじめまして

2005-11-10 [904]

シンプルで良いですね！
Flashの時計から入れ替えました。
ブログで紹介したのでトラックバックさせていただきます。

SION
URL
編集

＞ちょこさん、SIONさん

2005-11-10 [906]

＞ちょこさん
遅くなってほんとにすみませぬ。今後よく気をつけます。

そして使ってくれてどうもありがとうございます♪

＞SIONさん
ご紹介までしたいただいて、ありがたや。お礼の書き込みしたかったんですが、嬉しいやら恥ずかしいやらで帰ってまいりました(笑)
本当にありがとうございました！

satokoto
URL
編集

はじめまして

2005-11-27 [1020]

Blogに載せる時計を探していて、
こちらに来ましたぁ。
シンプルな作りが

です。
さっそくお借りしたついでに、
LINKも貼らせて頂きました。

また遊びに来ますね～♪

nika
URL
編集

＞nikaさん

2005-11-27 [1026]

うちの一行時計じゃないみたいにステキに使っていただいてほんとありがとうございます。
うれしくてうれしくて、こちらからもリンク貼らせていただきました♪

satokoto
URL
編集

時計の時刻設定について

2006-01-26 [1404]

シンプルなデザインがかっこよかったので早速使わせていただきたいのですが、一つ質問させてください。
時計の時刻を日本時間でなく、外国の時刻に合わせるということは可能でしょうか。宜しくお願いします。

shiradot
URL
編集

satokoto

2006-01-26 [1410]

ありがとうございます。それにしても、それよいネタですねー。外国の時刻・・というと国際標準時でしょうか。それとも特定の都市の時間かなぁ。
とりあえず調子に乗って２つ作ってみたので、またご要望があればお気軽にどうぞ。

ブログパーツ風味の一行時計（世界バージョン２つ）
http://satokoto.blog10.fc2.com/blog-entry-404.html

shiradotさんへ
URL
編集

>satokotoさん

2006-01-27 [1416]

早速回答してくださりありがとうございます。感謝！感謝です。設定の方は基本的にはうまくいきました。というのも、背景を他色または白色にしようとサンプルから背景と背景色の指定ソース？を削除すると時計が止まってしまいます。文字の大きさ、色などは変更できましたが。

document.write("color:"+fontc+";background-color:"+backc+";background-image:url("+backi+");'>");
の部分を削除すると時計は動くようになりましたが、元の背景画像の大きさ分の枠が残ってしまい、時計の数字のセンタリングも利きません。

これは背景画像や背景色の扱いが違っているのでしょうか。取り立てて急いでいるわけではないので、お時間が許す時にでも回答いただけたらと思います。宜しくお願いします。

長々となりすみません。

shiradot
URL
編集

>satokotoさん

2006-01-27 [1417]

先の質問の件、解決しました。ソースを削除ではなく、noneで指定したらできました。素人ですので、お許しを。
すみません、最後に１つ。これだけが解決できなくて困ってます。時計の数字と枠の間の幅の変更は可能でしょうか。枠と数字はセンタリングでバランスが取れていますが、この枠と数字の間が広すぎて収めたい大きさになりません。枠の大きさを変更する方法でもかまいません。よろしくお願いします。

shiradot
URL
編集

satokoto

2006-01-27 [1418]

自己解決させてしまってすみません。もうひとつのご質問の回答です。
時計の数字と枠の間の幅の変更は「文字」と「枠」の大きさで決まってきます。（余白部分の設定というのは特にありません）
なので、文字の大きさを変えるか、文字間隔を0.15emから0.2emとか少し大きく空けるか（ここまでは簡単設定の中で変更可能）、枠の幅の変更ということになりますね。枠の幅については記事内の最後の方「自分でいろいろやってみる」に書いてるので参考にしてください。

また何かわかんないことあればお気軽にどうぞ！