萌え時計 正式版

(注:最新バージョンの説明はこちらです)
萌え時計、ボクがつけたいと思っていた機能がついたので、このたび正式版となりました。
暫定版との違いは、以下の通りです。

  1. カウントダウン バナーとして機能するようになった
    バナー キャンペーンなどで利用する時に、発売日までのカウントが表示できるようになりました。
    マウスを萌え時計の上に持ってくると、カウント ダウン表示になります。
    発売日やカウントダウンの画像、発売日後の画像をコンフィグ ファイルで設定できます。
  2. 枠がついた
  3. リンクがついた
    バナーとして機能させるため、萌え時計をクリックしたときの飛び先を指定できます。
  4. 時計が一瞬で表示されるようになった
    今までは時計の文字部分は表示するのに 1 秒かかっていたのですが、すぐに表示されるようになりました。

貼り付け方

▼大きさをドットで指定する

<iframe src=”https://amatsukami.info/moeclock/” width=”200″ height=”200″ style=”margin: 0px; padding 0px; overflow: hidden;” scrolling=”no” marginwidth=”0″ marginheight=”0″ frameborder=”0″></iframe>

▼大きさを要素に任せる(レスポンシブデザイン対応)

<div style=”position: relative; width: 100%; height: 100%; padding: 100% 0 0;”><iframe style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;” src=”https://amatsukami.info/moeclock/” scrolling=”no” marginwidth=”0″ marginheight=”0″ frameborder=”0″></iframe></div>

詳しい説明

1.設定の基本

上記の貼り付け用ソースにある scr=”https://amatsukami.info/moeclock/? の後ろにパラメータを設定します。設定できるパラメータは何の作品のキャラクタを表示するかの設定です。

2.大きさの指定

貼り付けたい大きさは、iframe の  width と height でサイズ指定してください。萌え時計はそのサイズに合わせて勝手に拡縮されます。また、% を利用することによってレスポンシブデザインに対応できます。

3.作品の指定

表示する作品を指定できます。指定できる作品は以下の通りです。何も指定しないと、1/2 summer と Timepiece Ensemble のキャラがランダムに表示されます。

  • 1/2 summer
  • Timepiece Ensemble
  • 翼をください
  • いろは~秋の夕日に影ふみを~

products を指定することによって、作品を設定できます。

1/2 summer product=summer
Timepiece Ensemble product=p1d
翼をください product=fwings
いろは~秋の夕日に影ふみを~ product=rural

また、作品は , 区切りで複数指定可能です。
▼設定例

scr=”https://amatsukami.info/moeclock/?product=summer”
scr=”https://amatsukami.info/moeclock/?product=summer,p1d”

4.カウントダウン バナーとして使うには

カウントダウン バナーとして使うには、この萌え時計を自前で設置したい人のみ利用可能です。萌え時計はこちらからダウンロードできます。

  • 萌え時計 設置版
  • 必要な画像

    1. 今のままでもよいですが、オリジナルの枠を用意するといいと思います。
    2. カウントダウン バナー
      カウントダウン表示の時に表示する 512×512 ドットのバナーです。
    3. 発売中バナー
      カウントダウン表示で発売日以降に表示する 512×512 ドットのバナーです。
    4. 立ち絵
      萌え時計として使う立ち絵です。大きさは自由ですが 512×512 に収まるようにトリミングされます。1 個以上
    5. 背景
      萌え時計として使う背景です。512×512 ドットで 1 個以上必要です。
    6. 動作環境
      PHP5 以上、Javascript、HTML、UTF8

折りたたむ