AFFINGER5の「ボタンA」「ボタンB」をPC画面で横並びにする方法

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ですが、一応、手順も紹介します。

問題なくできていれば、ビジュアルモードで見たときに、下の画像のようになっています。

横並びにならないときのチェックポイント

横並びにならないときは、

などをチェックしてください。

それでもできないときは、あきらめてください。

まとめ

PC画面で見たときに、AFFINGER5の「ボタンA」と「ボタンB」を横並びにするには、ボタンを＜div class="clearfix rankst"＞で囲みます。

横並びにならないときは、ボタンA・ボタンBの「2」が削除できているか？などをチェックしてみてください。