AFFINGERの「カスタムボタン」は非常に便利で、デザイン性の高いリンクボタンが簡単に作れます。
でも、背景に画像や動画を使っている場合、ボタンの背景色が邪魔してしまうこともありますよね。
この記事では、AFFINGERカスタムボタンの背景を完全に透過し、背景画像を活かしたデザインにする方法をわかりやすく解説します。
▼ホバー演出のカスタマイズは以下の記事を参考にしてください。
カスタムCSSを追加する
WordPress管理画面から以下の操作を行います。
- 「外観」→「カスタマイズ」へ進む
- 左メニューから「追加CSS」を選択
- 以下のコードを貼り付けます
.transparent-affinger-btn {
background: none !important;
background-image: none !important;
box-shadow: none !important;
}このCSSでは、カスタムボタンの背景色と背景画像、影を削除し、完全な透過状態にします。
カスタムボタンブロックにクラスを指定する
次に、Gutenberg（ブロックエディター）でボタンを選び、以下の手順でCSSクラスを適用します。
- カスタムボタンブロックを選択
- 右サイドバーの「ブロック」→「高度な設定」を展開
- 「追加CSSクラス」に
transparent-affinger-btnと入力
枠線や文字色は通常通り調整可能！
この方法では枠線や文字色はAFFINGERのデザイン設定が有効なので、色や太さ、角丸などはそのままカスタマイズできます。
背景だけを透過させて、あとは自由に見た目を整えることができます。
実際の表示イメージ（例）
背景画像の上に透過ボタンを配置することで、デザイン性が一気にアップします。
ヒーローヘッダーやLP（ランディングページ）など、背景画像を活かしたい場面にぴったりです！
まとめ
AFFINGERのカスタムボタンは非常に高機能ですが、背景を透過させることで、より洗練されたデザインが実現できます。
CSSの知識がなくても、この記事の通りに操作すれば簡単に反映できるので、ぜひ活用してみてください。
▼ホバー演出は以下の記事を参考にしてください。