今回はAFFINGER5で下のような、光るボタンを実装する方法を解説していきます!
本記事を読んで分かること
- 光るボタンの使い方
- 光るボタンのカスタマイズ方法
- ボタンの種類一覧

ブロックエディタの「Gutenberg」を使用した方法で解説します!
光るボタンの使い方
では早速、光るボタンの使い方を1分で解説します!
①ブロックエディタを追加
②クラシック版の段落を選択

③「タグ」->「カスタムボタン」->「ノーマル」->「詳しくはコチラ」を選択

④下記のようなものが表示されたら終了!

プレビューをしてみると光るボタンが完成していると思います!
光るボタンのカスタマイズ方法
コードの内容を知っておくことで、様々なカスタマイズができます。
以下、それぞれの役割です!

以下のように編集して、再度ボタンを表示させてみます。

こんな感じ

カラーコードは「HTMLカラーコード」を参考にしてください。
2つ詳しく解説しておきますね。
target:""とすると、別タブの複製はなくなります。_blankとすると別タブで開きます。
ref:""とすることにより、光らせないようにできます。
光るボタン一覧
ノーマルから順に表示します。色はオレンジのみ表示します。

基本
詳しくはこちら
お問合せ
もっと詳しく
人気ランキング
ランキングはこちら
角丸

基本
詳しくはこちら
ミニ

基本
ボタン詳しくはコチラ
詳しくはコチラ
MCボタン

ボックスメニュー

基本
サブあり
縦並びタイプ
縦並びタイプ(サブあり)
縦並びタイプ(単品)
ボタンA、ボタンB
ボタンの作り方の解説は以上です。
有効にボタンを活用して、CTRを上げましょう!
それでは!