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

ボクアフィ

AFFINGER5

AFFINGER5でスマホフッターに「光るボタン」を固定表示させる方法

AFFINGER5でスマホフッターに「光るボタン」を固定表示させる方法

AFFINGER5でスマートフォンのフッターに「キラリと光るボタン」を固定表示させるには、「スマートフォンのフッターに固定するウィジェット」にボタンAかボタンBを挿入します。

具体的な方法をご紹介します。

スマホフッターにボタンを固定表示させた完成イメージ

AFFINGER5でスマートフォンのフッターにボタンを固定表示させる完成イメージ

今回のカスタマイズは、AFFINGER5(WING)のサンプル「個性的なお店のデザイン(美容室)」に表示されている、スマホフッターにキラリと光るボタンの実装です。

スマホで閲覧したときにのみ、「電話で予約する」のボタンがフッターに固定表示させるように設定します。

スマホフッターにボタンを固定表示させる方法

AFFINGER5でスマートフォンのフッターに「光るボタン」を固定表示させる手順は、

だけです。

スマホフッターメニューなどを削除

フッターボタンが他のボタンとかぶっているNG例

まずは、フッターに固定表示させている既存のメニューやバナーなどを削除しましょう。

たとえば、

  • TOPに戻る
  • スマホ用フッターメニュー
  • AdSenseのアンカー広告

などは外します。これらを外さないと、ボタンとかぶってしまいます。

「TOPに戻るボタン」は、カスタマイズ>オプションカラー>TOPに戻るボタンの配置を上にする(モバイルアンカー広告使用時用)で、併用が可能になります。

ボタンのコードを用意

次に、キラリと光るボタンのコードを用意します。

デフォルトでは、

<div class="rankstlink-r2">
<p><a href="#">ボタンA</a></p>
</div>

です。

「#」の部分は、自サイトのお問い合わせページのURLに置き換えます。アフィリエイトリンクを貼り付けることも可能です。

ボタンのCSSは、ランキング管理の設定と連動しています。ランキング管理で「ボタンに光る演出を入れる」をOFFにしていて、スマートフォンのフッターに固定表示させるボタンだけ光らせたい場合は、以下のコードとなります。

<div class="st-reflection-on">
<div class="rankstlink-r2">
<p><a href="#">ボタンA</a></p>
</div>
</div>

ただし、この方法だとスマホフッターの領域全体が光り、多少違和感があるので注意が必要です。

「スマートフォンのフッターに固定するウィジェット」にコードを貼り付け

「スマートフォンのフッターに固定するウィジェット」にコードを貼り付け

用意したボタンのコードを、「スマートフォンのフッターに固定するウィジェット」に貼り付けます。

場所は、外観>ウィジェット>スマートフォンのフッターに固定するウィジェットです。

以上で、スマートフォンで見たときにだけ、フッター部分にキラリと光るボタンが固定表示されました。

まとめ

AFFINGER5でスマートフォンのフッターに「キラリと光るボタン」を固定表示させるには、「スマートフォンのフッターに固定するウィジェット」にボタンAかボタンBを挿入します。

ランキングCSSで「ボタンに光る演出を入れる」をOFFにしている場合は、<div class="st-reflection-on">で囲むと光るようになります。

ちなみに、「ボタンA」「ボタンB」以外にも、「カスタムボタン」も利用できます。カスタムボタンでは細かく色を設定できるので、サイトに合わせて設定してみてください。

AFFINGER5でスマホフッターにバナー広告を固定表示させる方法
AFFINGER5でスマホフッターにバナー広告を固定表示させる方法

AFFINGER5(WING)で、スマートフォンのフッターにAdSense以外のバナー広告を固定表示(モバイルアンカー広告)させる方法をご紹介します。

続きを見る

おすすめ記事

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.