Affinger

【AFFINGER5】1分でできる!光るボタンの使い方を解説します

スポンサーリンク

今回はAFFINGER5で下のような、光るボタンを実装する方法を解説していきます!

これが光るボタン

本記事を読んで分かること

  • 光るボタンの使い方
  • 光るボタンのカスタマイズ方法
  • ボタンの種類一覧
まっきー

ブロックエディタの「Gutenberg」を使用した方法で解説します!

光るボタンの使い方

では早速、光るボタンの使い方を1分で解説します!

①ブロックエディタを追加

②クラシック版の段落を選択

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

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

プレビューをしてみると光るボタンが完成していると思います!

光るボタンのカスタマイズ方法

コードの内容を知っておくことで、様々なカスタマイズができます。

以下、それぞれの役割です!

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

こんな感じ

コード変更見本(まきろぐTOPへ)

カラーコードは「HTMLカラーコード」を参考にしてください。

2つ詳しく解説しておきますね。

target:""とすると、別タブの複製はなくなります。_blankとすると別タブで開きます。

ref:""とすることにより、光らせないようにできます。

光るボタン一覧

ノーマルから順に表示します。色はオレンジのみ表示します。

基本

ボタン

詳しくはこちら

詳しくはコチラ

お問合せ

お問合せ

もっと詳しく

もっと詳しく

人気ランキング

人気ランキング

ランキングはこちら

ランキングはコチラ

 

 

角丸

基本

角丸ボタン

詳しくはこちら

角丸ボタン

 

 

ミニ

基本

ボタン

詳しくはコチラ

詳しくはコチラ

 

MCボタン

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

 

 

 

ボックスメニュー

基本

サブあり

縦並びタイプ

縦並びタイプ(サブあり)

縦並びタイプ(単品)

ボタンA、ボタンB

 

ボタンの作り方の解説は以上です。

有効にボタンを活用して、CTRを上げましょう!

それでは!

スポンサーリンク

-Affinger