AFFINGER

【AFFINGER5】ボタンA、ボタンBを横並びに表示するやり方を紹介

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

 

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

 

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

 

『AFFINGER5』公式サイトです

最強のブログテーマAFFINGER5

>>WPテーマ 「WING(AFFINGER5)」多くのブロガーに愛されているテーマ

  • 「もっと美しく、簡単に。」基本デザインパターンも48種!

無駄な時間はとことん省く、通常なら知識が必要な時間かかるカスタマイズもAFFINGERならクリック1つ

記事がサクサク書ける!豊富で自由度の高いデザインパーツ

記事作成に欠かせない様々な装飾をクリック1つで設定できる

 

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

 

 

 

【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の『r2』『l2』の2を削除していないか?
  • </div>で閉じているのか?

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

 

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

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

 

 

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

下記のように、

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

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

 

 

 

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

 

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

 

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

 

 コチラも読まれています

>>【AFFINGER5】ブログのトップページをカスタマイズするやり方

>>【AFFINGER5】スライドボックスを作り、枠で囲む作り方

>>【AFFINGER5】バナーリンクの作り方、ブログはオシャレになる【バナーリンク】

 

 

  • この記事を書いた人
  • 最新記事

ムロ

サイト管理人のムロです。 【趣味のブログがいつの間にかお金を稼いでくれた】月間10万PV達成 ➡️8ヶ月でブログ収益は月20万円 ➡️ 本業と副業で年収は1000万超え➡️ブログでは、SEO・アフィリエイト・動画配信・AFFINGER・転職について書いていますので、よろしくです!!

人気記事一覧

1

悩む男性  2020年最後の転職に向けて、一体どこのサイトで転職活動をしたら良いのか。どこの転職エージェントがいいのか教えて欲しい     悩む女性転職サイトってたくさんあるけど実際はどこが ...

2

悩む男性アフィリエイトで稼ぐコツが知りたい。いま、個人ブログを運営しているけど月1,000円未満です・・月5万円を目指したい。   悩む女性収益化するためには、どうしたらいいですか? &nb ...

3

  悩む女性個性的なブログはアクセスあるの?   悩む男性ブログの独自性ってどうすればいいにの?   悩む男性オリジナリティって一体なに?     こ ...

4

悩む男性ブログの書き方がわかりません、どうすれば良い記事が書けるようになるんでしょうか   悩む女性ブログの構成ってどのようにづればいいいですか?   悩む男性どのように書けば読ま ...

-AFFINGER

© 2021 MURO BLOG Powered by AFFINGER5