デザインカスタマイズ

AnyGift タグ挿入型では、ECサイトに表示されるギフト購入ウィジェットの見た目を、あなたのストアのブランドに合わせてカスタマイズできます。

「ギフトボタンの色や形がECサイトのデザインと合っていない」「フォームの文字スタイルを統一したい」といった課題に対し、CSSを使ってウィジェット全体の外観を細かく制御できます。

カスタマイズの方法

管理画面の「デザインカスタマイズ」にはブラウザ上で直接CSSを編集できるエディタが用意されています。入力して保存するだけでウィジェットに即時反映されます。

手順:

この方法ではECサイト側のテーマファイルを変更する必要がなく、AnyGift管理画面だけで完結します。

あなたのECサイトのテーマCSSファイルに、AnyGift ウィジェット向けのスタイルを直接追記することもできます。テーマの管理が一元化されている場合や、既存のスタイルシートとまとめて管理したい場合に適しています。

AnyGift ウィジェットの各要素には、専用のCSSクラス名が割り当てられています。これらのクラス名を指定してスタイルを上書きすることで、見た目を変更できます。

カテゴリ	主なクラス名	カスタマイズできる内容の例
ギフトボタン	`anygift-gift-ui__main-button`	ボタンの色・形・文字スタイル・サイズ
注文フォーム	`anygift-order-form__form`	入力フィールドの枠線・背景色・文字サイズ
バナー	`anygift-banner__container`	バナー全体のレイアウト・余白・背景色
商品ボックス	`anygift-product-box-container`	商品画像エリアのサイズ・枠線
メッセージカード選択	`anygift-message-card-selector__image`	カードのサイズ・枠線・選択時の強調
フッター	`anygift-footer__container`	フッターのリンク色・ロゴの表示位置
完了（サンクス）画面	`anygift-complete__title`	完了画面のメッセージ・ボタンデザイン
エラーメッセージ	`anygift-error-message`	エラー表示の文字色・背景色

クラス名はすべて anygift- で始まります。

ECサイト上でウィジェットを表示した状態で、ブラウザの開発者ツール（検証ツール）を使うと、各要素に付いているクラス名を確認できます。anygift- で始まるクラスが AnyGift ウィジェットの要素です。上記以外のクラス名も開発者ツールで確認できます。

クラス名は変更しないでください: AnyGift のアップデートにより、クラス名が変わった場合はカスタムCSSが正しく反映されなくなることがあります。アップデート後は事前に動作確認を推奨します。
CSSの優先度に注意: AnyGift のデフォルトスタイルより優先させるには、セレクタの詳細度を上げるか !important を使う場合があります。ただし !important の多用はメンテナンスが難しくなるため、最小限にとどめてください。
表示確認はスマートフォンでも行う: ギフトウィジェットはスマートフォンからも多く利用されます。カスタマイズ後はPCとスマートフォンの両方で表示を確認してください。
フローティングボタンの位置: フローティングギフトボタンやフローティングカートの位置を変更した場合、他のUI要素（チャットサポートボタン等）と重なっていないか確認してください。

Q. 入力したCSSが反映されていない

ブラウザのキャッシュが原因の場合があります。キャッシュをクリアするか、シークレットモードで確認してください。それでも反映されない場合は、CSSのセレクタや詳細度を見直してください。

Q. 特定の要素だけ変更したい

対応する anygift- で始まるクラス名を確認し、そのクラスのみにスタイルを当ててください。ag- で始まるクラスは内部のスタイル実装であり、カスタマイズ用の安定した契約ではないため使用しないでください。

Q. カスタマイズを元に戻したい

管理画面の「デザインカスタマイズ」のCSSエディタの内容をすべて削除して保存することで、デフォルトのスタイルに戻ります。