サイドバーのBadgesリンクを隠す方法

サイドバーのカスタマイズは追って追加されると思いますが、今のところ「Badges」リンクを削除したい、または少なくとも「More…」の中に隠したいと考えています。

とりあえずCSSで隠すしかないでしょうか?

CSSがよくわかりません。リンクを含むdivはsidebar-section-link-wrapperというクラスで、IDはありません。a.sidebar-section-link-badges { display: none; }でaタグを隠そうとしても、何も隠れません。

「いいね!」 2

こんにちは、ハンバーガーメニューでこのようなことをするために「nth-child」を使用しました。

https://www.w3schools.com/cssref/sel_nth-child.asp

「いいね!」 1

nth-child は多くのことに非常に役立ちますが、この場合は危険である可能性があります。数字のみに基づいているため、このためには、バッジが同じ位置に留まることが保証される必要があります。

それより前に何かを追加/削除/移動すると、バッジの位置が変わり、バッジが表示されたり、他のものが非表示になったりする可能性がありますが、それに気づかないかもしれません。

:has() はこれに最適ですが、残念ながらまだサポートが限られています。特に、Firefox ではデフォルトで無効になっており、多くのモバイルブラウザには搭載されていません。

非表示にすることが重要でない場合、つまり、可能な限り最高の体験のために非表示にし、まだ :has() をサポートしていないブラウザでは表示されるようにしても問題ない場合は、次のセレクターを使用できます。

sidebar-section-link-wrapper:has(a.sidebar-section-link-badges) { display: none; }
「いいね!」 1

アイデアをありがとう。とりあえずそれでいこうと思います。しかし、idが追加されることを願っています。

「いいね!」 1

こんにちは。

これで非表示にできます。 :slightly_smiling_face:

.sidebar-section-link-wrapper {
  .sidebar-section-link.sidebar-section-link-badges {
    display: none;
  }
}
「いいね!」 6

これを古いテーマコンポーネント(古いハンバーガーメニューも同様でした)にコピー&ペーストしたところ、うまく動作しました。本当にありがとうございました。そして、他の皆さんにも重ねて感謝いたします。

「いいね!」 3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

このCSSは2.9.0beta12で動作しないようです。何かアイデアはありますか? :slight_smile:

これは最新バージョンでも引き続き機能します。


コードを共有していただけますか?

「いいね!」 1

申し訳ありません。機能しました。「もっと見る」リンクのバグのため、コメントアウトしていました。

そのバグとは、「もっと見る」メニューオプションがない場合でもリンクが表示されることです。私のフォーラムのオプションの数では、「バッジ」オプションが 存在している 場合、たとえそこに置きたくなくても、「もっと見る」には少なくとも何かがあります!(問題は残っています…バッジページ自体にいると、役に立たない「もっと見る」リンクが表示されます。)"More..." shows in sidebar when there is nothing more

この投稿を編集したとき、なぜか「テキストの上にURLを貼り付けてハイパーリンクを作成する」機能が機能しませんでした。

なるほど。実際には、More メニューのオプションは存在しますが非表示になっているため、空ではないのでバグではないと思います。しかし、もし私が正しく理解しているのであれば、More メニュー内のすべてを非表示にするということでしょうか?もしそうであれば、More セクション全体を非表示にする方が良いと思います。

More メニューのドロップダウンをすべてのページから非表示にするには:

// すべてのページからMoreメニューを非表示にする
.sidebar-more-section-links-details {
  display: none;
}

特定のページで非表示にしたい場合は、body クラスを使用してターゲットを指定できます。

こちらで見つけることができます。

例えば、バッジページでは次のようになります。

// 特定のページ(バッジ)からMoreメニューを非表示にする
body.badges-page {
  .sidebar-more-section-links-details {
    display: none;
  }
}

これにより、More ドロップダウンは非表示になりますが、サイドバーの Badges は表示されます。


しかし、前のコードを使用して Badges を非表示にした場合、それらも表示されなくなります。

// BadgesのMoreメニュー項目を非表示にする
.sidebar-section-link-wrapper {
  .sidebar-section-link.sidebar-section-link-badges {
    display: none;
  }
}

// 特定のページ(バッジ)からMoreメニューを非表示にする
body.badges-page {
  .sidebar-more-section-links-details {
    display: none;
  }
}

「いいね!」 1

「もっと見る」オプションは、他に項目がある場合にのみ表示されるべきであり、それをクリックしても何らかの効果があるはずだと考えているため、これはバグだと考えています。バグレポートはこちらです: "More..." shows in sidebar when there is nothing more

このトピックは617日後に自動的に閉じられました。返信はもうできません。