【AFFINGER】『ボタンA』『ボタンB』を横並びに表示するやり方、アフィリエイトボタンを自然に押したくなる配置

ムロ

このブログは、AFFINGERのテーマを買ったけど使い方がわからない！？そんな初心者さんに、記事作成ツールの使い方や、AFFINGERでSEOを効率よくするための記事を書いているブログです( ^ω^ ) 私も、AFFINGERのテーマを購入したときはかなり苦戦しました。そんな経験を元に使い方を記事で紹介していきます。

AFFINGER プラグインセット販売価格29,800円（税込）

＼当サイト限定特典付き／

AFFINGER プラグインセットショップはコチラ

AFFINGERで、アフィリエイト商品を説明する時に役立つツールの『ボタンA』『ボタンB』の紹介をします。

これは、AFFINGERでもかなり有能な機能の一つでアフィリエイトボタンを自然に押したくなるような見た目になります。

ランキング機能などで、ボタンを横並びにして、『公式ページ』と『商品ページ』にリンクするのに役立つAFFINGERボタン機能です。

このボタンを使うことで、商品ページと公式ページの紹介が簡単で見やすく作ることができますので、クリックされる確率が上がります

横並びにするとデザイン的にも良いですね。

ユーザーにはわかりやすくなるので、やってみましょう。

ムロ

今回、初心者でも使えるようにマニュアルを作りました。この記事を読んでもらえればAFFINGER５の使い方がよくわかります。【最新版2021年】AFFINGER5の使い方とインストール方法、補足マニュアルと不具合の修正を紹介本ブログの人気記事です。

【AFFINGER】アフィリエイト『ボタンA』『ボタンB』を横並びにする

イメージ図はこんな感じ。

AFFINGERで『ボタンA』『ボタンB』を横並びで表示する手順

step
1テキストエディタへ

テキストエディタで『ボタンA』『ボタンB』を選択します。

step
2テキストでまずは確認

縦並びになっているボタンを、横並びにします。

⇩

step
3テキストへ

ボタンA 　<div class="rankstlink-r2">

ボタンB    <div class="rankstlink-l2">

step
1＜div class="clearfix rankst"＞で囲む

ボタンAとボタンBのコードができたら＜div class="clearfix rankst"＞でボタンコードを囲む。

『ボタンA』『ボタンB』を横並びするコードはこちら（これをコピペしてください）

このコードをコピペして使えばOK

『"#"』にリンクを貼ってボタンを完成させましょう。

 command
<div class="clearfix rankst">
<div class="rankstlink-r">
<a href="#">ボタンA</a>
</div>
<div class="rankstlink-l">
<a href="#">ボタンB</a>
</div>
</div>

『ボタンA』『ボタンB』横並びにならないときの注意点

どうしてもできない時は、こちらを確認してみましょう。

この２点を確認しておけばOK

AFFINGER5 ランキング管理でデフォルトで『ボタンA』『ボタンB』を横並びで表示する機能があります。

しかし、ランキング管理では３つまでしかできないので、自分で作る方法を覚えておいた方がいいですね。

AFFINGER『ボタンA』『ボタンB』の実践使い方を紹介

下記のように、

• 公式サイト
• 自分の記事

リンクを貼り購入できるように、使い方をしっかりと記事で説明できるようにしてボタンを使うことが有効的です。

まとめ：AFFINGERの『ボタンA』『ボタンB』横並びにする

ランキング機能を使うときは見やすく便利なので私はよく使っています。

すごく簡単にできるカスタムなので、ぜひやってみてください。