*

PC LIFE

ホーム >  Web制作 >  変化を付ける小技 > 
画像に重ねて現在日時を表示 MENU 

背景画像に重ねて、JavaScriptを利用して現在の日付と時刻を表示更新

*

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

1.position:relativeposition:absolute;を使ったHTML記述

2.上記ボックスを表示するCSS記述

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

1.HTML

  • 行番
  • 説 明
  • 1-7
  • 画像とその中に重ねる日時用ボックスを1つのボックス(親)にする
  • 1
  • 親ボックスに、「posision:relative」相対配置を設定
  • 3-6
  • 日時を表示する領域、日付と時刻を2行に表示にする設定。id名は、JavaScriptに使うので重要

2.CSS

  • 行番
  • 説 明
  • 2
  • 日時表示ボックスを「posision:absolute;」にするのが重要。absoluteは絶対配置であるが、親がrelativeなので、その中の絶対配置となる

3.JavaScript

※ 曜日の表示は、当サイトでは英語表示となっています。

初めてJavaScriptを挿入される場合

  • Step
  • 説 明
  • 1
  • 3.のJavaScript構文で拡張子を「.js」として、ファイル(仮に、sample.js)を作成
  • 2
  • sample.jsをテーマにアップロード
  • 3
  • sample.jsファイルを読み込む以下の構文をテンプレート「header.php」の「<wp-head>」と「</head>」の間に記述