SWELLのカテゴリ一覧で特定の記事だけクリック不可にする方法
カテゴリ一覧では基本的に各記事がクリックできる仕様ですが、事情によっては特定の記事だけ遷移させたくないケースがあります。
今回は、特定URLを含む投稿だけクリック不可にした実装をご紹介。
疑似要素で安全に制御します。
なぜ特定記事だけクリック不可にしたのか
公開状態は維持したまま、一覧からの遷移だけ止めたい場面は意外とあります。
たとえば、古い事例を一時的に見せたくない場合や、特定導線を制御したい場合です。
H2：使用したCSS
.category .p-postList__item:has(.p-postList__link[href=”your_url”]),
.category .p-postList__item:has(.p-postList__link[href=”your_url”]) {
position: relative;
}
.category .p-postList__item:has(.p-postList__link[href*=”your_url”])::after,
.category .p-postList__item:has(.p-postList__link[href*=”your_url”])::after {
content: “”;
position: absolute;
inset: 0;
z-index: 10;
background: transparent;
cursor: default;
}
.category .p-postList__link[href*=”your_url”],
.category .p-postList__link[href*=”your_url”] {
pointer-events: none!important;
cursor: default!important;
}
実装の考え方
pointer-events: none でリンク自体を無効化しつつ、::after で透明な膜を重ねています。
これにより、ユーザーがクリックしても反応しない状態をより確実に作れます。
注意点
:has() は便利ですが、古いブラウザとの相性は事前に確認しておきたいところです。
最近の環境ではかなり使いやすくなっていますが、クライアントワークでは検証もセットで行うのが安心です。
まとめ
一覧全体ではなく、特定記事だけ導線を止めたいときに便利な方法です。
「非公開にはしたくないが、一覧からは飛ばせたくない」という場面で役立ちます。
つづく
