PC画面で見たときに、AFFINGER5の「ボタンA」と「ボタンB」を横並びにするには、ボタンを＜div class="clearfix rankst"＞で囲みます。
具体的な記述方法や、横並びにならないときのチェックポイントを詳しく解説します。
AFFINGER5のボタンを横並びにするコード
横並びにするコード
PC画面で見たときに、ランキングの「公式ボタン」「詳細ボタン」のように横並びにするには、以下の＜div＞タグでボタンを囲みます。
<div class="clearfix rankst"> <div class="rankstlink-r"> <p><a href="#">ボタンA</a></p> </div> <div class="rankstlink-l"> <p><a href="#">ボタンB</a></p> </div> </div>
※分かりやすいように、改行してあります。
テキストモードでこのままコピペすれば、横並びになります。CSSファイルなどを書き変える必要はありません。
「＃」には、任意のリンクを挿入してください。
表示例
問題なければ、以下のように横並びになっています。
スマートフォンで見たときは、横並びになります。AMPページでは、ボタンデザインが無効になります。
ちなみに、「カスタムボタン」はこの方法では横並びにできません。
「ボタンA」「ボタンB」を横並びにする手順
先ほどのコードをコピペすればOKですが、一応、手順も紹介します。
- テキストモードで「ボタンA」をクリック
- 続いて「ボタンB」をクリック
- ボタンAの「r2」の「2」を削除
- ボタンBの「l2」の「2」を削除
- ボタンAとボタンBを＜div class="clearfix rankst"＞で囲む
問題なくできていれば、ビジュアルモードで見たときに、下の画像のようになっています。
横並びにならないときのチェックポイント
横並びにならないときは、
- ボタンAの「r2」が「r」になっているか？
- ボタンBの「l2」が「l」になっているか？
- 順番が逆（ボタンBが先）になっていないか？
- ＜/div＞で閉じているか？
などをチェックしてください。
それでもできないときは、あきらめてください。
まとめ
PC画面で見たときに、AFFINGER5の「ボタンA」と「ボタンB」を横並びにするには、ボタンを＜div class="clearfix rankst"＞で囲みます。
横並びにならないときは、ボタンA・ボタンBの「2」が削除できているか？などをチェックしてみてください。
