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

2018-4-4

ポイントは、以下の３点です。

１．position:relativeとposition:absolute;を使ったHTML記述

２．上記ボックスを表示するＣＳＳ記述

３．現在の日付と時刻を表示するJavaScriptの記述

１．ＨＴＭＬ

<div style="position:relative;">    
  <img src="画像のＵＲＬ">
  <div id="time_all">
    <p id="time_ymd"></p>
    <p id="time_hms"></p> 
  </div>
</div>

</div>

行番
説　明

1-7
画像とその中に重ねる日時用ボックスを１つのボックス（親）にする

1
親ボックスに、｢posision:relative｣相対配置を設定

3-6
日時を表示する領域、日付と時刻を2行に表示にする設定。id名は、JavaScriptに使うので重要

２．ＣＳＳ

#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;}

#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なので、その中の絶対配置となる

３．JavaScript

/* ++++++++++ 今日の日付と時刻表示 ++++++++++ */
timerID = setInterval('clock()',1000); //１秒毎に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:戻り値が０～１１の為
	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 = "&nbsp;" + now.getSeconds();}
	var week = week_list[now.getDay() ] ;
	//ページ表示域へ
	var hms = "&nbsp;" + hour + "：" + min + "&nbsp;(" + week + ")"; 
	return hms;
}

/* ++++++++++ 今日の日付と時刻表示 ++++++++++ */

timerID = setInterval('clock()',1000); //１秒毎に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:戻り値が０～１１の為

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
３．のJavaScript構文で拡張子を｢.js｣として、ファイル（仮に、sample.js）を作成

2
sample.jsをテーマにアップロード

3
sample.jsファイルを読み込む以下の構文をテンプレート｢header.php｣の｢<wp-head>｣と｢</head>｣の間に記述

<script type="text/javascript" src="sample.js"></script>

1	<script type="text/javascript" src="sample.js"></script>