AFFINGER6でボタンリンクを作る2つの方法とbeaconの扱い

これまでのAFFINGER5ではクラシックエディタの使用が推奨されてきましたが、AFFINGER6(アフィンガー6)はWordPressのブロックエディタ(Gutenberg)への対応を強化したテーマです。

クラシックエディタからブロックエディタに変わることでボタンリンクの作成方法も変わっています。

AFFINGER6を6ヶ月間使ってみた感想とAFFINGER5との違い

目次

AFFINGER6標準のボタンリンク作成方法と気をつけたいところ

AFFINGER6で標準のボタンリンク作成方法は、STINGERカスタムボタンブロックを使う方法になります。

AFFINGER6のボタンリンク作成
AFFINGER6のボタンリンク作成

STINGERカスタムボタンブロックを選択すると、記事作成画面にボタンが表示されます。

AFFINGER6のボタンリンクブロック
AFFINGER6のボタンリンクブロック

このボタンを選択すると、ボタンに表示するテキストや色、リンク先URL、ボタンを光らせるなどの設定ができます。

ボタンリンクの具体的な設定値については下記表を参考にしてもらえればと思います。

STINGERカスタムボタンブロックの各設定について

項目設定値の説明
テキストボタンに表示するテキストを入力します
アイコン (前)テキスト前に表示するアイコンをリストから選択します
アイコンクラステキスト前に表示する任意のアイコンをCSSクラスで指定します
アイコン (後)テキスト後に表示するアイコンをリストから選択します
アイコンクラステキスト後に表示する任意のアイコンをCSSクラスで指定します
カスタムテキストのサイズを指定します(%)
太字見出しを太字にします
リンク先 URLリンクしたいURLを記載します
nofollowリンクに nofollow属性を追加します。
新しいページで開くリンク先を新しいページとして開くようにします。
Google Analytics のイベントラベルonclickイベントラベルを設定します
幅 (%)上下左右のマージを指定します
 影付きにします。
光る演出ボタンを時々光らせる場合はONにします
ボーダーボーダーの太さ、丸みを設定します
タイトル色見出しの色を指定します
ボーダー色枠線の色を指定します
背景色背景色を指定します

出典:AFFINGER6 公式マニュアル

このAFFINGER6のボタンリンクはアフィリエイトのリンクで使われることが多いと思うのですが、個人的に機能が不足しているのがBeacon(ビーコン)の設定が出来ないことです

Beaconとは、アフィリエイトリンクにあるトラッキング用の画像リンクのことで、以下のような書式となっています。

アフィリエイトリンクで使われるBeacon(ビーコン)
アフィリエイトリンクで使われるBeacon(ビーコン)

この画像リンクは幅と高さがそれぞれ1ピクセルで枠がないので、ウェブページが表示された時にはユーザ側には基本何も表示されない画像となっています。

このBeaconですが、AFFINGER5の2020年5月のアップデートによりボタンリンクに設定できるようになっているのですが、AFFINGER6のボタンブロックでは設定できません。

AFFINGER5のボタンリンクではbeacon設定ができた
AFFINGER5のボタンリンクではbeacon設定ができた

AFFINGER ボタンリンクのbeacon対応をリリース

AFFINGER6でAFFINGER5と同じボタンリンクを作る方法

AFFINGER6でAFFINGER5の時と同じボタンリンクを作るには、クラシックブロックを使います。

カスタムボタンを使う場合の設定

ブロックエディタのクラシックブロック
ブロックエディタのクラシックブロック

クラシックブロックを選択すると、以下のような以前までのクラシックエディタを使っていた時と同じような編集が可能となります。

クラシックブロックを使ってAFFINGER5の時と同じボタンリンクを作成
クラシックブロックを使ってAFFINGER5の時と同じボタンリンクを作成

ここで、AFFINGER5の時と同じ用にカスタムボタンでボタンリンクを作成することが出来るので、計測用ビーコンを含めたアフィリエイトのボタンリンクを作成できます。

ボタンA及びボタンBを使う場合の設定

また、カスタムボタンメニュー内にあるボタンAとボタンBを使う場合は、aタグだけでなくimgタグもそのまま貼り付けることで、計測用ビーコンが設定できます。

クラシックブロックでカスタムボタンのボタンAまたはボタンBを挿入すると、記事作成画面では以下のようになります。

AFFINGER6のカスタムボタンA
AFFINGER6のカスタムボタンA

ここで、このボタンブロックを選択した状態で、HTMLとして編集を選択します。

ブロックに対してHTMLの編集を行う手順
ブロックに対してHTMLの編集を行う手順

そうすると、htmlが表示されます。

AFFINGER6のボタンA表示html
AFFINGER6のボタンA表示html

ここでaタグ部分を広告コードに置き換えることで、アフィリエイト用のボタンリンクとなります。

ボタンリンクにアフィリエイトリンクを設定
ボタンリンクにアフィリエイトリンクを設定

アフィリエイトリンクの挿入が完了したら、html編集モードからビジュアル編集モードに戻ります。

htmlからビジュアルモードへ戻る手順
htmlからビジュアルモードへ戻る手順

ブロックエディタの状態に戻って、実際の表示に近い状態を確認することができます。

あとは、記事を作成して公開すれば、ボタンリンクが表示されいるはずです。

AFFINGER6 ボタンリンクAの表示状態
AFFINGER6 ボタンリンクAの表示状態

このボタンAとボタンBの色は、AFFINGER6のランキング管理メニューから変更ができます。

AFFINGER6のランキング管理メニュー
AFFINGER6のランキング管理メニュー

ランキング管理メニューを開くとリンクボタンに関する設定部分があるので、ここでボタンの色を変更できます。

AFFINGER6 ボタンリンクA及びBの色変更方法
AFFINGER6 ボタンリンクA及びBの色変更方法

設定を変えたあとはキャッシュを削除しましょう

ランキング管理用のCSS(デザイン)を使用しないにチェックを入れるとボタンが表示されなくなるので注意してください。

ボタンA及びボタンBを使わない場合は、ランキング管理用のCSS(デザイン)を使用しないにチェックを入れるとGoogleのPageSpeed Insightsで使用していない CSS の削減の指摘が改善されます。

AFFINGER6は、現状機能追加が頻繁に行われている状況です。

そのため、今後のアップデートでカスタムボタンブロックでもビーコンの設定が出来るようになるかもしれませんが、現状はアフィリエイトリンクのビーコンをボタンリンクに埋め込むにはクラシックブロックを使った方法が最適です。

よかったらシェアしてね!
目次
閉じる