「トップへ戻る」や「目次」の上に特定のページへ飛ぶフローティングボタンをPC、タブレット、スマホ画面に追加表示（WordPress + SWELL）

下記カスタムHTMLコード中の「特殊文字コード」はそのまま入力してブラウザ上で表示すると特殊文字（文字参照）の始まりと
認識されフォルダアイコンの場合、絵文字「 📁 」が表示されます。本ページではエスケープ処理して特殊文字コード
「 📁 」として表示しています。そのため、「bodyタグ終了直前に出力するコード（/body直前）」の入力欄に
コピーすると絵文字「 📁 」として表示されます。

<div id="my-custom-float-wrapper">
<div class="my-custom-float-btn btn-page-1">
    <a href="https://yokahiyori.com/" class="my-fix-circle-btn">
        <span class="sw-custom-icon">&#8962;</span>
        <span>ホーム</span>
    </a>
</div>
<div class="my-custom-float-btn btn-page-2">
    <a href="https://yokahiyori.com/category/menu/" class="my-fix-circle-btn">
        <span class="sw-custom-icon">&#128193;</span>
        <span>カテゴリ</span>
        <span>全記事</span>
    </a>
</div>
<div class="my-custom-float-btn btn-page-3">
    <a href="https://yokahiyori.com/#tag-elework" class="my-fix-circle-btn">
        <span>電子工作</span>
    </a>
</div>
<div class="my-custom-float-btn btn-page-4">
    <a href="https://yokahiyori.com/#tag-diy" class="my-fix-circle-btn">
        <span>ＤＩＹ</span>
    </a>
</div>
<div class="my-custom-float-btn btn-page-5">
    <a href="https://yokahiyori.com/#tag-webconst" class="my-fix-circle-btn">
  <span>BLOG</span>
  <span>サイト</span>
  <span>構築</span>
    </a>
</div>
<div class="my-custom-float-btn btn-page-6">
    <a href="https://yokahiyori.com/#tag-parts" class="my-fix-circle-btn">
        <span class="sw-custom-icon">&#128269;</span>
        <span>検索・タグ</span>
    </a>
</div>
<div class="my-custom-float-btn btn-page-7">
    <a href="https://yokahiyori.com/contact-form/" class="my-fix-circle-btn">
        <span class="sw-custom-icon">&#9993;</span>
        <span>お問合せ</span>
    </a>
</div>
</div>

/* 共通設定（PC・スマホ・タブレット共通） */
.my-custom-float-btn {
    display: block !important;
    position: fixed !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.85) !important;
    color: #001f3f !important;
    border: 1px solid rgba(0, 31, 63, 0.8) !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* アイコンをモノクロの線画に統一 */
.my-fix-circle-btn .sw-custom-icon {
    font-size: 18px !important; 
    line-height: 1 !important;
    margin-bottom: 2px !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    color: #001f3f !important;
    font-family: "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
    text-shadow: none !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:hover .sw-custom-icon {
    color: #ffffff !important;
}

/* 下部テキストの調整 */
.my-fix-circle-btn span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    transform: scale(0.75) !important;
    transform-origin: center top !important;
    white-space: nowrap !important;
}

/* 文字のみボタン用の調整（上下中央へ配置） */
.my-fix-circle-btn:not(:has(.sw-custom-icon)) span {
    transform: scale(0.85) !important;
    transform-origin: center center !important;
    padding: 0 4px !important;
}

/* PC表示時の位置設定（画面幅960px以上） */
@media screen and (min-width: 960px) {
    .my-custom-float-btn {
        right: 38px !important; 
    }
    .btn-page-1 { bottom: 582px !important; }
    .btn-page-2 { bottom: 520px !important; }
    .btn-page-3 { bottom: 458px !important; }
    .btn-page-4 { bottom: 396px !important; }
    .btn-page-5 { bottom: 334px !important; }
    .btn-page-6 { bottom: 272px !important; }
    .btn-page-7 { bottom: 210px !important; } 
}

/* タブレット表示時の位置設定（画面幅600px 〜 959px） */
@media screen and (min-width: 600px) and (max-width: 959px) {
    .my-custom-float-btn {
        right: 20px !important; 
    }
    .btn-page-1 { bottom: 557px !important; }
    .btn-page-2 { bottom: 495px !important; }
    .btn-page-3 { bottom: 433px !important; }
    .btn-page-4 { bottom: 371px !important; }
    .btn-page-5 { bottom: 309px !important; }
    .btn-page-6 { bottom: 247px !important; }
    .btn-page-7 { bottom: 185px !important; } 
}

/* スマホ表示時の位置設定（画面幅599px以下） */
@media screen and (max-width: 599px) {
    .my-custom-float-btn {
        right: 15.5px !important; 
    }
    .btn-page-1 { bottom: 602px !important; }
    .btn-page-2 { bottom: 540px !important; }
    .btn-page-3 { bottom: 478px !important; }
    .btn-page-4 { bottom: 416px !important; }
    .btn-page-5 { bottom: 354px !important; }
    .btn-page-6 { bottom: 292px !important; }
    .btn-page-7 { bottom: 230px !important; }
}

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth <= 599) {
        var wrapper = document.getElementById('my-custom-float-wrapper');
        if (wrapper) {
            wrapper.style.setProperty('display', 'none', 'important');
        }
    }
});
</script>

/* スマホ画面（599px以下）でSWELL標準のフローティングボタンの位置を一括調整 */
@media screen and (max-width: 599px) {
    .p-fixBtnWrap {
        bottom: 160px !important; 
    }
}

/* タブレット縦画面時にSWELL標準と追加したフローティングボタンの位置を上方向に移動 */
@media screen and (min-width: 600px) and (max-width: 959px) and (orientation: portrait) {
    .p-fixBtnWrap {
        bottom: 160px !important; 
    }
    .my-custom-float-btn {
        transform: translateY(-160px) !important;
    }
}

/* タブレット横画面時にSWELL標準と追加したフローティングボタンを少し右側に移動 */
@media screen and (min-width: 600px) and (max-width: 1200px) and (orientation: landscape) {
  .p-fixBtnWrap {
    right: 18px !important; 
  }
  .my-custom-float-btn {
    right: 18px !important; 
  }
}