<aside> ⛏️ こちらでは、HTML/CSSの知識を含んだ内容を扱っています。

</aside>

AnyGiftのUIのデザインのカスタマイズについて

AnyGiftによりに挿入されるUIのHTMLの各要素には、各ストアでのカスタマイズ用に anygift- で始まるクラスを設定しております。

テーマの編集から、任意のCSSファイルで anygift- で始まるクラスに対してスタイルを当てていただくことで、デザインのカスタマイズが可能です。

汎用的なボタンカスタマイズ

基本的には、商品詳細ページのcssにて、以下のコードを当てていただくことで、ボタンの調整ができます。

.anygift-gift-ui__container {
    width: 100% !important; # 必ず入れる
    margin: 10px 0px !important; # カートに入れるボタンとの間にmarginが必要な場合
}

.anygift-gift-ui__main-button {
    border-radius: px !important; # カートに入れるボタンと同じborder-radiusにする
    height: px !important; # カートに入れるボタンを同じheightにする
}

<aside> 💡 anygift- で始まるクラス以外のクラスは、今後の改善により変更される可能性がございます。それらのクラスに対してスタイルを当てることは非推奨です。

</aside>

クラスの例

• AnyGiftボタン: anygift-gift-ui__main-button

  

  • 変更可能なデザイン例

    • ボタンサイズ

      .anygift-gift-ui__container {
          width: 100% !important;
      }
      

      

    • ボタンカラー

      .anygift-gift-ui__main-button {
          --tw-gradient-from: rgba(97,13,18,1) !important;
          --tw-gradient-to: rgba(97,13,18,1) !important;
      }
      

      

    • ボタンテキストのフォント・大きさ

    .anygift-gift-ui__main-button {
        font-family: serif !important;
        font-size: 12px !important;
    }