背景画像に重ねて、現在の日付・曜日と時刻を表示

ポイントは、以下の3点です。
1.position:relativeとposition:absolute;を使ったHTML記述
2.上記ボックスを表示するCSS記述
3.現在の日付と時刻を表示するJavaScriptの記述
1.HTML
1 2 3 4 5 6 7 |
<div style="position:relative;"> <img src="画像のURL"> <div id="time_all"> <p id="time_ymd"></p> <p id="time_hms"></p> </div> </div> |
- 行番
- 説 明
- 1-7
- 画像とその中に重ねる日時用ボックスを1つのボックス(親)にする
- 1
- 親ボックスに、「posision:relative」相対配置を設定
- 3-6
- 日時を表示する領域、日付と時刻を2行に表示にする設定。id名は、JavaScriptに使うので重要
2.CSS
1 2 3 4 5 6 7 8 9 10 11 12 |
#time_all { position:absolute; display:block; padding:10px; border:solid 2px #606; border-radius: 10px; top:10px; right:15px;} #time_ymd, #time_hms{ font-weight:bold; font-size:175%; color:#606;} |
- 行番
- 説 明
- 2
- 日時表示ボックスを「posision:absolute;」にするのが重要。absoluteは絶対配置であるが、親がrelativeなので、その中の絶対配置となる
3.JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* ++++++++++ 今日の日付と時刻表示 ++++++++++ */ timerID = setInterval('clock()',1000); //1秒毎にclock()を実行 var week_list = [ "日", "月", "火", "水", "木", "金", "土" ] ; function clock() { document.getElementById("time_ymd").innerHTML = getYmd(); document.getElementById("time_hms").innerHTML = getHms(); } function getYmd() { var now = new Date(); var year = now.getFullYear(); var mon = now.getMonth()+1; // +1:戻り値が0~11の為 var day = now.getDate(); //ページ表示域へ var ymd = year + "/" + mon + "/" + day; return ymd; } function getHms() { var now = new Date(); var hour = now.getHours(); var min = now.getMinutes(); if(min<10) { var min = "0" + now.getMinutes();} var sec = now.getSeconds(); if(sec<10) { var sec = " " + now.getSeconds();} var week = week_list[now.getDay() ] ; //ページ表示域へ var hms = " " + hour + ":" + min + " (" + week + ")"; return hms; } |
※ 曜日の表示は、当サイトでは英語表示となっています。
初めてJavaScriptを挿入される場合
- Step
- 説 明
- 1
- 3.のJavaScript構文で拡張子を「.js」として、ファイル(仮に、sample.js)を作成
- 2
- sample.jsをテーマにアップロード
- 3
- sample.jsファイルを読み込む以下の構文をテンプレート「header.php」の「<wp-head>」と「</head>」の間に記述
1 |
<script type="text/javascript" src="sample.js"></script> |