どうも！
この記事の内容は、Webサイト制作のプロの方なら当たり前の話なので参考にならないと思います。
ですが、何らかのイベントの計画でグループ内でのお知らせサイトを運営することになり、素人がGoogleサイトを使って運営していく、そんなシチュエーションで捉えていただければ嬉しく思います。
さて、本題。
私はサイト運営にはまだ慣れていないのですが、(すでにブログ歴は5年を超えていますが掲示板のようなサイト運営は最近です)イベントまでのカウントダウンを表示してほしいと頼まれました。
早速「Googleサイト」「カウントダウン」で調べてみるわけですが、アプリの紹介やら、秒単位で表示するやら素人には難しい情報が乱立している印象。
「イベントまで残り何日」という日単位で十分なのに…
何だかんだしているうちに、このようなカウントダウンをサイトに埋め込むことができました！
小さく赤色にです。
Googleサイトに「埋め込み」を挿入して下記のコードをコピペすると写真のような表示になります。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<style type=”text/css”>
/* colorの#000000は黒、#FFFFFFは白 */
div { margin: 0; padding: 0; color:#ff0000; font-size: 120%;
text-align: center; font-family: sans-serif; }
</style>
</head><body>
<div></div>
<script LANGUAGE=”JavaScript”>
let element = document.querySelector(‘div’);
//イベント名・イベント開始日・終了日を設定
const eventName = “アクティビティ”;
const startDate = new Date(“2025/10/21”);
const endDate = new Date(“2025/10/21”);
//現在の日時取得・メッセージの初期化
const nowDate = new Date();
let msg = “”;
//日数を計算
const daysToStartDate = Math.ceil((startDate – nowDate)/(1000*60*60*24));
const daysToEndDate = Math.ceil((endDate – nowDate)/(1000*60*60*24));
if (daysToStartDate > 0) { //イベント開始日前ならば
msg = eventName + “まで残り ” + daysToStartDate + ” 日！”;
}else{
if (daysToStartDate <= 0 && daysToEndDate >= 0 ) { //イベントの期間中ならば
msg = eventName + “、本日です！”;
}else{ //イベントが終了したら
msg = eventName + “、お疲れ様でした！”;
}
}
element.innerHTML = msg; //HTML上に出力
</script>
</body>
</html>
よかったらご自由にお使いください。
ポイント1
私は赤色にしましたが、別の色に変えたい場合は、上記のこの欄のcolorのコードを変えてください。
div { margin: 0; padding: 0; color:#ff0000; font-size: 120%;
赤はff0000 黒なら000000にします。他の色にしたい場合は「カラーコード」の語句で検索なさってください。カラーコードの表の情報が出てくるので、お好きな色のコードを埋め込みましょう。
文字の大きさを変えたい場合は、font-sizeのパーセントの数字を好きなように変えてください。
ポイント2
イベントの名称は下記のコードのevent Nameの箇所の名前を埋めてください。私はアクティビティにしました。どうぞ、お好きな名称で！
const eventName = “アクティビティ”;
const startDate = new Date(“2025/10/21”);
const endDate = new Date(“2025/10/21”);
そして、カウントダウンはいつまででしょうか？
私の場合は、2025年10月21日の1日だけだったので、スタートとエンドにその日を入力しました。
例えば、イベントが10月22日に始まり月末まで、だとすると、スタートに2025/10/22、エンドに2025/10/31と入力します。日付については、単に10/22とかではなく、2025/10/22というように西暦何年かの情報が必要です。
これで、もうわかりましたよね。
日単位のカウントダウンだと全然難しくない埋め込みです。
この原理がわかると、秒単位とかもう少し複雑なコードも埋め込むことができるようになると思います。
ということで、今回は以上です。
GoogleサイトをiPadで編集→直接ではなくコピペでせよ！
スポンサーリンク
コメント