カスタムCSS

デザインの設定だけでは対応できない場合に、Custom CSSボックスを使用します。

すべてのカウントダウンタイプのデザイン設定の最後には、**Custom CSS (Developer Zone)**ボックスがあります。ここに入力した内容は、ビジュアル設定で指定した内容の上に重ねて、ストアフロントのそのカウントダウンに適用されます。

デザイン設定の最下部にあるCustom CSS Developer Zoneボックス

デザイン設定の最後にあるCustom CSSボックス。

本当に役立つ場面

細かな位置調整 - 余白が特殊なテーマで、カウントダウンが正しい位置に収まるようマージンを微調整します。
レスポンシブ対応の調整 - モバイル設定ではカバーされないブレークポイント用のメディアクエリを追加します。
テーマの細部に合わせる - テーマ全体で使われている特定の角丸や影を、設定項目では正確に再現できない場合に使います。
要素を非表示にする - ほかの方法ではオフにできないカウントダウンの一部を削除します。

書き方

ボックスには、<style>タグなしの通常のCSS(セレクタとルール)を入力します。

.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}

カウントダウンのコンテナ自体にはsamita-countdownクラスが付いており、表示されたカウントダウンごとに、そのカウントダウンIDから作られたIDが付与されます。より細かく指定するには、ブラウザの開発者ツールで表示されたカウントダウンを調べ、そこにあるクラスを使用します。

範囲を限定する

このボックスのCSSは、自動ではカウントダウンだけに限定されません。img { ... }のようなセレクタは、ページ上のすべての画像に適用されます。

ルールが必ずカウントダウンだけに適用されるよう、常に接頭辞を付けてください。

/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }

実際のページでテストする

ビルダーのプレビューではテーマが再現されないため、プレビューでは整って見えるCSSでも、商品ページでは整わない場合があります。保存して実際のページを開き、パソコンとスマートフォンの両方で確認してください。

CSSを書きたくない場合

テーマ固有の調整は、サポートがお手伝いできます。アプリには、Custom CSSボックスの横に**Chat now!**ボタンがあり、「Chat with us to customize countdown in your theme.」と説明されています。ページへのリンクと変更したい内容を添えて、サポートに問い合わせることもできます。

次のステップ

このページは役に立ちましたか？