ブログテーマのスティッキーを封じ込める！

Sticky とはスクロールに追従せず固定される表示のUI用語です。

私のブログは現在、[ Context-Blog ]というテーマを利用しています。

このテーマは、最近の改変でスティッキーを強要してくるようになりました。
本日もチャッピーと協力してこの邪魔なStickyの封印にチャレンジしてみたいと思います。

ウェブデザインやUI開発の文脈では、画面をスクロールしても特定の表示場所（上部や側面）に要素が固定され続ける仕組みをスティッキー（Sticky）と呼びます。
Context-Blogでは記事タイトルヘッダーの部分がスクロールしてもStickyで残存するようになったのです。

ご覧いただくと判るように、タイトル部のStickyによって記事の表示エリアが著しく狭められ、記事が読みづらくなってUXを損ねています。スマホや縦型タブレットだと何とかなりますが、横長画面のPCだとこれは致命的体験です。記事を読む気がしなくなるのです。

そこで、チャッピーと相談してこのStickyを封じ込めることにしました。狙いは、タイトル部がスクロールで一緒に消失し、縦方向が記事だけで埋め尽くされるようにすることです。

以下は結論だけを簡単に書いていますが、プロセスは簡単ではなく、トライ＆エラーでした。
Context-BlogのSticky優先度と強制力は非常に強力で、CSSを少々追加したくらいではオーバーライド不能でした。

まずChrome とスマホブラウザでは封印に成功したのですが、最後まで残ったのがMacのSafariです。私はMacではSafari中心に利用していますし、Safariだけ回避できないのも困ります。CSSとJSの二段構えが必要でした。

対策方法

私はContext-Blog を直接編集するのではなく、子テーマを作ってそちらの方で改変を加えるようにしています。そうすることで、Context-BlogのUpdateに左右されず、いつでも制御やスタイルをオーバーライドできるのです。

1. 子テーマの style.css に以下を追加

/* ===========================
   Safari 専用 sticky 殺し
   =========================== */
@supports (-webkit-overflow-scrolling: touch) {
    body.single header[class*="title"],
    body.single header[class*="header"],
    body.single header[class*="breadcrumb-holder"],
    body.single [class*="ct"] header,
    body.single .entry-header,
    body.single .ct-title-holder,
    body.single .ct-page-title,
    body.single .post-header,
    body.single .page-header {
        position: static !important;
        top: auto !important;
        position: initial !important;
        position: unset !important;
    }
}

2. 子テーマの functions.php に以下を追加

// タイトル部Stickyの完全抑制
add_action('wp_footer', function () {
?>
<script>
document.addEventListener('DOMContentLoaded', () => {

    const targets = document.querySelectorAll(
        'header[class*="title"], header[class*="header"], header[class*="breadcrumb-holder"], .entry-header, .ct-title-holder, .ct-page-title, .post-header, .page-header'
    );

    function killSticky() {
        targets.forEach(el => {
            el.style.position = 'static';
            el.style.top = 'auto';
            el.classList.remove('sticky', 'is-sticky');
        });
    }
    

    // 初回実行
    killSticky();

    // JS が書き戻してきても常に上書き
    window.addEventListener('scroll', killSticky);
    window.addEventListener('resize', killSticky);
});
</script>
<?php

この二つによって、Stickyは完全に抑制することができました。
最初は表示されていて、スクロールに伴ってタイトルブロックが消失します。

読みやすさが格段に向上して、まずはホッと一安心です。