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

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

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

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

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

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

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

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

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

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

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

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

着せ替え簡単サンプル

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

簡単設定部分を以下に差し替え

簡単設定部分を以下に差し替え

簡単設定部分を以下に差し替え

簡単設定部分を以下に差し替え

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

背景画像の変更は
  • お好み背景画像をさがす。一行時計なのでミニサイズの背景でないとうまく表示されません。とりあえず有名なところではsozai-Rさんのミニ素材コーナーなど。利用規約をよく読んでお借りしましょう。
  • ダウンロードしたお好み背景画像を自分のブログにアップロード
  • アップロードした画像のURLを確認したら、ソース＞ 簡単設定＞ backiの"http://・・略・・/dot.gif"部分を書き換える。
幅の変更は
  • ソースの下から6行目。 document.write("<INPUT type=text name=koto size=35 style=・・・の青字部分を変更してみてください。

　

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

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

edit
関連記事
  • このエントリーをはてなブックマークに追加

みんなの声

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

  • yuma
  • 2005.08.22
  • Mon
  • No.365

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

  • satokoto
  • 2005.08.22
  • Mon
  • No.369
  • [ edit ]

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

  • 葵
  • 2005.08.23
  • Tue
  • No.372

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

  • satokoto
  • 2005.08.23
  • Tue
  • No.373
  • [ edit ]

>satokotoさん

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

  • 葵
  • 2005.08.23
  • Tue
  • No.374

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

  • yuma
  • 2005.08.23
  • Tue
  • No.375

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

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

  • satokoto
  • 2005.08.23
  • Tue
  • No.376
  • [ edit ]

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

  • もときち
  • 2005.08.24
  • Wed
  • No.402

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

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

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

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

  • satokoto
  • 2005.08.24
  • Wed
  • No.405
  • [ edit ]

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

  • もときち
  • 2005.08.25
  • Thu
  • No.408

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

  • satokoto
  • 2005.08.25
  • Thu
  • No.413
  • [ edit ]

こんばんは

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

  • ゆっけ
  • 2005.10.05
  • Wed
  • No.654
  • [ edit ]

>ゆっけさん

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

  • satokoto
  • 2005.10.06
  • Thu
  • No.660
  • [ edit ]

はじめまして。

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

  • poohring
  • 2005.10.12
  • Wed
  • No.693
  • [ edit ]

>poohringさん

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

  • satokoto
  • 2005.10.15
  • Sat
  • No.710
  • [ edit ]

はじめ

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

  • ちょこ
  • 2005.10.19
  • Wed
  • No.736
  • [ edit ]

はじめまして

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

  • SION
  • 2005.11.10
  • Thu
  • No.904
  • [ edit ]

＞ちょこさん、SIONさん

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

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

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

  • satokoto
  • 2005.11.10
  • Thu
  • No.906
  • [ edit ]

はじめまして

Blogに載せる時計を探していて、
こちらに来ましたぁ。
シンプルな作りがv-218です。
さっそくお借りしたついでに、
LINKも貼らせて頂きました。

また遊びに来ますね〜♪

  • nika
  • 2005.11.27
  • Sun
  • No.1020
  • [ edit ]

＞nikaさん

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

  • satokoto
  • 2005.11.27
  • Sun
  • No.1026
  • [ edit ]

時計の時刻設定について

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

  • shiradot
  • 2006.01.26
  • Thu
  • No.1404

satokoto

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

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

  • shiradotさんへ
  • 2006.01.26
  • Thu
  • No.1410
  • [ edit ]

>satokotoさん

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

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

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

長々となりすみません。

  • shiradot
  • 2006.01.27
  • Fri
  • No.1416

>satokotoさん

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

  • shiradot
  • 2006.01.27
  • Fri
  • No.1417

satokoto

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

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

  • shiradotさんへ
  • 2006.01.27
  • Fri
  • No.1418
  • [ edit ]

no title

シンプルで良いです。
使わせてもらいました☆

  • こころ♡
  • 2006.02.11
  • Sat
  • No.1512

satokoto

なじんでて嬉しいな。ありがとうございました！

  • こころさんへ
  • 2006.02.11
  • Sat
  • No.1518
  • [ edit ]

探してたので良かったです！

時計を設置したいたいなぁと思って探してたらここにたどり着きました。
ブログのデザインとよく合っているので設置させて頂きました。

  • Gazoudego
  • 2006.02.14
  • Tue
  • No.1534

satokoto

ほんとだ。ちょうど色がぴったりですね。嬉しいなぁ。ありがとうございました！

  • Gazoudegoさんへ
  • 2006.02.15
  • Wed
  • No.1541
  • [ edit ]

はじめまして

シンプルな時計を探していてこちらへたどりつきました。
かわいくシンプルな時計でしたので
ブログに設置させていただきました。
ありがとうございました。
またお邪魔させていただきます。

  • まき
  • 2006.02.19
  • Sun
  • No.1573

satokoto

ありがとうございます！動きが変だったりご要望などあればお気軽にどぞ。

  • まきさんへ
  • 2006.02.19
  • Sun
  • No.1576
  • [ edit ]

はじめまして

こちらの時計お借りしていきますね。
設定がとっても簡単で、デザインもシンプルでとても気にいりました。＾＾
なおＴＢもさせていただきました。

  • blue
  • 2006.06.06
  • Tue
  • No.2146
  • [ edit ]

satokoto

紹介までいただいて本当にありがとうございます。ばっちりなじんでてうれしいです。

  • blueさんへ
  • 2006.06.08
  • Thu
  • No.2151
  • [ edit ]

はじめまして

シンプルな時計を探しててたどり着きました
思ってたのにぴったりでとっても気に入りました
お借りしますね

  • 朔
  • 2006.07.12
  • Wed
  • No.2285

satokoto

横カレンダーとなじみすぎで最初どこにあるのかわからないほどでした。こういうのって嬉しいですね。ご利用ありがとうございました。

  • 朔さんへ
  • 2006.07.12
  • Wed
  • No.2286
  • [ edit ]

素敵な時計ですね♪

一目で気に入り、ブログに設置させて頂きました。
いつか時計のカラー変更にも挑戦してみます♪

  • ガーネット
  • 2006.07.20
  • Thu
  • No.2320

satokoto

あんな一等地にすてきに飾っていただいて。ありがとうございました！

  • ガーネットさんへ
  • 2006.07.21
  • Fri
  • No.2325
  • [ edit ]

コメントを投稿する ▼

パスワードを入力しておくと、後で投稿の修正や削除ができます。
 非公開コメントとして投稿する。

トラックバック

FC2ブログユーザー限定トラックバック＆記事作成便利リンク

ぶろぐぱーつ風味。

サイドバーに可愛い小さなぶろぐぱーつを追加しましたブログパーツをさがせさんで紹介されてた?ブログパーツ風味の一行時計?です時間はPCの時間になるんで、PCの時間が狂ってる人は、表示の時間も狂ってますよぉ〜なので、ご注意を

*kirara　2005.08.22

時計入れ替え

Flashの時計が重かったのでJavascriptにした。ちょっとググって見たらいいのがあったので紹介。ブログパーツ風

ふと今日は・・・・・・　2005.11.10

ちまちまリニューアル？

昨晩、何となく天気予報をBlogに表示させてみることにしました。普段から、天気予報を注意深く見る方ではないので、有ったら便利かなぁ…と思ったりしたので。早速、Blog素材を検

blog⇒ nika's home　2005.11.27

時計を貼る?

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

ＢＥＮのブログ　2006.03.30

デジタル時計設置

サイドバーにデジタル時計を設置しました。JUGEMのテンプレにもこういったデジタル時計あるんですが大きさや色など、いぢるのめんどうそう・・・てか、私にはむずかしそう[:たらーっ:]な感じだったので似たようなものないかな？と、探してみました。「ブログパーツをさがせ

moon in the noon　2006.06.06