こんにちは、makeshopの質問掲示板担当です。
いつもmakeshopをご利用いただきありがとうございます。

今回は、クリエイターモードで、年末年始商戦などに使える期間限定の表示を、コピー＆ペーストで設置する方法をご紹介します！
クリエイターモードで使えるタグはタグリファレンスをご確認ください。

年末年始商戦に！期間限定のセール販促バナーや営業日案内などをコピペで設置する方法
「トップページ・商品詳細ページ編」

クリエイターモードでは、日時を指定するだけで、バナーやメッセージを期間限定で自動表示できます。ページを開いたときの日時で表示が切り替わり、開始日時以降は表示され、終了日時を過ぎたあとにアクセス（更新）すると消えるため、年末セールや送料無料キャンペーンなどの切り替え作業が不要になります。

この記事では、トップページと商品詳細ページで販促に使える表示を、コピーして貼り付けるだけの形でご紹介します。

【準備】バックアップをとる

失敗しても元に戻せるように、作業前にソースコードのバックアップを保管してください。

【基本の書き方】日時を指定する

日時を指定する基本の形は、下記のとおりです。この記事のコピペ例はすべて、この形を使っています。

<{if strtotime('2026-12-20 00:00:00') < time() && time() < strtotime('2026-12-31 23:59:59')}>
    日時指定した期間に表示します。
<{else}>
    通常時に表示します。
<{/if}>

日時は '年-月-日 時:分:秒'（例：'2026-12-20 00:00:00'）の形で書き、ご自身のキャンペーン期間に変更してください。<{else}> は不要な場合は省略できます。

よく使う書き方は、次のとおりです。

・開始と終了を指定：<{if strtotime('開始日時') < time() && time() < strtotime('終了日時')}>
・開始日時以降だけ表示：<{if strtotime('開始日時') < time()}>
・終了日時まで表示：<{if time() < strtotime('終了日時')}>

【書き方が不安な方へ】コード生成ツールで作る

日時を選ぶだけで、strtotime のコードを自動で作れます。記号の書き間違いによる表示崩れを防げるので、コードに慣れていない方におすすめです。

→日時指定コード生成ツールはこちら

※ツールは予告なく公開停止する場合がございます。ご了承ください。

使い方は、「使い方を選ぶ」→「日時を選ぶ」→「表示する内容を入れる」→「コードをコピーして貼り付ける」の4ステップです（「続けて切り替え」「時間帯で切り替え」は3ステップ）。表示イメージを見ながら調整できます。

・色と文字だけのバナーを作れます
・年末セール→新年のごあいさつ→初売りのように、続けて切り替えられます
・最終発送受付日や営業日のお知らせなどの文例を入れられます

以降のコピペ例は、ツールを使う場合は「表示する内容」にあてはめてお使いください。

【トップページ編】期間限定のバナー・告知帯を出す

トップページは、ショップに入ってはじめて目にする場所なので、セールの告知に最も効果的です。下記の例を、設置したい位置に貼り付けてください。

 ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ

の「HTML」欄に入力します。

▼例1：期間限定のバナー（画像の用意は不要）

色と文字だけで作るバナーです。画像を用意しなくても、コピーして貼り付けるだけで、期間中だけセールバナーを表示できます。期間外は何も表示されません。

<{if strtotime('2026-12-20 00:00:00') < time() && time() < strtotime('2026-12-31 23:59:59')}>
<a href="https://（リンク先のURL）" style="display:block; background:linear-gradient(90deg,#c0392b,#e67e22); color:#fff; text-align:center; text-decoration:none; padding:28px 12px; border-radius:4px; margin:16px 0;">
    <span style="display:block; font-size:15px; letter-spacing:0.2em;">12/20〜12/31 期間限定</span>
    <span style="display:block; font-size:28px; font-weight:bold; margin-top:4px;">年末セール開催中！</span>
</a>
<{/if}>

▼例2：テキストの告知帯

画像を用意できない場合や、送料無料・発送日のお知らせなどをさっと目立たせたい場合に便利です。色（#c0392b）や文言は、ショップのデザインに合わせて変更してください。

<{if strtotime('2026-12-20 00:00:00') < time() && time() < strtotime('2026-12-31 23:59:59')}>
<div style="background:#c0392b; color:#fff; text-align:center; padding:10px 8px; font-weight:bold; font-size:16px;">
    12/31まで｜年末セール開催中！ <a href="https://（リンク先のURL）" style="color:#fff; text-decoration:underline;">対象商品はコチラ！</a>
</div>
<{/if}>

▼例3：開催前→開催中→終了後を自動で切り替える

「もうすぐ開催」の予告で期待感を高め、開催中はセールを告知し、終了後は自動で通常表示に戻します。

<{if time() < strtotime('2026-12-20 00:00:00')}>
    <p style="text-align:center;">12/20から年末セール開催！ お楽しみに。</p>
<{elseif time() < strtotime('2026-12-31 23:59:59')}>
    <p style="text-align:center; font-weight:bold;">年末セール開催中！ 12/31まで</p>
<{else}>
    <!-- 終了後：通常時の表示（何も表示しない場合は空のまま） -->
<{/if}>

条件は上から順に判定されるため、「開催前」「開催中」の順に並べると、開始日時を重ねて指定しなくても自動で切り替わります。

【商品詳細ページ編】購入直前に期間限定の特典を伝える

商品詳細ページは、購入を迷っている方が見るページです。商品名の下に「今だけの特典」を置くと、商品を見た直後に目に入り、背中を押す効果が期待できます。

 ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

の「HTML」欄に入力します。

貼り付ける位置は、商品名の下をおすすめします。オプションを選ぶ商品などは、価格やカートボタンの付近の構造が商品ごとに異なり、表示位置が崩れやすいためです。商品名は <{$item.name}> というタグで表示されています（タグリファレンス）。HTML欄でこのタグを検索して、その記述の直後に貼り付けてください。

▼例4：期間限定のメッセージ（1行）

商品名の下に、期間限定の一言を表示します。

<{if strtotime('2026-12-20 00:00:00') < time() && time() < strtotime('2026-12-31 23:59:59')}>
<p style="color:#c0392b; font-weight:bold; margin:8px 0;">
    12/31まで｜年末セール開催中！（特典の内容を記載）
</p>
<{/if}>

▼例5：商品名の下の訴求ボックス

特典を枠で囲んで目立たせます。特典が複数あるときに向いています。

<{if strtotime('2026-12-20 00:00:00') < time() && time() < strtotime('2026-12-31 23:59:59')}>
<div style="border:2px solid #c0392b; padding:10px 12px; margin:12px 0;">
    <p style="color:#c0392b; font-weight:bold; margin:0 0 6px;">【年末セール】12/31までの期間限定特典</p>
    <ul style="margin:0; padding-left:1.2em; list-style:disc;">
        <li>（特典①を記載）</li>
        <li>（特典②を記載）</li>
    </ul>
</div>
<{/if}>

【応用編】次のセールまで続けて切り替える

年末セールのあと、年始のごあいさつ、さらに初売りセール……と、次に表示したい内容が決まっている場合は、<{elseif}> でつなげて、1つのコードで続けて切り替えられます。下記は、年末セール→新年のごあいさつ→初売りセールの例です。

<{if time() < strtotime('2026-12-20 00:00:00')}>
    <!-- 12/20より前：何も表示しない -->
<{elseif time() < strtotime('2027-01-01 00:00:00')}>
    <a href="https://（リンク先のURL）" style="display:block; background:linear-gradient(90deg,#c0392b,#e67e22); color:#fff; text-align:center; text-decoration:none; padding:28px 12px; border-radius:4px; margin:16px 0;">
        <span style="display:block; font-size:15px; letter-spacing:0.2em;">12/20〜12/31 期間限定</span>
        <span style="display:block; font-size:28px; font-weight:bold; margin-top:4px;">年末セール開催中！</span>
    </a>
<{elseif time() < strtotime('2027-01-04 00:00:00')}>
    <a href="https://（リンク先のURL）" style="display:block; background:linear-gradient(90deg,#9b1c31,#b8860b); color:#fff; text-align:center; text-decoration:none; padding:28px 12px; border-radius:4px; margin:16px 0;">
        <span style="display:block; font-size:15px; letter-spacing:0.2em;">新年のごあいさつ</span>
        <span style="display:block; font-size:28px; font-weight:bold; margin-top:4px;">あけましておめでとうございます！ 本年もご愛顧のほどよろしくお願いいたします。</span>
    </a>
<{elseif time() < strtotime('2027-01-11 00:00:00')}>
    <a href="https://（リンク先のURL）" style="display:block; background:linear-gradient(90deg,#e91e63,#ff9800); color:#fff; text-align:center; text-decoration:none; padding:28px 12px; border-radius:4px; margin:16px 0;">
        <span style="display:block; font-size:15px; letter-spacing:0.2em;">1/4〜1/10 期間限定</span>
        <span style="display:block; font-size:28px; font-weight:bold; margin-top:4px;">新春初売りセール開催中！</span>
    </a>
<{else}>
    <!-- 1/11以降：通常時の表示（何も表示しない場合は空のまま） -->
<{/if}>

書き方のポイントは次のとおりです。

・各行の日時は、「この日時より前まで表示する」という意味です。次の期間は、その日時ちょうどから表示が始まります。
・上から順に判定されるため、日時は必ず早い順（古い日時が上）に並べてください。
・年をまたぐ場合は、年も書き換えてください（例：2026→2027）。
・最後の <{else}> は、すべての期間が終わったあとの表示です。何も表示しない場合は空のままで構いません。
・期間を増やす場合は、<{elseif ...}> の行と表示内容をセットで追加します。

コード生成ツールの「続けて切り替え」タブを使うと、期間の追加・削除をしながらこの形のコードを作れます。

【年末年始のお知らせ編】最終発送受付日・営業日を自動で切り替える

セール告知だけでなく、「年内の発送は何日までか」「いつからいつまでお休みか」といったお知らせも、日時指定で自動表示できます。時刻まで指定できるため、「12月28日14時まで」のような受付締切にも使えます。下記は、最終発送受付日のご案内→休業中のご案内→営業再開で非表示、と切り替える例です。

<{if time() < strtotime('2026-12-15 00:00:00')}>
    <!-- 12/15より前：何も表示しない -->
<{elseif time() < strtotime('2026-12-28 14:00:00')}>
    <div style="border:2px solid #c0392b; padding:12px 14px; margin:12px 0;">
        <p style="margin:0 0 6px; color:#c0392b; font-weight:bold; font-size:18px;">【年末年始のお知らせ】最終発送受付日</p>
        <p style="margin:0; font-size:16px;">12月28日（月）14時までのご注文は、年内に発送いたします。<br>
        14時以降のご注文は、1月5日（火）以降の順次発送となります。</p>
    </div>
<{elseif time() < strtotime('2027-01-04 00:00:00')}>
    <div style="border:2px solid #c0392b; padding:12px 14px; margin:12px 0;">
        <p style="margin:0 0 6px; color:#c0392b; font-weight:bold; font-size:18px;">現在、年末年始休業中です</p>
        <p style="margin:0; font-size:16px;">ご注文は24時間受付中です。発送・お問い合わせへの返信は、1月4日（月）以降に順次対応いたします。</p>
    </div>
<{else}>
    <!-- 1/4以降：何も表示しない（営業再開） -->
<{/if}>

貼り付ける位置は、トップページの上部のほか、商品詳細ページの商品名の下にもおすすめです。購入前に発送時期を伝えることで、お問い合わせの削減にもつながります。

コード生成ツールの「続けて切り替え」タブで、最終発送受付日などのお知らせを組み合わせることもできます。

【設置後の確認】表示を確かめる

本番の期間を設定する前に、いったん表示される日時で確認してから、本番の日時に戻すと安心です。

▼公開中のページを触らずに確認したい場合

この記事のコードは、クリエイターモードで「HTML」を記述できる場所であれば、どこでも動作します。そのため、非公開に設定したフリーページにコードを貼り付けて、切り替わりを確認する方法もあります。公開中のトップページや商品詳細ページを書き換えずに済むので、安心です。

1. 非公開に設定したフリーページを用意し、「HTML」欄にコードを貼り付ける
2. 開始日時を「現在より少し前」、終了日時を「現在より少し先」にして保存し、表示されることを確認する
3. 終了日時を過ぎたあとにページを更新し、表示が消えることを確認する
4. 問題がなければ、本番のページに貼り付ける

※確認が終わったら、テスト用のフリーページは削除するか、非公開のままにしてください。

▼本番のページで確認する場合

1. 確認のため、開始日時を「現在より少し前」、終了日時を「現在より先」にして保存する
2. ショップのトップページ・商品詳細ページを開き、表示されることを確認する
3. 開始日時を「現在より先」に変更して保存し、表示されないことを確認する
4. 本番の開始・終了日時に戻して保存する

注意点は次のとおりです。

・終了日時を過ぎたあとにページへアクセス（更新）すると、表示が消えます。キャンペーンが終わったら、不要になったコードを削除しておくと、次回の編集が楽になります。
・「期間限定」「セール」などの表示内容は、実際の販売条件（価格・特典・期間）と一致させてください。
・貼り付けた後に表示が崩れた場合は、バックアップを戻してから、記述を見直してください。

日時を切り替える基本の考え方は、「クリエイターモードで『日時指定』して表示内容を切り替える方法」でもご紹介しています。

いかがでしたでしょうか。
年末年始商戦のセールや特典の告知に、ぜひお役立てください。

それではまた！