(注:最新バージョンの説明はこちらです)
萌え時計、ボクがつけたいと思っていた機能がついたので、このたび正式版となりました。
暫定版との違いは、以下の通りです。
- カウントダウン バナーとして機能するようになった
バナー キャンペーンなどで利用する時に、発売日までのカウントが表示できるようになりました。
マウスを萌え時計の上に持ってくると、カウント ダウン表示になります。
発売日やカウントダウンの画像、発売日後の画像をコンフィグ ファイルで設定できます。 - 枠がついた
- リンクがついた
バナーとして機能させるため、萌え時計をクリックしたときの飛び先を指定できます。 - 時計が一瞬で表示されるようになった
今までは時計の文字部分は表示するのに 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.カウントダウン バナーとして使うには
カウントダウン バナーとして使うには、この萌え時計を自前で設置したい人のみ利用可能です。萌え時計はこちらからダウンロードできます。
- 萌え時計 設置版
- 必要な画像
- 枠
今のままでもよいですが、オリジナルの枠を用意するといいと思います。 - カウントダウン バナー
カウントダウン表示の時に表示する 512×512 ドットのバナーです。 - 発売中バナー
カウントダウン表示で発売日以降に表示する 512×512 ドットのバナーです。 - 立ち絵
萌え時計として使う立ち絵です。大きさは自由ですが 512×512 に収まるようにトリミングされます。1 個以上 - 背景
萌え時計として使う背景です。512×512 ドットで 1 個以上必要です。 - 動作環境
PHP5 以上、Javascript、HTML、UTF8
- 枠
折りたたむ