AFFINGER プラグインセット販売価格29,800円（税込）
＼当サイト限定特典付き／
AFFINGERで、アフィリエイト商品を説明する時に役立つツールの『ボタンA』『ボタンB』の紹介をします。
これは、AFFINGERでもかなり有能な機能の一つでアフィリエイトボタンを自然に押したくなるような見た目になります。
ランキング機能などで、ボタンを横並びにして、『公式ページ』と『商品ページ』にリンクするのに役立つAFFINGERボタン機能です。
このボタンを使うことで、商品ページと公式ページの紹介が簡単で見やすく作ることができますので、クリックされる確率が上がります
横並びにするとデザイン的にも良いですね。
ユーザーにはわかりやすくなるので、やってみましょう。
『AFFINGER5』公式サイトです
最強のブログテーマAFFINGER5
＞＞WPテーマ 「WING（AFFINGER5）」多くのブロガーに愛されているテーマ
- 「もっと美しく、簡単に。」基本デザインパターンも48種！
無駄な時間はとことん省く、通常なら知識が必要な時間かかるカスタマイズもAFFINGERならクリック1つ。
記事がサクサク書ける！豊富で自由度の高いデザインパーツ
記事作成に欠かせない様々な装飾をクリック1つで設定できる
もくじだよ
【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"＞でボタンコードを囲む。
ココに注意
コードの終わりに＜/div＞で最後を囲む
『ボタン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』横並びにならないときの注意点
どうしてもできない時は、こちらを確認してみましょう。
ココがポイント
- ボタンAとボタンBの『r２』『l２』の２を削除していないか？
- ＜/div＞で閉じているのか？
この２点を確認しておけばOK
AFFINGER5 ランキング管理でデフォルトで『ボタンA』『ボタンB』を横並びで表示する機能があります。
しかし、ランキング管理では３つまでしかできないので、自分で作る方法を覚えておいた方がいいですね。
こちらの記事で説明してます
AFFINGER『ボタンA』『ボタンB』の実践使い方を紹介
下記のように、
- 公式サイト
- 自分の記事
リンクを貼り購入できるように、使い方をしっかりと記事で説明できるようにしてボタンを使うことが有効的です。
まとめ：AFFINGERの『ボタンA』『ボタンB』横並びにする
ランキング機能を使うときは見やすく便利なので私はよく使っています。
すごく簡単にできるカスタムなので、ぜひやってみてください。
