> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# アナウンスモジュール

> Upcartドロワーのアナウンスバーをカスタマイズする方法を学びます。高さ、位置、カウントダウンタイマー、テキストの書式設定、色などを含みます。

<div id="height">
  # 高さ
</div>

高さの設定は、アナウンスバーの太さをコントロールします。**Slim**、**Normal**、**Thick** の3つのオプションがあります。Slim はドロワーをよりコンパクトに保ち、カートのコンテンツ用のスペースを確保します。特に小さな画面で役立ちます。Normal はその中間です。Thick は視覚的な強調を高め、メッセージをお客様に目立たせるのに役立ちます。

<div id="position">
  # 位置
</div>

位置の設定を使用して、アナウンスバーをカートドロワー内の **Before products** または **After products** のどちらに表示するかを選択します。

* **Before products** は、バーをカート本体の上部、ヘッダーのすぐ下に配置します。
* **After products** は、バーをカート本体の下部、フッターのすぐ上に配置します。メモやアップセルのモジュールも同じ場所に配置されている場合は、それらの下になります。

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-bar-position-comparison.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=10c93ddb37a1b682ee6ffd8c22ca0365" alt="商品の上と下に配置されたアナウンスバーを比較する2つのUpcartカート" width="1845" height="1380" data-path="images/upcart/announcements-bar-position-comparison.png" />

<div id="timer-duration">
  ## タイマーの継続時間
</div>

一定時間後にアナウンスを終了させたい場合は、**Timer duration** フィールドにカウントダウンを設定します。形式は `MM:SS` で、5分なら `05:00`、30秒なら `00:30` です。秒は `00`〜`59` の範囲で入力する必要があり、それを超える値はフィールドで拒否されます。

カウントダウンは、アナウンステキストにタイマー変数が含まれている場合にのみ実行されます。時間切れになると、アナウンスバー全体が自動的にカートから削除されます。

<Note>
  組み込みのカウントダウンタイマーはセッションベースで、設定された分数からカウントダウンします。特定の時刻にリセットされる定期的または毎日のカウントダウン（たとえば、毎日午後2時までのカウントダウン）には対応していません。この機能は現在Upcartでは利用できません。
</Note>

<div id="announcement-text">
  ## アナウンステキスト
</div>

このセクションでは、アナウンスバナーに表示されるメッセージを入力して書式設定できます。入力フィールドの上にある書式バーを使用して、テキストの特定の部分にスタイルを適用できます。太字、斜体、下線、色のオプションが含まれています。

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-color-picker-open-styling.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=b5cf7eef319675ff522346102babd4ff" alt="アナウンステキストエディタでテキストのスタイル設定用に開いたカラーピッカー" width="990" height="758" data-path="images/upcart/announcements-color-picker-open-styling.png" />

<Note>
  アナウンステキストのフィールドはハイパーリンクに対応していません。書式ツールバーにはリンクやURLのボタンがなく、貼り付けた `<a>` タグやMarkdownリンクは保存時に削除されます。アナウンスをクリック可能にしたり、リンクを含めたりするには、代わりに **Custom HTML** モジュールを使用してください（下記を参照）。
</Note>

<div id="adding-a-link-or-url-to-the-announcement">
  ### アナウンスにリンクまたはURLを追加する
</div>

組み込みのアナウンステキストフィールドはハイパーリンクをレンダリングしないため、Custom HTMLでリンクを挿入することで、アナウンスバーを置き換えたり補完したりできます。

1. **Upcart > Cart Editor > Settings > Custom HTML** に移動します。

2. **HTML Location** を **Above announcements/rewards**（アナウンスバーの上に表示）または **Below header/announcements/rewards**（アナウンスバーのすぐ下に表示）に設定します。

3. リンクを含むスニペットを貼り付けます。例:

   ```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   <div style="text-align: center; padding: 8px;">
     <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;">
       Shop the sale →
     </a>
   </div>
   ```

4. **Save** をクリックし、ライブカートでテストします。

Custom HTMLの配置場所とスタイル設定の詳細については、[Custom HTML](/ja/upcart/custom_html) と [Custom CSS](/ja/upcart/custom_css) を参照してください。Upcartのサポートチームはカスタムコードの作成やデバッグを行いません。作成にサポートが必要な場合は、Shopify Expert にお問い合わせください。

カウントダウン機能を使用する場合は、タイマー変数をメッセージに直接挿入します。V2カートには `{{timer}}`、V1カートには `{TIMER}` を使用します。

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-announcement-text-field-timer.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=4ba5a19c53cfefb36cc37c1d560c6b3e" alt="メッセージにタイマーカウントダウン変数が追加されたアナウンステキストフィールド" width="1094" height="462" data-path="images/upcart/announcements-announcement-text-field-timer.png" />

<div id="important">
  ## 重要
</div>

タイマー変数（V2は `{{timer}}`、V1は `{TIMER}`）は、コピー＆ペーストではなく手動で入力してください。これにより、ライブカートでタイマーが正しく表示されない原因となる、隠れた書式の問題を回避できます。

<div id="font-size">
  # フォントサイズ
</div>

スライダーを使用してアナウンステキストのサイズをコントロールできます。オプションは10pxから24pxの範囲です。これにより、モバイルとデスクトップの両方で読みやすさを確保できます。

<div id="colors">
  # 色
</div>

Background Color では、アナウンスバー全体の塗りつぶし色を定義できます。Border Color では、バナーの上下にある水平線を調整して、スタイリッシュなコンテナのような見た目にできます。

<div id="advanced-timer-configuration">
  # タイマーの高度な設定
</div>

追加の機能として、JavaScriptを使用してカウントダウンタイマーをカスタマイズできます。スクリプトはCustom HTMLモジュールではなく、\*\*「Scripts (Before Load)」\*\*セクションに追加してください。これは読み込みタイミングの要件であり、セキュリティ上の制限ではありません。Custom HTMLでもスクリプトは実行されますが、カートの読み込みイベントに確実にフックするには実行が遅すぎます。「Scripts (Before Load)」セクションはカートが読み込まれる前にコードを実行するため、`upcartSubscribeCartLoaded` のようなコールバックが正しく発火します。コード例:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<script>
  window.upcartSubscribeCartLoaded(function(event) {
    // Your countdown timer code here
    // event.cart contains the cart object with .items[], .total, .currency
  });
</script>
```

レガシーに関する注意: window\.upcartOnCartLoaded は引き続き動作しますが、非推奨であり、コンソールに警告が記録されます。新しいスクリプトにはすべて upcartSubscribeCartLoaded を使用してください。

コードの配置と構文は慎重にテストしてください。プラットフォームの制限によっては、スクリプトの処理方法に影響が出る場合があります。