ボクのアフィリエイト日記

ボクアフィ

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」が削除できているか?などをチェックしてみてください。

おすすめ記事

EWWW Image Optimizerの設定画面
画像を「EWWW Image Optimizer」でWebPに変換する方法

2019/5/17  

WordPressプラグイン「EWWW Image Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。

AdSenseの「ページビュー」と「表示回数」の違い
AdSenseの「ページビュー」と「表示回数」の違い

2019/4/3  

AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法
プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

2019/4/3  

WordPressで人気のプラグイン「Contact Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。

-AFFINGER5

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