【SWELL】スマホで下に出る固定オーバーラップのポップアップバナーを作る方法

商用サイト等でよく見かけるスマホで閲覧した場合に下の方にぴょんと表示される固定のバナーを作る方法です。さりげなく表示されるとカッコ良いですしクリック率もあがりますね。

固定オーバーラップのポップアップサンプル

実際のスマホで下に出る固定オーバーラップのポップアップバナーのサンプル（動画）です。下の動画を参照してください。

上記のサンプルでは、サイト（画面）を下方向に一定以上スクロールするとオーバーラップポップアップが表れます。また戻ると隠れます。工夫することで以下のようにアイコンを固定表示することもできます。

ポップアップの作り方

Step. 1 ブログパーツで表示部分を作る

ポップアップはサイト全体（サイト内のどのページでも）同じように出ることにしますのでブログパーツを利用して作ります。

Step. 2 JavaScript を設置する

スクロールすることで下から現れる演出は JavaScript で実装します。JavaScript のコードは共通の場所に記載すればよいのですが、今回はブログパーツの中に埋め込んで利用します。

埋め込むコードは以下です。

<script>
document.addEventListener('DOMContentLoaded', function() {
  const fixedSpBottom = document.querySelector('.mySpOverLap-fixed-bottom');
  window.addEventListener('scroll', function() {
    if (window.scrollY > 100) {
      if ( fixedSpBottom ) {
          fixedSpBottom.classList.add('mySpOverLapShow');
      }
    } else {
      if ( fixedSpBottom ) {
          fixedSpBottom.classList.remove('mySpOverLapShow');
      }
    }
  });
});
</script>

ポイントを解説します。

「mySpOverLapShow」は任意のクラス名です。

Step. 3 「公開」してショートコードを保持する

ブログパーツを公開して、ショートコードを保存します。

公開したら、ショートコードをメモしておきます。

Step. 4 フッターウジェットに配置する

作ったブログパーツを全てのページで表示するために、フッターウジェットに埋め込みます。

WordPress の管理画面から「外観」→「カスタマイズ」→「ウィジェット」を選択します。

ブログパーツのショートコードを貼り付けることで、すべてのページの下部にブログパーツの内容が表示されます。

Step. 5 CSSを配置する

CSSを配置して、表示・非表示の切り替えや見た目を整えていきます。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

埋め込むコードは以下です。

/* ***************************** */
/* オーバーラップ(スマホ) */

.mySpOverLap-fixed-bottom {
  border-top : 1px solid #c0c0c0;
  background-color: #DDEFF8 !important;
  position: fixed;
  bottom: -40px;
  left: 0px;
  width : 100%;
  transition: 0.8s ease;
  transform: translateY(100%);
  z-index: 10; /* 最上面に表示 */
  opacity : 0.8;
}

.mySpOverLapShow {
  transform: translateY(0px);
}

ポイントを解説します。

完成です。

まとめ：スマホで下に出る固定ポップアップ

商用サイト等でよく見かけるスマホで閲覧した場合に下の方にぴょんと表示される固定のバナーを作る方法です。さりげなく表示されるとカッコ良いですしクリック率もあがりますね。

動きのあるカッコイイサイトをどんどん作ってくださいね。