fanbox-pagination-helper : Fanboxのページネーションを上部に追加

fanbox-pagination-helper.user.js

// ==UserScript==
// @name         Fanbox Pagination Helper
// @namespace    fanboxPaginationHelper
// @version      1.3
// @description  Fanboxのページネーションを上部に追加
// @author       roflsunriz
// @match        https://*.fanbox.cc/posts?*
// @grant        GM_addStyle
// @updateURL    https://gist.githubusercontent.com/roflsunriz/f89fad6e9923bd678ac92025486d2f2a/raw/fanbox-pagination-helper.user.js
// @downloadURL  https://gist.githubusercontent.com/roflsunriz/f89fad6e9923bd678ac92025486d2f2a/raw/fanbox-pagination-helper.user.js
// @icon         https://www.google.com/s2/favicons?sz=64&domain=fanbox.cc
// ==/UserScript==

(function() {
    'use strict';

    // ページネーション要素を探す関数
    function findPagination() {
        return document.querySelector('[class*="Pagination__DesktopWrapper-sc-"]');
    }

    // ページネーションを上部に追加する関数
    function addTopPagination() {
        const pagination = findPagination();
        if (!pagination) return;

        // 既に上部にページネーションがあるか確認
        if (document.querySelector('.top-pagination')) return;

        // ページネーションを複製
        const clone = pagination.cloneNode(true);
        clone.classList.add('top-pagination');
        clone.classList.add('custom-pagination');  // スタイル用のクラスを追加

        // ページ上部に挿入
        const container = document.querySelector('[class*="CreatorPostList__Wrapper-sc-"]');
        if (container) {
            container.insertBefore(clone, container.firstChild);
        }
    }

    // DOMの変更を監視
    const observer = new MutationObserver(addTopPagination);
    observer.observe(document.body, { childList: true, subtree: true });

    // 初期実行
    addTopPagination();
})();

GM_addStyle(`
    .custom-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 20px 0;
        padding: 10px 0;
        background-color: #f5f5f5;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .custom-pagination > div {
        display: flex;
        gap: 8px;
    }
`);

Rawボタンを押してTampermonkeyにインストール。