メニュー
ホーム

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

BLOG
SWELL
  1. ホーム
  2. menu
  3. BLOG
  4. 「トップへ戻る」や「目次」の上に特定のページへ飛ぶフローティングボタンを設置（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/category/menu/" class="my-custom-float-btn my-fix-circle-btn">
  <i class="icon-folder"></i>
  <span>カテゴリ</span>
</a>

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

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

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

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

STEP
CSSを登録

 管理者メニューの 外観 > カスタマイズ > 追加CSS もしくはstyle.cssに下記コードをコピー。

Edge、Chrome、BraveはChromiumベース（バージョン 146.0.7680.178（公式ビルド） （64 ビット））なのですが細かな箇所で厳密さが異なりますね。

@media screen and (min-width: 959px) {
    .my-custom-float-btn {
        display: block !important;
        position: fixed !important;
        right: 38px !important; 
        bottom: 180px !important;
        z-index: 99999 !important;
        width: 54px !important;
        height: 54px !important;
    }
    .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ブラウザ（Edge、Chrome、Brave）で表示を確認

SWELL標準の「先頭へ」ボタンや「目次」ボタンの上に今回設置した特定のページへ飛ぶフローティングボタン「カテゴリ」が表示されていることを確認できました。

今回設置した特定のページへ飛ぶフローティングボタン「カテゴリ」とSWELL標準のフローティング追従ボタン

　

BLOG
SWELL
よかったらシェアしてね！
  • URLをコピーしました！
目次