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