Embedded Files
カウントダウンターゲット日時の設定方法
const setting = new Date("Dec 24, 2025 18:00:00"); // ターゲット日時設定
の部分を Jul 07,2026 00:00:00 （2026年7月7日午前0時0分0秒）などと設定します
ターゲット日時の表示部分は、<p class="ttl2">2025/12/24 18:00</p>を変更します
書体の変更方法（Googleフォントの使い方）は、ページ下にあります
サイズの変更はドラッグするだけです（レスポンシブ対応です）
背景画像や書体はお好みに合わせお使いください
NO.1（書体は一括指定）
カウントダウン終了時
NO.２（書体は個別指定）
カウントダウン終了時
NO.３（背景画像なし・書体は個別指定）
カウントダウン終了時
NO.４（背景画像なし・書体は個別指定）
カウントダウン終了時
NO.５（ターゲット日時表示なし・書体は個別）
カウントダウン終了時
NO.６（シンプル・日付カウントなし）
カウントダウン終了時
Googleフォントの使い方
https://fonts.google.com/ よりGoogle Fontsへ
お好みのフォントをクリック
Get font
Get embed code
青枠のようにいくつかのフォントが family になっています
Embed code in the <head> of your htmlの Copy code（赤枠）
目的のフォント（青枠）の font-family 部分（黄色枠）だけををコピー
Copy code（赤枠）でコピーしたものをコード１番上の <!-- 書体指定 --> 部分にペースト
<!-- 書体指定 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet">
<div class="image">
<p class="ttl">Countdown to Christmas</p>
黄色枠でコピーしたfont-family を下記部分にペースト
.ttl {
font-family: "Dancing Script", cursive;
font-weight: bold;
font-style: normal; /* italicは斜体 */
margin: 0.5em 0px;
この例の場合６つのフォントが family になっていますので、<!-- 書体指定 --> の記述は１箇所だけで６種類のフォントの使い分けができます。
例えば、タイトル（.ttl）・ターゲット日時（.ttl2)・カウントダウン単位（.time）カウントダウン数字（#day,#hour,#min,#sec ）の4箇所をそれぞれ別の書体で表現できます。
Google Sites
Report abuse