今回はAFFINGER5で下のような、光るボタンを実装する方法を解説していきます！
本記事を読んで分かること
- 光るボタンの使い方
- 光るボタンのカスタマイズ方法
- ボタンの種類一覧
まっきー
ブロックエディタの「Gutenberg」を使用した方法で解説します！
光るボタンの使い方
では早速、光るボタンの使い方を1分で解説します！
①ブロックエディタを追加
②クラシック版の段落を選択
③「タグ」－＞「カスタムボタン」－＞「ノーマル」－＞「詳しくはコチラ」を選択
④下記のようなものが表示されたら終了！
プレビューをしてみると光るボタンが完成していると思います！
光るボタンのカスタマイズ方法
コードの内容を知っておくことで、様々なカスタマイズができます。
以下、それぞれの役割です！
以下のように編集して、再度ボタンを表示させてみます。
こんな感じ
カラーコードは「HTMLカラーコード」を参考にしてください。
2つ詳しく解説しておきますね。
target：""とすると、別タブの複製はなくなります。_blankとすると別タブで開きます。
ref：""とすることにより、光らせないようにできます。
光るボタン一覧
ノーマルから順に表示します。色はオレンジのみ表示します。
基本
詳しくはこちら
お問合せ
もっと詳しく
人気ランキング
ランキングはこちら
角丸
基本
詳しくはこちら
ミニ
基本
ボタン詳しくはコチラ
詳しくはコチラ
MCボタン
ボックスメニュー
基本
サブあり
縦並びタイプ
縦並びタイプ（サブあり）
縦並びタイプ（単品）
ボタンA、ボタンB
ボタンの作り方の解説は以上です。
有効にボタンを活用して、CTRを上げましょう！
それでは！