「トップへ戻る」や「目次」の上に特定のページへ飛ぶフローティングボタンを設置（WordPress + SWELL）

SWELLには標準で右下に「トップへ戻る（当サイトでは「先頭へ」）」や「目次」といったフローティングボタンがあります。これらのボタンの上部に特定のページへ飛ぶフローティングボタンを追加で設置した際の作業メモです。

フローティングボタンを表示するブログパーツと CSSの作成

ブログパーツで作ったノーマルサイズの横長ボタンをウィジェットエリア「フッター直前」に配置し、CSSでSWELL純正のフローティングボタンのデザインに近づけるためボタンを正円に、サイズ、色と透過度、表示位置などの微調整を行っています。

ブログパーツと CSS作成時のWordPress、SWELL、PHPのバージョンです。

WordPress6.9.4
SWELL2.16.0
PHP8.3.30

ホームとカテゴリページ、検索・タグ、お問合せの４つのアイコンを追加表示するサンプルです。

STEP

ブログパーツでボタンをカスタムHTMLとして作成、PCのみ表示に設定

(1)管理者メニューのブログパーツでボタンアイコンを「カスタムHTML」として作成

<a href="https://yokahiyori.com/" class="my-custom-float-btn my-fix-circle-btn btn-page-a">
  <i class="icon-home"></i>
  <span>ホーム</span>
</a>
<a href="https://yokahiyori.com/category/menu/" class="my-custom-float-btn my-fix-circle-btn btn-page-b">
  <i class="icon-folder"></i>
  <span>カテゴリ</span>
</a>
<a href="https://yokahiyori.com/#tag-parts"  class="my-custom-float-btn my-fix-circle-btn btn-page-c">
  <i class="icon-search"></i>
  <span>検索・タグ</span>
</a>
<a href="https://yokahiyori.com/contact-form/" class="my-custom-float-btn my-fix-circle-btn btn-page-d">
  <i class="icon-mail"></i>
  <span>お問合せ</span>
</a>

(2)スマホではブログパーツが非表示になるように設定

作成した「カスタムHTML」ブロックを選択し、ブロックツールバー（ブロックのすぐ上に浮かぶメニュー）のアイコンをクリックして「グループ化」を選択。右側の設定パネルで「グループ」の設定が表示されるので、その中の「デバイス制限」項目にある「表示するデバイスサイズ」で「PC」を選択します。

(3)このブログパーツの「呼び出しコード」をコピー

STEP

作成したブログパーツの呼び出しコードをウィジェットの「フッター直前」にカスタムHTMLとしてコピー

管理者メニューの外観 > ウィジェットで「フッター直前」に「カスタムHTML」をドラッグして配置、ブログパーツの呼び出しコードをコピーして保存。

STEP

CSSを登録

管理者メニューの外観 > カスタマイズ > 追加CSS 、もしくは外観 > テーマファイルエディター > スタイルシート（style.css）にコピー。　ブラウザによって挙動が異なる事象があったので「!important」を付けていますが環境によっては不要な箇所もあると思います。

@media screen and (min-width: 960px) {
    .my-custom-float-btn {
        display: block !important;
        position: fixed !important;
        right: 38px !important; 
        z-index: 99999 !important;
        width: 54px !important;
        height: 54px !important;
    }
    .btn-page-a {
        bottom: 370px;
    }
    .btn-page-b {
        bottom: 305px;
    }
    .btn-page-c {
        bottom: 240px;
    }
    .btn-page-d {
        bottom: 190px;
    }
    .my-fix-circle-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 54px !important;
        height: 54px !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        text-decoration: none !important;
        transition: all .3s !important;
        line-height: 1 !important;
        overflow: hidden !important;
        background-color: rgba(255, 255, 255, 0.6) !important; 
        color: #001f3f !important;
        border: 1px solid rgba(0, 31, 63, 0.8) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    .my-fix-circle-btn:hover {
        background-color: rgba(0, 31, 63, 0.8) !important; 
        color: #ffffff !important;
        transform: translateY(-3px) !important;
        border-color: #001f3f !important;
    }
    .my-fix-circle-btn i {
        font-size: 16px !important;
        margin-bottom: 2px !important;
        display: block !important;
    }
    .my-fix-circle-btn span {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        font-family: inherit !important;
        letter-spacing: 0 !important;
        transform: scale(0.7) !important;
        transform-origin: center top !important;
        white-space: nowrap !important;
        opacity: 0.9 !important;
    }
}

PCブラウザ（Firefox、Edge、Chrome、Brave）で表示を確認

動作確認はFirefox（149.0.2 64ビット）と Edge、Chrome、Brave（ともにChromiumベース（バージョン 146.0.7680.178 公式ビルド 64ビット）で行っています。
SWELL標準の「先頭へ」ボタンや「目次」ボタンの上に今回設置した特定のページへ飛ぶフローティングボタンが表示され機能することが確認できました。

よかったらシェアしてね！

URLをコピーしました！