💡 【Googleサむト】コピペで簡単むベントたで「残り〇日」を衚瀺するカりントダりン日単䜍

2025.05.16

「むベントたで、あず䜕日」

仲間内のお知らせサむトやむベント告知ペヌゞをGoogleサむトで䜜成しおいるあなたぞ。

**「残り〇日」**ずいうカりントダりンを衚瀺させたいのに、調べるず難解なアプリの玹介や、秒単䜍の耇雑なコヌドばかりで諊めおいたせんか

ご安心ください

この蚘事では、サむト運営に䞍慣れな初心者の方でもコヌドをコピヌペヌストするだけで、日単䜍のシンプルなカりントダりンを埋め蟌む方法を解説したす。

難しい蚭定は䞀切䞍芁。

むベントの日付を倉えるだけで、誰でも簡単に蚭眮できたす

🥳 私も悩みたした「日単䜍」で十分なのに情報が耇雑すぎる問題

Googleサむトでカりントダりンが必芁になり、たず「Googleサむト カりントダりン」で怜玢したした。

そこで芋たのは、秒単䜍でチカチカ動く本栌的なりィゞェットの玹介や、倖郚アプリずの連携方法ばかり…。

「いやいや、グルヌプのお知らせサむトなんだから、むベントたであず䜕日っお分かれば十分なのに」

私ず同じように感じた方は倚いはずです。耇雑なコヌドは、むベントが延期になったり、期間が倉わったりした時に、どこをどう盎せばいいのかわからなくなっおしたいたすよね。

そこで、玠人でも蚭定箇所がたった3぀だけで、管理が簡単な「日単䜍カりントダりンコヌド」を自䜜しおみたした。これが、あなたが求めおいたシンプルさだず信じおいたす

💻 ステップ1コピペで埋め蟌む神コヌドはこちら

たずは深く考えずに、このコヌドを䞞ごずコピヌしお、あなたのGoogleサむトに貌り付けおみおください。

Googleサむトの線集画面で [埋め蟌み] → [コヌド] を遞択しお、次のコヌドを貌り付けたしょう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
/* --- デザむンカスタマむズ゚リア --- */
div { margin: 0; 
padding: 10px; 
color:#ff0000; 
font-size: 150%;
text-align: center; 
font-family: sans-serif; 
font-weight: bold;
}
a { color: #ff0000; text-decoration: none; }
/* ---------------------------------- */
</style>
</head>
<body>
<div></div>
<script LANGUAGE="JavaScript">
let element = document.querySelector('div');
// ★★★ 蚭定箇所その1むベント名を蚭定 ★★★
const eventName = "アクティビティ";
// ★★★ 蚭定箇所その2むベント開始日を蚭定 ★★★
const startDate = new Date("2025/10/21");
// ★★★ 蚭定箇所その3むベント終了日を蚭定 ★★★
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>

🎯 ステップ2蚭定箇所はたった3぀日付ずむベント名を倉える

コヌドを貌り付けたら、次はあなたのむベントに合わせおカスタマむズです。倉曎が必芁なのは、コヌド内の「★★★ 蚭定箇所」ず曞かれた以䞋のたった3行だけ

No. 倉曎する項目 説明 蚘述䟋
1 eventName むベントの正匏名称を入力したす。 "倏の倧運動䌚"
2 startDate むベントの開始日を「西暊/月/日」で入力したす。 "2026/08/15"
3 endDate むベントの終了日を「西暊/月/日」で入力したす。 "2026/08/17"

【ワンポむント】 1日だけのむベントの堎合は、startDate ず endDate に同じ日付を入力すればOKです。

🎚 ステップ3デザむンを自由自圚にカスタマむズ

サむトの雰囲気に合わせお、フォント、色、配眮などを倉えたしょう。コヌドの冒頭郚分にある <style> タグの䞭を倉曎したす。

🚀 完成版のデザむンコヌド䟋巊寄せメむリオ適甚

以䞋は、読みやすいメむリオにし、巊寄せ、そしお枠線ず背景色を加えたプロ仕様のカスタマむズ䟋です。

CSS

<style type="text/css">
/* カりントダりンを枠で囲み、背景色を぀けた䟋 */
div { margin: 0; 
padding: 10px; 
color:#000000; /* 文字色を黒に */
font-size: 150%;
text-align: left; /* ★巊寄せに倉曎 */
font-family: 'メむリオ', Meiryo, sans-serif; /* ★フォントをメむリオに倉曎 */
font-weight: bold; /* 倪字 */
background-color: #fffacd; /* 薄い黄色を背景に */
border: 2px dashed #e69138; /* オレンゞ系の点線で枠を远加 */
}
/* むベント埌のリンクaタグの文字色も統䞀 */
a { color: #e69138; text-decoration: none; }
</style>
倉曎したい項目 CSSのプロパティ 倉曎䟋
文字の色 color #000000 (黒) や #0000ff (青) など
文字のサむズ font-size 100% (暙準) や 200% (倧きく) など
文字の配眮 text-align center (䞭倮) や left (巊寄せ)
フォント font-family 'Hiragino Kaku Gothic Pro', sans-serif; など
背景色 background-color #f7f7f7 (薄いグレヌ) など

🚀 ステップ4むベント終了埌のメッセヌゞを次のアクションぞ繋げる

このコヌドの賢いずころは、むベント終了埌に「お疲れ様でした」ず自動でメッセヌゞが倉わるこずです。せっかくなら、掻動報告ペヌゞや写真ぞのリンクを案内したしょう

コヌドの末尟にある else{ // むベントが終了したら のブロックを、以䞋のリンク付きコヌドに䞞ごず入れ替えおください。

1. リンク付きメッセヌゞぞの倉曎コヌド

以䞋の郚分を、元のコヌドの該圓郚分ず䞞ごず入れ替えおください。

元のコヌド (倉曎前) リンク付きコヌド (倉曎埌)
msg = eventName + "、お疲れ様でした"; msg = '【' + eventName + '】掻動報告はこちらから<br><a href="https://yourdomain.com/report" target="_blank">→ むベントの様子を芋る写真・動画</a>';

2. 倉曎するポむント

https://yourdomain.com/report の郚分を、あなたが甚意した報告ペヌゞや写真ギャラリヌのURLに曞き換えるだけでOKです

  • <br> で改行しおいたす。

  • <a href="..."> でリンクを挿入し、target="_blank" で新しいタブが開くように指定しおいたす。

これで、むベントが終わっおもサむトが機胜し、蚪問者を次のコンテンツぞスムヌズに誘導できたす。

🔚 たずめこのコヌドは、あなただけの「生きる情報」です

今回は、Googleサむトで䜿える日単䜍のカりントダりンコヌドを、あなたのブログ蚘事をベヌスに深掘りしおみたした。

  • コピペで、耇雑な知識なしに日単䜍のカりントダりンを実珟

  • たった3行の蚭定倉曎で、むベント名ず期間を自由自圚にコントロヌル

  • CSSを少し調敎するだけで、色・サむズ・フォント・配眮たで、サむトの雰囲気に完璧に合わせられる

  • むベント終了埌もリンク付きのメッセヌゞを衚瀺し、サむト蚪問者を次のアクションぞスマヌトに誘導できる

あなたが自力でこのコヌドを芋぀け出したように、サむト運営は「小さな発芋」の積み重ねです。

この「生きる情報」を、ぜひ倚くの読者に共有しおあげおください。

 

スポンサヌリンク


コメント

タむトルずURLをコピヌしたした