AFFINGERカスタムボタンのホバー演出で集客UP！薄く色が変わるCSSテクニック

AFFINGERを使っている方の中には、カスタムボタンを「クリックされる導線」として活用している方も多いと思います。

でも、ホバー演出（マウスを乗せたときの反応）がデフォルトのままだと、少し物足りないと感じたことはありませんか？

この記事では、ホバー時に“うっすら”と背景色が変化するCSS演出をご紹介します。

ユーザーの視線を自然に引きつけ、クリック率の向上にもつながる実践的なテクニックです。

追加CSSでホバー演出を定義

まずはWordPressの管理画面で、以下のCSSを追加します。

操作手順

1. 「外観」→「カスタマイズ」→「追加CSS」
2. 以下のコードを貼り付け：

.transparent-affinger-btn {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease;
}

.transparent-affinger-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

背景色は rgba() の値を変えることで自由に調整可能です。
例）rgba(0, 0, 0, 0.1)（黒系）や rgba(51,153,255,0.1)（青系）など

イメージ

カスタムボタンにクラスを適用する

エディターで、カスタムボタンブロックを選択し、以下を設定します。

1. ブロック設定 → 「高度な設定」へ
2. 「追加CSSクラス」に transparent-affinger-btn と入力
   

これで、ホバー演出が有効になります。

クリックされるボタンに変えるコツ

このホバー効果は、「今ここにマウスがありますよ」という視覚的なフィードバックをユーザーに与えます。

それによって以下のようなメリットがあります：

• ボタンの存在感が増す
• リンク先の重要性が伝わる
• 迷わずクリックしてもらえる

特に、CTA（お問い合わせ・購入・詳細ページ誘導）ボタンに使うと効果的です。

応用：色を変えてブランディング

ホバー時の色は rgba() の値を調整することで、ブランドカラーに合わせた演出ができます。

例：青みを帯びたホバー背景

.transparent-affinger-btn:hover {
    background-color: rgba(51, 153, 255, 0.12) !important;
}

まとめ

背景を透過したAFFINGERボタンに、ホバー演出を加えることで、自然に目を引く魅せるボタンに進化します

ユーザーの動きに反応する演出は、信頼感や導線誘導力の向上にもつながります

コピペとクラス指定だけで簡単に導入可能！