WordPressで記事やリストの表示件数を制御し、「もっと見る」ボタンで残りを表示する方法をCSSのみで実装したい場合、標準的なCSSのセレクタだけでは限界があります。特に、クリックイベントを伴う操作は通常JavaScriptで処理されるため、CSSのみで完全に再現するのは難しいです。しかし、チェックボックスとラベルを利用したCSSハックで一部の実装は可能です。
CSSだけでのチェックボックスハックの基本構造
基本的な方法は以下の通りです。リストの直後にチェックボックスを置き、そのラベルでチェックのオンオフを切り替えます。
<ul class="list">
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
<li>要素4</li>
</ul>
<input type="checkbox" id="toggle" />
<label for="toggle" class="more-btn"></label>CSSの書き方と注意点
CSSでは :has() セレクタを使用して、チェックボックスがオンのときにリスト内の要素を表示するようにします。ただし、現状のWordPress環境ではブラウザ互換性やテーマによる制約で :has() が正しく動作しないことがあります。
.list li:nth-child(n + 4) {
display: none;
}
.list:has(+ #toggle:checked) li {
display: list-item;
}
#toggle:checked + .more-btn::after {
content: "閉じる";
}WordPressでの実装時の注意
- テーマやプラグインによってCSSが上書きされる場合があります。class名やIDを固有に変更してください。
- ブラウザ互換性の問題があります。特に
:has()はSafariや最新のChromeのみ対応しています。 - 完全にCSSだけで動作させる場合は、チェックボックスハックで対応できる範囲に限られます。動的なリスト追加やAjax対応はJavaScriptが必要です。
まとめ
WordPressで「もっと見る」ボタンをCSSだけで実装する場合、チェックボックスとラベルを使ったハックが可能ですが、ブラウザ対応やテーマ干渉に注意が必要です。もし確実に動作させたい場合は、軽量のJavaScriptを併用することを検討してください。
コメント