【SWELL】スマホに固定追従フッターを設置してスクロール後に表示

2025年2月8日2025年3月13日

当サイトでも使用しているWordPressテーマWordPressテーマ「SWELL」のスマホフッター部分に固定で表示されるお問合せボタン等を設定する方法です。

ブロックパーツを作成

ブログパーツ＞新規投稿を追加＞ブロック＞SWELLボタンでお問合せボタンを作成

ブログパーツにCSSクラス名を追加

作成したブログパーツ＞高度な設定＞追加CSSクラスに任意のCSS名（今回は ”mySpOverLap-fixed-bottom”）を追加

Note

追加CSSクラスには「 .mySpOverLap-fixed-bottom 」の最初の「 . 」を付けずに「mySpOverLap-fixed-bottom」のみを追加
追加したCSSクラス名は”style.css”に追加するCSS名とに合わせて下さい。

JavaScriptを追加

ブログパーツ内にカスタムHTMLブロックを設置して “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>

Note

ブログパーツを保存する時に “更新に失敗しました。返答が正しいJSON レスポンスではありません。” と表示されることがあります。

サーバー側でのセキュリティ対策の為の設定を一時的に「無効」すれば保存できるようになります。

ブログパーツの呼び出しコードを確認

ブログパーツ＞呼び出しコードを確認

CSSを “style.css” に追加

#spfooter-fixmenu {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99;
}

@media screen and (max-width: 600px) {
.l-footer__foot, .l-footer__widgetArea {
    padding-bottom: 60px; /* フッターの高さ調整 */
}
#spfooter-fixmenu .swell-block-column {
	padding: 7px 0px; /* 上下左右の余白 */
}

/* スクロール後に表示 */
.mySpOverLap-fixed-bottom {
	position: fixed;
	bottom: -60px; /* 初期の位置 */
	transition: 0.8s ease;
	transform: translateY(100%);
}
.mySpOverLapShow {
	transform: translateY(0px);
}
}

/* スマホ以外では非表示 */
@media screen and (min-width: 600px) {
#spfooter-fixmenu, #fixed-sidebar-menu {
	display: none;
}
}

Note

3行目の ”padding-bottom” の数値は、フッター部分のCopyrightやコンテンツにかからないように高さを適宜調整して下さい。
スクロール前にブログパーツが見えてしまう場合は、10行目と12行目の数値で調整して下さい。