CSSカスタマイズ機能

CSSカスタマイズ機能では、AnyGift タグ挿入型で表示される要素の色やサイズなどを、CSSでストアのデザインに合わせて調整できます。

管理画面の「デザインカスタマイズ」ページにある「CSSカスタマイズ」タブにCSSを記載することで、ウィジェットの見た目をカスタマイズできます。

⚠️ カスタマイズには anygift- で始まるカスタムクラスのみを使用してください。それ以外のクラス名は変更される可能性があり、サポート対象外です。

💡 ECサイトで管理しているCSSファイルに記載して反映することもできます。

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

活用方法

AnyGiftにより挿入されるUIの要素には、各ストアでカスタマイズできるよう anygift- で始まるクラスを設定しています。これらのクラスにスタイルを適用することで、デザインを調整できます。

⚠️ anygift- で始まるクラス以外は、今後の改善により変更される可能性があります。それらのクラスへのスタイル適用は非推奨です。

eギフトボタンのカスタマイズ

以下のようなコードを適用することで、ボタンデザインを調整できます。

サイズ

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

ボタンの丸み

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

8px は例です。実際の値は、カートに入れるボタンの角丸に合わせて調整してください。

カラー

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

標準の表示例と、色を変更した例です。

フォント・大きさ（住所を知らない相手にeギフトで贈る）

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

文言のカスタマイズ

変更したい要素の anygift- で始まるクラス名を指定し、デフォルトの文言を非表示にして、::before 擬似要素で新しい文言を指定できます。.anygift-対象要素のクラス名 は、変更したい要素の実際のクラス名に置き換えてください。

.anygift-対象要素のクラス名 {
    /* デフォルトの文言を非表示にします */
    font-size: 0 !important;
}

.anygift-対象要素のクラス名::before {
    /* 新しい文言を指定します */
    content: 'お相手が受け取るギフトカードのデザインを選択してください' !important;
    /* フォントサイズは元のサイズに合わせて調整してください */
    font-size: 11px !important;
}

eギフトボタンの文言

ボタンの文言もカスタマイズできます。以下は「LINEやSNSで贈る」に変更する例です。

.anygift-gift-ui__main-button {
    /* デフォルトの文言を非表示にします */
    font-size: 0 !important;
}

.anygift-gift-ui__main-button::before {
    /* 新しい文言を指定します */
    content: 'LINEやSNSで贈る' !important;
    /* フォントサイズは元のサイズに合わせて調整してください */
    font-size: 16px !important;
}

在庫切れ時に表示される文言は、次のように変更できます。

.anygift-gift-ui__main-button:disabled::before {
    content: '在庫切れ' !important;
}

eギフト設定画面

メッセージカードや贈り主情報などの文言に対応するカスタムクラスは次のとおりです。

文言	カスタムクラス
eギフト設定	`anygift-order-form__order-area__label__text`
デジタルカードのデザインを選択してください	`anygift-order-form__message-card__label__text`
メッセージを入力してください	`anygift-order-form__massage-field__text`
贈り主名を入力してください	`anygift-order-form__sender-field__text`
あなたの情報	`anygift-order-form__sender-area__label`
メールアドレス	`anygift-order-form__sender-email-field__text`
ストアからのお知らせ	`anygift-order-form__sender-accepts-newsletter__label`

「eギフトとは？」モーダル

文言	カスタムクラス
eギフトとは？	`anygift-about-modal__title`
発行されたURLの受け取り期限に関する注意	`anygift-about-modal__caution__exp`
メッセージ入力・配送先に関する注意	`anygift-about-modal__caution__text`
閉じる	`anygift-about-modal__close-button__bottom`
AnyGift とは？	`anygift-about-modal__link`
AnyGift 画像	`anygift-about-modal__link__img`
とは？	`anygift-about-modal__link__text`

注意文を置き換える場合は、対象クラスのデフォルト文言を非表示にしてから新しい文言を指定します。

.anygift-about-modal__caution__text {
    font-size: 0 !important;
}

.anygift-about-modal__caution__text::before {
    content: "※ 置き換える文章" !important;
    font-size: 14px !important;
}

商品詳細ページの「AnyGiftのeギフトとは？」ボタン

文言・要素	カスタムクラス
「のeギフトとは？」	`anygift-about-button__text`
デジタルカードのデザインを選択してください	`anygift-order-form__message-card__label__text`
メッセージを入力してください	`anygift-order-form__massage-field__text`
贈り主名を入力してください	`anygift-order-form__sender-field__text`
あなたの情報	`anygift-order-form__sender-area__label`
メールアドレス	`anygift-order-form__sender-email-field__text`
ストアからのお知らせ	`anygift-order-form__sender-accepts-newsletter__label`

説明モーダルのリンクの表示例です。

説明モーダルの要素には、次のクラスが設定されています。

場所	カスタムクラス
eギフトのご利用方法	`anygift-explain-modal__title`
画像	`anygift-explain-modal__section__img`
説明文	`anygift-explain-modal__section__text`
次へ進む	`anygift-explain-modal__next-button`

バリデーションモーダル

場所	カスタムクラス
戻るボタン	`anygift-validation-modal__back-button`
メインメッセージ	`anygift-validation-modal__main-message`
サブメッセージ	`anygift-validation-modal__sub-message`
詳細メッセージ	`anygift-validation-modal__detail-message`

モーダルのフッター

モーダルのフッター全体には、次のクラスが設定されています。

場所	カスタムクラス
フッター全体	`anygift-footer__container`

フローティングカートボタン

場所	カスタムクラス
ボタン全体	`anygift-floating-cart__button`
カート画像	`anygift-floating-cart__button__img`
eギフトの文言	`anygift-floating-cart__button__text`

ボタンの位置

.anygift-floating-cart {
    bottom: 80px !important; /* 下端からの距離 */
    right: 35px !important;  /* 右端からの距離 */
}

ボタンの色

.anygift-floating-cart__button {
    background: #000 !important;
}

前面への表示

.anygift-floating-cart {
    z-index: 100; /* 他要素より大きい値に調整 */
}

ラッピング設定

ラッピングの説明を追加する例です。content の文言や色などは、ストアの内容に合わせて変更してください。

.anygift-order-form__gift-area__label__text::after {
    content: '※ご選択が無い場合は「For Youカード」をお付けします。\Aラッピングについてのご案内をここに記載してください。' !important;
    white-space: pre-line !important;
    font-size: 12px !important;
    display: block !important;
    margin-top: 10px !important;
    color: #2A2B39BF !important;
}

AnyGiftで表示する画像のカスタマイズ

モーダル内の画像は、既存画像を非表示にし、::after 擬似要素の content: url(...) で差し替えられます。新しい画像URL は、各画像のURLに置き換えてください。

「AnyGiftのeギフトとは？」モーダル

.anygift-about-modal__section > div:nth-of-type(1) img {
    display: none;
}
.anygift-about-modal__section > div:nth-of-type(1)::after {
    content: url(新しい画像URL1);
    display: block;
    width: 100px;
    height: 130px;
    margin: 0 auto;
}

.anygift-about-modal__section > div:nth-of-type(2) img {
    display: none;
}
.anygift-about-modal__section > div:nth-of-type(2)::after {
    content: url(新しい画像URL2);
    display: block;
    width: 100px;
    height: 130px;
    margin: 0 auto;
}

.anygift-about-modal__section > div:nth-of-type(3) img {
    display: none;
}
.anygift-about-modal__section > div:nth-of-type(3)::after {
    content: url(新しい画像URL3);
    display: block;
    width: 100px;
    height: 130px;
    margin: 0 auto;
}

.anygift-about-modal__section > div:nth-of-type(4) img {
    display: none;
}
.anygift-about-modal__section > div:nth-of-type(4)::after {
    content: url(新しい画像URL4);
    display: block;
    width: 100px;
    height: 130px;
    margin: 0 auto;
}

「eギフトとは？」モーダルの表示例です。画面構成や表示内容はストアの設定により異なります。

選べるギフトプレビューボタンのカスタマイズ

選べるギフトを利用している場合、eギフトボタンの下に「選べる商品を見る」プレビューボタンが表示されます。サイズ・表示・カラー・文言をカスタマイズできます。

サイズの変更

.anygift-child-product-modal__check-button {
    width: 100% !important;
}

非表示

.anygift-child-product-modal__check-button {
    display: none !important;
}

カラーの変更

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

文言の変更

次の例では、ボタンの文言を「サンプル画面を見る」に変更します。

.anygift-child-product-modal__check-button {
    /* デフォルトの文言を非表示にします */
    font-size: 0 !important;
}

.anygift-child-product-modal__check-button::before {
    /* 新しい文言を指定します */
    content: 'サンプル画面を見る' !important;
    /* フォントサイズは元のサイズに合わせて調整してください */
    font-size: 16px !important;
}

受取画面の商品説明文の文字サイズを調整する

受取画面のプレビューに表示される商品説明文の文字サイズは調整可能です。以下は、文字サイズを16px、行間を1.6に設定する例です。設定後はプレビューで表示を確認し、必要に応じて数値を調整してください。

.anygift-preview-product-hero-description {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

カスタマイズしたい要素にカスタムクラスが設定されていない場合は、下記AnyGiftアシスタントより、お問い合わせください。

■ AnyGift アシスタントAI URL：https://assistant.anygift.jp/store

■ ログイン方法メールアドレス：AnyGift管理画面にご登録いただいているすべてのアドレスパスワード：AnyGift管理画面へのログインパスワード

AnyGift管理画面の左下にある「アシスタントAI」という項目からもお入りいただけます

カスタマイズの方法

方法1: 管理画面のCSSエディタに直接入力する（推奨）

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

手順:

管理画面にログインし、「デザインカスタマイズ」メニューを開く
CSSエディタにカスタムCSSを入力する
「保存」をクリックして反映する
ECサイトを再読み込みして表示を確認する

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

方法2: ECサイトのテーマCSSに追記する

あなたの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エディタの内容をすべて削除して保存することで、デフォルトのスタイルに戻ります。

決済前のおすすめ商品と「eギフトで贈れる商品を探す」バナーのクラス名は、決済前のおすすめ商品と「eギフトで贈れる商品を探す」バナーをご覧ください。