この時計の公開用アドレス

設定

初期値に戻す

主画像

文字盤、時針、分針、秒針を「田の字」に並べた正方形の透過 PNG‐画像を指定して下さい。

副画像

省略可能。時計の最前面、時針の影、分針の影、秒針の影を並べた画像を指定して下さい。

ページ背景

CSS の background として使用されます。

針の位置

時針 : 右へ %、下へ %

分針 : 右へ %、下へ %

秒針 : 右へ %、下へ %

中心を 0% として、左端・上端が −100%、右端・下端が +100% です。

影の距離

%

副画像がある場合のみ有効。100% にすると針の影は標準的な位置に表示されます。値を小さくすると針に近付き、負の値にすると針より上になります。

自作時計の作り方

以下の手順で、自作デザインの時計を公開できます。

  1. 1. 時計を構成する画像を描く

    最大二枚の正方形の画像を用意します。一枚目(主画像)は必須です。二枚目(副画像)は針の陰影などを表現したい場合に使いますが、単純なデザインなら不要です。それぞれを「田の字」に分割して、左上の領域から「Z」の順に四個の部品を並べます。

    • 一枚目 … 文字盤(最背面に固定)、時針、分針、秒針
    • 二枚目 … 時計の表層(最前面に固定)、時針の影、分針の影、秒針の影

    重ね合わせて表示するので、針の周りは透明になっている必要があります。作例(主画像副画像)も参考にして下さい。

  2. 2. 画像をウエブ上に公開する

    この時計アプリに画像自体を送る必要はありません(画像をホストする機能は持ちません)。ウエブ上のどこかに画像を載せてから、それを読み込んで表示します。(その画像が移動または消去されたら、この時計も表示できなくなります。)

    例えばツイッターに投稿した画像は公開状態なので読み込めます。ウエブブラウザーでツイートを表示したら、画像を右クリックし、「画像のアドレスをコピー」のような項目を選んで下さい。あるいは「画像を別のタブに開く」のような項目を選んでからアドレス欄の内容をコピーして下さい。

  3. 3. 時計を設定する

    このページの「設定」枠内の「主画像」「副画像」に、画像のアドレスを記入して下さい。副画像を省略するなら空欄のままにします。ほかの項目も好きなように調整し、「適用」ボタンを押して下さい。

  4. 4. アドレスを記録する

    「適用」すると、このページのアドレスの「?」以降に画像参照先などの情報が差し込まれます。その状態でブラウザーのブックマークをすれば、いつでも時計のデザインを復元できます。また、このアドレスを他人に伝えれば、誰でも同じデザインの時計を見られます。