- エオルゼア時計（Javascript版）
エオルゼア時計（Javascript版）について
エオルゼア歴
エオルゼア歴に関してはプレイガイド_よくある質問（FAQ）_基本TIPS（ステータス/効果/属性/単位）のページをご覧下さい。
Web素材やブログパーツとして、雰囲気演出として、サイト/ブログ・フリーカンパニー/LSのページなどに貼り付けてご使用下さい。
- エオルゼア時間（月/日/時/分）
- エオルゼア時間（年/月/日/時/分/秒）
- エオルゼア時間（月属性/日属性/時属性）
- 月齢（前/カウントダウン/後）
- 地球時間
- リーヴ受注権（カウントダウン）
必要ない箇所はCSSで自由に表示・非表示の設定（display:none;）が可能です。
設置サンプル
- 無地
装飾や改行をしていないパターン
- ポップアップ + 改行 + 色
マウスカーソルを上に乗せると詳細な時計を表示するパターン
- 装飾例
色々いじったパターン（IE以外のブラウザでグラデーション表示）
ダウンロードのデータには「装飾例」と同じパターンのCSSを入れています。
Javascriptについて
エオルゼア時計（Javascript版）は、下記のサイトのJavascriptを参考に、属性表示などを追加した上で調整し、設置しやすい形にまとめたものです。
- FF14News 内のフォーラム（海外/閉鎖） - リーヴ受注権（初出）
- FFXIV STATUS BETA!（海外/閉鎖） - エオルゼア時間/月齢/リーヴ受注権
- FFXIV Yellow Gremlin（海外/閉鎖） - エオルゼア時間/月齢/リーヴ受注権
動作確認
Windows版の各種ブラウザ（IE6~11/Google Chrome/Firefox）、スマートフォン/タブレット端末（iPhone/iPod/Android）にて動作の確認を行っています。
HTML/CSS/Javascriptは全て、文字コード：UTF-8にて作成しています。
デザイン
デザイン変更
エオルゼア時計（Javascript版）のデザイン/レイアウトは全てCSSに記載しています。
ダウンロードの欄に「無地」「ポップアップ + 改行 + 色」のCSSも用意しているので、HTML/CSSがわかる方はご自由にカスタマイズして下さい。
HTML/CSS/Javascriptに記載しているコメントなども全部消去して頂いて構いません。
必要の無い時計や要素などは、CSSの該当箇所の{}内にdisplay:none;と記載（display:block;など書かれている場合は変更）すると非表示にできます。
なお、当サイト右上に設置しているエオルゼア時計（Javascript版）とは異なり、設置サンプルやダウンロードのデータにはアイコン等の画像は一切含まれていません。画像が必要な方は、ファイナルファンタジーXIV 著作物利用許諾契約をご一読の上、各自でご用意下さい。
当サイト右上に設置しているエオルゼア時計（Javascript版）の各アイコン画像はCSSで背景画像として表示しています。
class属性とid属性
class属性とid属性に付けている名称の一覧です。一覧を開く
他のプログラム等と名称が被り問題が起きた場合や他の名称を付けたい場合は、HTML/CSS/Javascript内の該当箇所の名称を全て変更して下さい。
- #eorzeaclock - 時計表示部分全体を囲む要素
- #eorzeatime - エオルゼア時間（月/日/時/分）
- #eorzeaclock2 - eorzeatime以外の箇所を囲む要素
- #eorzeatime2 - エオルゼア時間（年/月/日/時/分/秒）
- #eorzeatime3 - エオルゼア時間（月属性/日属性/時属性）
- .eorzeatime3_ice - 氷属性の箇所
- .eorzeatime3_water - 水属性の箇所
- .eorzeatime3_wind - 風属性の箇所
- .eorzeatime3_lightning - 雷属性の箇所
- .eorzeatime3_fire - 火属性の箇所
- .eorzeatime3_earth - 土属性の箇所
- .eorzeatime3_astral - 星属性の箇所
- .eorzeatime3_umbral - 霊属性の箇所
- .eorzeatime3_txt - （風属性）などのエオルゼア時間文章部分
- #moontime - 月齢（前後/カウントダウン）
- .moontime_NewMoon - 新月
- .moontime_WaxingCrescent - 三日月
- .moontime_WaxingHalfMoon - 上弦の月
- .moontime_WaxingGibbous - 十三夜
- .moontime_FullMoon - 満月
- .moontime_WaningGibbous - 十六夜
- .moontime_WaningHalfMoon - 下弦の月
- .moontime_WaningCrescent - 二十六夜
- .moontime_txt - （新月）（満月）などの月齢文章部分
- .moontime_prev - 月齢・前
- .moontime_next - 月齢・後
- #earthtime - 地球時間
- #levetime - リーヴ受注権（カウントダウン）
設置方法
通常の設置方法
<head> ～ </head>タグの間、または時計を表示したい箇所よりも前の好きな場所に下記の行を追加します。
下記は、時計を貼りたいページと同じ階層にJavascriptを置いた場合の例です。
Javascriptの名前を変更した場合や置き場所が違う場合は、src=""の箇所を絶対パスや相対パスで変更して下さい。
eorzeaclock.jsというファイル名は、変更しても問題ありません。変更しても動作します。
<script type="text/javascript" src="eorzeaclock.js" charset="UTF-8"></script>
<head> ～ </head>タグの間（推奨）、または時計を表示したい箇所よりも前の好きな場所に下記の行を追加します。
下記は、時計を貼りたいページと同じ階層にCSSを置いた場合の例です。
CSSの名前を変更した場合や置き場所が違う場合は、href=""の箇所を絶対パスや相対パスで変更して下さい。
eorzeaclock.cssというファイル名は、変更しても問題ありません。変更しても動作します。
<link rel="stylesheet" type="text/css" href="eorzeaclock.css">
時計を表示したい箇所に下記の行を追加します。
eorzeaclockというid属性名とEorzeaClock()という関数名だけを変更すると動作しなくなります。HTML/CSS/Javascript（文字コード：UTF-8）の該当箇所を全て書き換えれば動作しますので、わかる方はご自由に変更して下さい。
<div id="eorzeaclock"> </div><script type="text/javascript">EorzeaClock()</script>
<head>タグ内を編集できない場合
<head>タグ内を編集できない場合や、<head>タグの意味がわからない場合などは、全部まとめて時計を表示したい箇所に記載して下さい。
CSS/Javascriptの名前を変更した場合や置き場所が違う場合は、src=""とhref=""の箇所を絶対パスや相対パスで変更して下さい。
<script type="text/javascript" src="eorzeaclock.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="eorzeaclock.css">
<div id="eorzeaclock"> </div><script type="text/javascript">EorzeaClock()</script>
ダウンロード
ダウンロードの前に
注意事項
エオルゼア時計（Javascript版）は、新生FF14での属性（月属性/日属性/時属性/年/月/日）の確認をしていない時計です。
エオルゼア時間（時/分/秒）／月齢（前/カウントダウン/後）／地球時間／リーヴ受注権（カウントダウン）は正しく表示されています。
ダウンロードされる方は、エオルゼア時間（時/分/秒）表示用・ページの装飾用・動作確認用と割り切ってご利用下さい。
エオルゼア時計（Javascript版）
Javascript本体（eorzeaclock.js）とCSS（装飾例/eorzeaclock.css）のセットです。
- エオルゼア時計（Javascript版） + CSS（装飾例） - 4.02 KByte / zip圧縮
装飾例以外のCSSが欲しい場合や、自分で色々といじりたい方は下記のCSSをダウンロード後、上書きしてご利用下さい。
- CSS（無地） - 675 Byte / zip圧縮
- CSS（ポップアップ + 改行 + 色） - 821 Byte / zip圧縮
装飾や改行をしていないパターン
マウスカーソルを上に乗せると詳細な時計を表示するパターン
色々いじったパターン（IE以外のブラウザでグラデーション表示）
ダウンロードの欄に「無地」「ポップアップ + 改行 + 色」のCSSも用意しているので、HTML/CSSがわかる方はご自由にカスタマイズして下さい。
HTML/CSS/Javascriptに記載しているコメントなども全部消去して頂いて構いません。
必要の無い時計や要素などは、CSSの該当箇所の{}内にdisplay:none;と記載（display:block;など書かれている場合は変更）すると非表示にできます。
なお、当サイト右上に設置しているエオルゼア時計（Javascript版）とは異なり、設置サンプルやダウンロードのデータにはアイコン等の画像は一切含まれていません。画像が必要な方は、ファイナルファンタジーXIV 著作物利用許諾契約をご一読の上、各自でご用意下さい。
当サイト右上に設置しているエオルゼア時計（Javascript版）の各アイコン画像はCSSで背景画像として表示しています。
class属性とid属性
class属性とid属性に付けている名称の一覧です。一覧を開く
他のプログラム等と名称が被り問題が起きた場合や他の名称を付けたい場合は、HTML/CSS/Javascript内の該当箇所の名称を全て変更して下さい。
- #eorzeaclock - 時計表示部分全体を囲む要素
- #eorzeatime - エオルゼア時間（月/日/時/分）
- #eorzeaclock2 - eorzeatime以外の箇所を囲む要素
- #eorzeatime2 - エオルゼア時間（年/月/日/時/分/秒）
- #eorzeatime3 - エオルゼア時間（月属性/日属性/時属性）
- .eorzeatime3_ice - 氷属性の箇所
- .eorzeatime3_water - 水属性の箇所
- .eorzeatime3_wind - 風属性の箇所
- .eorzeatime3_lightning - 雷属性の箇所
- .eorzeatime3_fire - 火属性の箇所
- .eorzeatime3_earth - 土属性の箇所
- .eorzeatime3_astral - 星属性の箇所
- .eorzeatime3_umbral - 霊属性の箇所
- .eorzeatime3_txt - （風属性）などのエオルゼア時間文章部分
- #moontime - 月齢（前後/カウントダウン）
- .moontime_NewMoon - 新月
- .moontime_WaxingCrescent - 三日月
- .moontime_WaxingHalfMoon - 上弦の月
- .moontime_WaxingGibbous - 十三夜
- .moontime_FullMoon - 満月
- .moontime_WaningGibbous - 十六夜
- .moontime_WaningHalfMoon - 下弦の月
- .moontime_WaningCrescent - 二十六夜
- .moontime_txt - （新月）（満月）などの月齢文章部分
- .moontime_prev - 月齢・前
- .moontime_next - 月齢・後
- #earthtime - 地球時間
- #levetime - リーヴ受注権（カウントダウン）
設置方法
通常の設置方法
<head> ～ </head>タグの間、または時計を表示したい箇所よりも前の好きな場所に下記の行を追加します。
下記は、時計を貼りたいページと同じ階層にJavascriptを置いた場合の例です。
Javascriptの名前を変更した場合や置き場所が違う場合は、src=""の箇所を絶対パスや相対パスで変更して下さい。
eorzeaclock.jsというファイル名は、変更しても問題ありません。変更しても動作します。
<script type="text/javascript" src="eorzeaclock.js" charset="UTF-8"></script>
<head> ～ </head>タグの間（推奨）、または時計を表示したい箇所よりも前の好きな場所に下記の行を追加します。
下記は、時計を貼りたいページと同じ階層にCSSを置いた場合の例です。
CSSの名前を変更した場合や置き場所が違う場合は、href=""の箇所を絶対パスや相対パスで変更して下さい。
eorzeaclock.cssというファイル名は、変更しても問題ありません。変更しても動作します。
<link rel="stylesheet" type="text/css" href="eorzeaclock.css">
時計を表示したい箇所に下記の行を追加します。
eorzeaclockというid属性名とEorzeaClock()という関数名だけを変更すると動作しなくなります。HTML/CSS/Javascript（文字コード：UTF-8）の該当箇所を全て書き換えれば動作しますので、わかる方はご自由に変更して下さい。
<div id="eorzeaclock"> </div><script type="text/javascript">EorzeaClock()</script>
<head>タグ内を編集できない場合
<head>タグ内を編集できない場合や、<head>タグの意味がわからない場合などは、全部まとめて時計を表示したい箇所に記載して下さい。
CSS/Javascriptの名前を変更した場合や置き場所が違う場合は、src=""とhref=""の箇所を絶対パスや相対パスで変更して下さい。
<script type="text/javascript" src="eorzeaclock.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="eorzeaclock.css">
<div id="eorzeaclock"> </div><script type="text/javascript">EorzeaClock()</script>
ダウンロード
ダウンロードの前に
注意事項
エオルゼア時計（Javascript版）は、新生FF14での属性（月属性/日属性/時属性/年/月/日）の確認をしていない時計です。
エオルゼア時間（時/分/秒）／月齢（前/カウントダウン/後）／地球時間／リーヴ受注権（カウントダウン）は正しく表示されています。
ダウンロードされる方は、エオルゼア時間（時/分/秒）表示用・ページの装飾用・動作確認用と割り切ってご利用下さい。
エオルゼア時計（Javascript版）
Javascript本体（eorzeaclock.js）とCSS（装飾例/eorzeaclock.css）のセットです。
- エオルゼア時計（Javascript版） + CSS（装飾例） - 4.02 KByte / zip圧縮
装飾例以外のCSSが欲しい場合や、自分で色々といじりたい方は下記のCSSをダウンロード後、上書きしてご利用下さい。
- CSS（無地） - 675 Byte / zip圧縮
- CSS（ポップアップ + 改行 + 色） - 821 Byte / zip圧縮
- #eorzeaclock - 時計表示部分全体を囲む要素
- #eorzeatime - エオルゼア時間（月/日/時/分）
- #eorzeaclock2 - eorzeatime以外の箇所を囲む要素
- #eorzeatime2 - エオルゼア時間（年/月/日/時/分/秒）
- #eorzeatime3 - エオルゼア時間（月属性/日属性/時属性）
- .eorzeatime3_ice - 氷属性の箇所
- .eorzeatime3_water - 水属性の箇所
- .eorzeatime3_wind - 風属性の箇所
- .eorzeatime3_lightning - 雷属性の箇所
- .eorzeatime3_fire - 火属性の箇所
- .eorzeatime3_earth - 土属性の箇所
- .eorzeatime3_astral - 星属性の箇所
- .eorzeatime3_umbral - 霊属性の箇所
- .eorzeatime3_txt - （風属性）などのエオルゼア時間文章部分
- #moontime - 月齢（前後/カウントダウン）
- .moontime_NewMoon - 新月
- .moontime_WaxingCrescent - 三日月
- .moontime_WaxingHalfMoon - 上弦の月
- .moontime_WaxingGibbous - 十三夜
- .moontime_FullMoon - 満月
- .moontime_WaningGibbous - 十六夜
- .moontime_WaningHalfMoon - 下弦の月
- .moontime_WaningCrescent - 二十六夜
- .moontime_txt - （新月）（満月）などの月齢文章部分
- .moontime_prev - 月齢・前
- .moontime_next - 月齢・後
- #earthtime - 地球時間
- #levetime - リーヴ受注権（カウントダウン）
下記は、時計を貼りたいページと同じ階層にJavascriptを置いた場合の例です。
Javascriptの名前を変更した場合や置き場所が違う場合は、src=""の箇所を絶対パスや相対パスで変更して下さい。
eorzeaclock.jsというファイル名は、変更しても問題ありません。変更しても動作します。
<script type="text/javascript" src="eorzeaclock.js" charset="UTF-8"></script>
<head> ～ </head>タグの間（推奨）、または時計を表示したい箇所よりも前の好きな場所に下記の行を追加します。
下記は、時計を貼りたいページと同じ階層にCSSを置いた場合の例です。
CSSの名前を変更した場合や置き場所が違う場合は、href=""の箇所を絶対パスや相対パスで変更して下さい。
eorzeaclock.cssというファイル名は、変更しても問題ありません。変更しても動作します。
<link rel="stylesheet" type="text/css" href="eorzeaclock.css">
時計を表示したい箇所に下記の行を追加します。
eorzeaclockというid属性名とEorzeaClock()という関数名だけを変更すると動作しなくなります。HTML/CSS/Javascript（文字コード：UTF-8）の該当箇所を全て書き換えれば動作しますので、わかる方はご自由に変更して下さい。
<div id="eorzeaclock"> </div><script type="text/javascript">EorzeaClock()</script>
<head>タグ内を編集できない場合
<head>タグ内を編集できない場合や、<head>タグの意味がわからない場合などは、全部まとめて時計を表示したい箇所に記載して下さい。
CSS/Javascriptの名前を変更した場合や置き場所が違う場合は、src=""とhref=""の箇所を絶対パスや相対パスで変更して下さい。
<script type="text/javascript" src="eorzeaclock.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="eorzeaclock.css">
<div id="eorzeaclock"> </div><script type="text/javascript">EorzeaClock()</script>
ダウンロード
ダウンロードの前に
注意事項
エオルゼア時計（Javascript版）は、新生FF14での属性（月属性/日属性/時属性/年/月/日）の確認をしていない時計です。
エオルゼア時間（時/分/秒）／月齢（前/カウントダウン/後）／地球時間／リーヴ受注権（カウントダウン）は正しく表示されています。
ダウンロードされる方は、エオルゼア時間（時/分/秒）表示用・ページの装飾用・動作確認用と割り切ってご利用下さい。
エオルゼア時計（Javascript版）
Javascript本体（eorzeaclock.js）とCSS（装飾例/eorzeaclock.css）のセットです。
- エオルゼア時計（Javascript版） + CSS（装飾例） - 4.02 KByte / zip圧縮
装飾例以外のCSSが欲しい場合や、自分で色々といじりたい方は下記のCSSをダウンロード後、上書きしてご利用下さい。
- CSS（無地） - 675 Byte / zip圧縮
- CSS（ポップアップ + 改行 + 色） - 821 Byte / zip圧縮
<link rel="stylesheet" type="text/css" href="eorzeaclock.css">
<div id="eorzeaclock"> </div><script type="text/javascript">EorzeaClock()</script>