AFFINGER5

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

投稿日:

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

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

具体的な記述方法や、横並びにならないときのチェックポイントを詳しく解説します。

AFFINGER5のボタンを横並びにするコード

AFFINGER5の「ボタンA」と「ボタンB」が横に並んでいる状態

横並びにするコード

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」を横並びにする手順

AFFINGER5の「ボタンA」「ボタンB」を横並びにする手順

先ほどのコードをコピペすればOKですが、一応、手順も紹介します。

  1. テキストモードで「ボタンA」をクリック
  2. 続いて「ボタンB」をクリック
  3. ボタンAの「r2」の「2」を削除
  4. ボタンBの「l2」の「2」を削除
  5. ボタンAとボタンBを<div class="clearfix rankst">で囲む

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

AFFINGER5の「ボタンA」「ボタンB」を横並びにしたときのビジュアルモード

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

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

  • ボタンAの「r2」が「r」になっているか?
  • ボタンBの「l2」が「l」になっているか?
  • 順番が逆(ボタンBが先)になっていないか?
  • </div>で閉じているか?

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

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

まとめ

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

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

管理人

この記事を書いた人

管理人

このサイトのほか、いろんなブログをWordPressで作っている男。テーマはAFFINGER5を愛用。管理人が使用しているレンタルサーバーはこの3つ

さいごまで読んでいただき、ありがとうございました。この記事が役に立ったら「シェア」していただくとウレシイです。

-AFFINGER5

Copyright© ボクアフィ , 2019 All Rights Reserved.