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

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

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

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

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

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

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

だけです。

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

たとえば、

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

「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>

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

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

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

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

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

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