フォローウインドウが汚くなった

2025.06.12

　プラグイン が6.0.0に更新された時からの症状だが、6.0.2に更新されても直ってないので、このまま続きそうだから、メモしておく。以前の方が良かった。

　フォローボタンを押した時に表示されるウインドウが6.0.0から変わって、モーダルウィンドウ風になった。そのせいだと思うが、 の記事を作成する際の設定が反映されてるのか、見出しが追加されてしまった。さらに、z-indexの問題のように、ウインドウの下の文字が透けて表示されている。指摘されている様子がないから、 の問題なのか？

未分類
ActivityPubWordPressバグプラグイン仕様
シェアする
管理人のマストドンアカウントへのリンクなど
いしい＠試行錯誤

コメント

  1. ishii ishii より:
    2025年7月19日 7:53 AM

    "z-indexは、親要素のz-indexの影響を受ける。

    つまり、モーダルで開くウィンドウのz-indexは30ですが、その親要素のメインウィンドウがz-index:10であるため、その影響を受けているという事です。

    サイドにあるお問い合わせボタンは、メインのウィンドウの外にありますので、z-index:20となりますが、モーダルで開くウィンドウのz-indexは、その親要素のメインウィンドウの影響を受け、z-index:10になるためです。
    "
    モーダルウィンドウでz-indexが効かない事象に遭遇 | RishunTrading
    https://rishuntrading.co.jp/blog/css/modal_z-index_not_use/#modal

    ここでのケースは、それとは別の原因らしい。
    .sidebar-scroll{position: -webkit-sticky; position: sticky; top: 0;}の「top: 0」を無効にすると直る。「position: sticky;」を無効にしても直る。

    • ishii ishii より:
      2025年7月19日 8:01 AM

      違った。
      .sidebar-scroll{position: -webkit-sticky; position: sticky; top: 0;}のstickyを触ったら画面から消えただけでモーダルウィンドウの下に移ったわけではなかった。
      問題のz-indexに関しては親ウインドウで見当たらないし、上になっているサイドバーのz-indexはauto。
      もっとよく探せば良いのかもしれないが、これはテーマに問題があるとするべきか、プラグイン #ActivityPub に問題があるとするべきか？
      モーダルウインドウを使わない通常のボップアップウインドウの時は問題が無かった。元に戻してほしい。

      • ishii ishii より:
        2025年7月19日 8:21 AM

        モーダルウインドウのスタイル。
        「z-index: 100000;」と異常に高くしてある。その親ウインドウのz-indexはauto。サイドバーのz-indexもauto。

        .activitypub-modal__overlay {
        align-items: center;
        background-color: rgba(0,0,0,.5);
        bottom: 0;
        color: initial;
        display: flex;
        justify-content: center;
        left: 0;
        padding: 1rem;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 100000;
        }

  2. ishii ishii より:
    2025年7月19日 11:01 AM

    こっちの方は、重なっているサイドバーのプロフィールボックス（.author-box）のposition: relative;をオフにすることでモーダルウインドウの下に隠れる。
    z-indexの無視は「CSSのスタッキングコンテキストという概念が原因」との #Gemini のアドバイスがあったが、Geminiにも再現コードは作れなかった。
    ちなみに、モーダルウインドウのdivはメインウインドウの内側にあり、サイドバーのdivはメインウインドウの内側にはない。それでも、メインウインドウ内のモーダルウインドウがサイドバーも隠す。それなのに、サイドバー内のposition: relative;ブロックやposition: sticky;ブロックはモーダルウインドウの上に表示されてしまう。この「上」とはレイヤーで上ということで、Geminiは画面内の位置の上下と勘違いしてしまうので、相談する際には注意が必要。

  3. ishii ishii より:
    2025年7月19日 11:03 AM

    他にも「目次」が勝手に生成される問題があるので、モーダルウインドウを使うことにしたことがそもそもの間違いなんだと思う。

  4. ishii ishii より:
    2025年7月19日 11:47 AM

    "z-indexは、親要素のz-indexの影響を受ける。
    "
    モーダルウィンドウでz-indexが効かない事象に遭遇 | RishunTrading
    https://rishuntrading.co.jp/blog/css/modal_z-index_not_use/#modal

    これは少し違うかも。
    「お問い合わせ」の.blog0513-sideには「position: fixed;」がある。これを無くすと、同じz-indexでも、「お問い合わせ」はモーダルウインドウに隠される。
    ちなみに、モーダルウインドウの背景画像に透かしがあると分かりにくいから、
    モーダルウインドウをbackground-color: rgba(0, 0, 0, 1.0);にした方が分かりやすい。

    • ishii ishii より:
      2025年7月19日 11:49 AM

      確認するためのコード。

      <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure Original Code</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
    /* CSS */
    .blog0513-sec{
      z-index:10; /* メインのウィンドウ 3番目*/
      position: relative; /* z-indexを有効にするため */
      /* スタイルがないと見えないので最低限のボーダーを追加 */
      border: 1px dashed #ccc;
      padding: 10px;
      text-align: center;
    }
    .blog0513-demo1-modal{
      z-index:30; /* モーダルで開くウィンドウ 一番上*/
      /* モーダル表示に必要な最低限のスタイル */
      display: none; /* 初期は非表示 */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 1.0);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .blog0513-side{
      z-index:20; /* サイドにあるお問い合わせボタン 2番目*/
      position: fixed; /* 固定表示にするため */
      bottom: 20px;
      right: 20px;
      /* 見やすいように最低限のスタイルを追加 */
      background-color: #007bff;
      color: white;
      padding: 8px 12px;
      text-decoration: none;
      border-radius: 4px;
    }

    /* モーダルの中身が空白だと確認しづらいので、最低限のスタイルと閉じるボタンを追加 */
    .blog0513-modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      text-align: center;
      position: relative;
    }
    .blog0513-modal-close {
      position: absolute;
      top: 5px;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="blog0513">
    <section class="blog0513-sec">
      <a id="blog0513" href="#">
        モーダルウインドウ表示
      </a>
      <div class="blog0513-modal blog0513-demo1-modal">
        <div class="blog0513-modal-content">
          <span class="blog0513-modal-close blog0513-demo1-close">&times;</span>
          <p>モーダルウィンドウです</p>
        </div>
      </div>
    </section>
    <a href="#" class="blog0513-side">お問い合わせ</a>
  </div>

  <script>
    jQuery(document).on('click', '#blog0513', function(e){
      e.preventDefault(); // デフォルトのリンク動作をキャンセル
        jQuery('.blog0513-demo1-modal').fadeIn();
    });
    jQuery(document).ready(function($){
        jQuery('.blog0513-demo1-close').on('click', function(){
            jQuery('.blog0513-demo1-modal').fadeOut();
            return false;
        });
      // モーダル外をクリックで閉じる機能
      jQuery('.blog0513-demo1-modal').on('click', function(e) {
        if (e.target === this) {
          jQuery('.blog0513-demo1-modal').fadeOut();
        }
      });
    });
  </script>

</body>
</html>
      • ishii ishii より:
        2025年7月19日 12:02 PM

        #Gemini に尋ねたら
        「申し訳ありませんが、ご提示のコードのCSS設定（特にrgba(0,0,0,1.0)）では、「お問い合わせ」ボタンがモーダルウィンドウに隠れずに見える状況は通常起こり得ません。z-index: 30がz-index: 20より優先され、かつ背景が不透明であれば、手前の要素が後ろの要素を覆い隠すのがCSSの標準的な挙動だからです。」とのこと。
        この回答を得るまで、「隠れない」と質問文に書いたのに「隠れた」と解釈して解説するなど、こちらの質問の意図を理解させるのに苦労した。

        • ishii ishii より:
          2025年7月19日 12:13 PM

          さらに #Gemini に尋ねた結果。

          この現象が他のウェブサイトでも見られるとのことなので、これは単なるCSSのバグや実装の癖というよりは、z-indexとスタックコンテキストの、開発者が見落としがちな複雑な相互作用によるものと考えられます。

          特に、position: fixed、position: sticky、position: relativeといった要素が異なるスタックコンテキストを形成し、その中でz-indexがどのように作用するかは、直感に反することがあります。

          結論として、ご提供いただいたコードと画像だけでは、z-indexの数値が示す通常の挙動と異なるため、具体的な原因を特定するのは非常に困難です。 しかし、positionプロパティを無効にすると解決するという情報から、やはりスタックコンテキストの予期せぬ生成と、そのスタックコンテキスト間の描画順序の決定方法が複雑に絡み合っていることが最も有力な推測です。

          これは「原因不明」というよりは、「ごく一般的なCSSのルールだけでは説明しきれない、より深いスタックコンテキストの挙動が絡んでいる可能性が高い」と言えます。特に、ブラウザがどのように描画ツリーを構築し、どの要素をどのレイヤーに配置するかは、非常に複雑なプロセスであり、具体的な原因はブラウザの開発者ツールで詳細なレイヤー情報（Layersパネルなど）を確認しないと特定が難しい場合が多いです。

    • ishii ishii より:
      2025年7月19日 1:50 PM

      やっぱり

      "z-indexは、親要素のz-indexの影響を受ける。
      "
      モーダルウィンドウでz-indexが効かない事象に遭遇 | RishunTrading
      https://rishuntrading.co.jp/blog/css/modal_z-index_not_use/#modal

      これで正しいのかも。親要素z-indexを上げると、確かに正常になる。
      では、私の #WordPress で起こっているのは？

      • ishii ishii より:
        2025年7月19日 2:16 PM

        見つけた。
        #WordPress のコンテンツ側 .main に「z-index: 0;」。
        一番下にするようになっているから、サイドバーは確実にこれよりも上。
        .mainの中にあるモーダルウインドウは.mainの「z-index: 0;」に引っ張られてサイドバーのコンテンツよりも下になったのかもしれない。
        .mainの「z-index: auto;」にすれば、モーダルウインドウの方が上になる。

        • ishii ishii より:
          2025年7月19日 2:20 PM

          確認用コード。

          <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure Original Code</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
  /* CSS */
  #main{
    z-index:0; /* メインのウィンドウ。.sub-inよりも小さくしない */
    position: relative; /* z-indexを有効にするため */
    /* スタイルがないと見えないので最低限のボーダーを追加 */
    border: 3px dashed #000;
    padding: 10px;
    text-align: center;
  }
  .demo-modal{
    z-index:1000; /* モーダルで開くウィンドウ 一番上*/
    /* モーダル表示に必要な最低限のスタイル */
    display: none; /* 初期は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1.0);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sub-in{
    z-index:200; /* サブウインドウの中身。#mainより小さくすれば隠れる。*/
    position: relative; /* fixed,sticky,relative,absoluteで異常。staticで異常なし */
    bottom: 20px;
    right: 20px;
    /* 見やすいように最低限のスタイルを追加 */
    background-color: #007bff;
    color: white;
    padding: 40px 60px;
    text-decoration: none;
  }

  /* モーダルの中身が空白だと確認しづらいので、最低限のスタイルと閉じるボタンを追加 */
  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    position: relative;
  }
  .modal-close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
  }
  </style>
</head>
<body>

  <div>
  <div id="main">
    <a id="modal-on" href="#">
    モーダルウインドウ表示
    </a>
    <div class="demo-modal">
    <div class="modal-content">
      <span class="modal-close demo-close">&times;</span>
      <p>モーダルウィンドウです</p>
    </div>
    </div>
  </div>
  <div id="sub">
    <a class="sub-in">サブウインドウの中身</a>
  </div>  
  </div>

  <script>
  jQuery(document).on('click', '#modal-on', function(e){
    e.preventDefault(); // デフォルトのリンク動作をキャンセル
    jQuery('.demo-modal').fadeIn();
  });
  jQuery(document).ready(function($){
    jQuery('.demo-close').on('click', function(){
      jQuery('.demo-modal').fadeOut();
      return false;
    });
    // モーダル外をクリックで閉じる機能
    jQuery('.demo-modal').on('click', function(e) {
    if (e.target === this) {
      jQuery('.demo-modal').fadeOut();
    }
    });
  });
  </script>

</body>
</html>
          • ishii ishii より:
            2025年7月19日 2:39 PM

            #Gemini の解説。

            以前のコードから`#main`と`.sub-in`の`z-index`が`0`から`auto`に変更されたことで「サブウインドウの中身」がモーダルウィンドウに隠れるようになったのは、**`z-index: auto`がスタッキングコンテキストの生成と重なり順に与える影響**によるものです。

            ---

            ### 原因の詳細

            以前のコードでは、`#main`に`z-index: 0;`、`.sub-in`に`z-index: 200;`が設定されていました。

            * **前回のコードの問題点**:
            * `#main` (`position: relative; z-index: 0;`) は**新しいスタッキングコンテキスト**を生成します。その子要素である`.demo-modal` (`position: fixed; z-index: 1000;`) はこの`#main`のスタッキングコンテキスト内で最も高い層に描画されます。
            * `.sub-in` (`position: relative; z-index: 200;`) も**新しいスタッキングコンテキスト**を生成します。
            * ここで重要なのは、`#main`と`#sub`（`.sub-in`の親要素）は、**同じ親`div`の兄弟要素**であるという点です。`z-index`は、基本的に**同じスタッキングコンテキスト内の兄弟要素間**で重なり順を決定します。
            * `#main`と`#sub`はそれぞれ異なるスタッキングコンテキストを持つため、それぞれの内部要素の`z-index`（`demo-modal`の`1000`と`sub-in`の`200`）が直接比較されることはありませんでした。
            * `#main`と`#sub`の間で`z-index`が設定されていなかった（または`#main`が`0`、`#sub`がデフォルトの`auto`）ため、DOMの描画順が優先され、DOMで後に記述されている`#sub`（そしてその子である`.sub-in`）が`#main`（そしてその子である`.demo-modal`）の上に描画されていました。これが「隠れない」原因でした。

            * **今回のコードで解決した理由 (`z-index: auto`へ変更)**:
            * `#main`の`z-index`が`auto`になりました。
            * `.sub-in`の`z-index`も`auto`になりました。

            `z-index: auto`が指定された要素は、`position`プロパティが`static`以外に設定されていても、**新しいスタッキングコンテキストを生成しません**（ただし、特定のCSSプロパティの組み合わせによってはスタッキングコンテキストが生成される場合もありますが、このケースでは該当しません）。

            したがって、今回のコードでは：
            1. `#main`は`position: relative;`ですが、`z-index: auto`であるため、それ自体では**新しいスタッキングコンテキストを生成しません**。代わりに、親要素のスタッキングコンテキストに属します。
            2. `.demo-modal`は`position: fixed;`であり、**新しいスタッキングコンテキストを生成し、かつビューポートを基準に配置されます**。`position: fixed`の要素は、`z-index`が`auto`でも常に新しいスタッキングコンテキストを生成し、その`z-index`の値（ここでは`1000`）はルートのスタッキングコンテキスト（`body`）に対して有効になります。
            3. `#sub`内の`.sub-in`も`position: relative;`ですが、`z-index: auto`であるため、**新しいスタッキングコンテキストを生成しません**。`#sub`（`position: static;` `z-index: auto;`）も新しいスタッキングコンテキストを生成しないため、`.sub-in`も親`div`のスタッキングコンテキストに属します。

            結果として、`position: fixed;`である`.demo-modal`は、その高い`z-index: 1000;`によって**他のほとんどの通常フロー内の要素や、`position: relative;`で`z-index: auto;`の要素よりも常に前面に描画される**という特性が発揮されます。`position: fixed`はビューポートに対して固定されるため、親の`div`のスタッキングコンテキストに影響されにくく、かつ最も高い`z-index`を持つことで「サブウインドウの中身」を覆い隠すことができるようになったのです。

            ---

            つまり、以前のコードでは`#main`と`.sub-in`がそれぞれ独自のスタッキングコンテキストを持っていたため、`demo-modal`の`z-index`が`sub-in`に適用されなかったのに対し、今回のコードでは`demo-modal`が**`position: fixed`によって独立したスタッキングコンテキストを生成し、かつ他の要素のスタッキングコンテキストの制限を受けずに高い`z-index`で最前面に表示される**ようになったため、結果として「隠れる」ようになったということです。

        • ishii ishii より:
          2025年7月19日 2:25 PM

          .mainのz-indexが0になっているのには理由があると思うのだが、autoや他の数字で良いのなら、ユーザー側で対処できるはず。どうなんだろう？

          • ishii ishii より:
            2025年7月19日 3:23 PM

            2023年11月28日 18:16の #Cocoon での質問。

            "添付した画像の通り、プラグインが生成した要素と、サイドバーが重なるときにサイドバーが上に来てしまいます。

            ※プラグインが生成した要素は通常、スクロールに追従しませんが、positon: fixed;で追従するようにしています。

            z-indexで、プラグインが生成した要素を最前面にしようとしたのですが、うまくいきません。

            この場合、どういったことをすればプラグインが生成した要素は、サイドバーに隠れることなく前面に表示できるのですか？

            ご教示いただけると幸いです。
            "
            "#main {
            z-index: 1;
            }

            #sidebar {
            z-index: 0;
            }
            "
            要素の重なり順について、プラグインが生成した要素と、サイドバーが重なるときにサイドバーが上に来てしまう【wpForo Ads Manager】 | CSSカスタマイズ相談 | Cocoon フォーラム
            https://wp-cocoon.com/community/customs/%E8%A6%81%E7%B4%A0%E3%81%AE%E9%87%8D%E3%81%AA%E3%82%8A%E9%A0%86%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

            • ishii ishii より:
              2025年7月19日 3:41 PM

              追加CSSに次のコードを追加した。

              /*モーダルウインドウがサイドバーの上面に表示されるようにする*/
              .main{z-index:auto;}
              /*モーダルウインドウがサイドバーの上面に表示されるようにする*/
              /*フォローウインドウの「目次」を非表示にする*/
              .activitypub-modal__header .toc{display:none;}
              /*フォローウインドウの「目次」を非表示にする*/

              • ishii ishii より:
                2025年7月19日 3:42 PM

                こんな感じでユーザーが工夫しなければいけないのって、良くないよね。

                • ishii ishii より:
                  2025年7月19日 4:36 PM

                  #Gemini に尋ねたら、.main{z-index:auto;}は良くないということで、次のような提案をされた。これはプラグインの作者が行うこと。

                  1. モーダルウィンドウを<body>直下に配置する（推奨）

                  多くのモダンなモーダルウィンドウライブラリや実装が採用している方法です。

                  モーダルウィンドウのHTML要素を、<body>タグの直下に配置します。これにより、モーダルウィンドウはどのメインコンテンツやサイドバーの積層コンテキストからも独立した、最も基本的な積層コンテキスト内で管理されます。

                  この状態でモーダルウィンドウのコンテナにposition: fixed;（画面全体に固定表示する場合）またはposition: absolute;（特定の親要素内で固定表示する場合）を設定し、非常に高いz-index（例: 9999以上）を設定すれば、サイドバーを含め、他の全てのコンテンツの上に表示されるようになります。

                  • ishii ishii より:
                    2025年7月19日 4:50 PM

                    サンプルコード。

                    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure Original Code</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
  /* CSS */
  #main{
    z-index:0; /* メインのウィンドウ。.sub-inよりも小さくしない */
    position: relative; /* z-indexを有効にするため */
    /* スタイルがないと見えないので最低限のボーダーを追加 */
    border: 3px dashed #000;
    padding: 10px;
    text-align: center;
  }
  .demo-modal{
    z-index:1000; /* モーダルで開くウィンドウ 一番上*/
    /* モーダル表示に必要な最低限のスタイル */
    display: none; /* 初期は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1.0);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #sub{z-index:0;}
  .sub-in{
    z-index:0; /* サブウインドウの中身。#mainより小さくすれば隠れる。*/
    position: relative; /* fixed,sticky,relative,absoluteで異常。staticで異常なし */
    bottom: 20px;
    right: 20px;
    /* 見やすいように最低限のスタイルを追加 */
    background-color: #007bff;
    color: white;
    padding: 40px 60px;
    text-decoration: none;
  }

  /* モーダルの中身が空白だと確認しづらいので、最低限のスタイルと閉じるボタンを追加 */
  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    position: relative;
  }
  .modal-close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
  }
  </style>
</head>
<body>
    <div class="demo-modal">
    <div class="modal-content">
      <span class="modal-close demo-close">&times;</span>
      <p>モーダルウィンドウです</p>
    </div>
    </div>

  <div>
  <div id="main">
    <a id="modal-on" href="#">
    モーダルウインドウ表示
    </a>
  </div>
  <div id="sub">
    <a class="sub-in">サブウインドウの中身</a>
  </div>  
  </div>

  <script>
  jQuery(document).on('click', '#modal-on', function(e){
    e.preventDefault(); // デフォルトのリンク動作をキャンセル
    jQuery('.demo-modal').fadeIn();
  });
  jQuery(document).ready(function($){
    jQuery('.demo-close').on('click', function(){
      jQuery('.demo-modal').fadeOut();
      return false;
    });
    // モーダル外をクリックで閉じる機能
    jQuery('.demo-modal').on('click', function(e) {
    if (e.target === this) {
      jQuery('.demo-modal').fadeOut();
    }
    });
  });
  </script>

</body>
</html>
                    • ishii ishii より:
                      2025年7月19日 4:57 PM

                      追加CSSに追加した次のコードを削除した。
                      プラグイン #ActivityPub のアップデートで改善されることを願う。

      • ishii ishii より:
        2025年7月19日 9:14 PM

        "親要素のz-index値に依存するというのは、親要素同士のz-index値の序列を子要素が超えることはできないということです。
        "
        迷わない戸惑わないためのz-indexの考え方｜muro
        https://note.com/suznary/n/n48c202be64d0#328327d0-aaa5-4a5a-a0a1-cf2900f3ee04

タイトルとURLをコピーしました