ウェブサイトで「Ctrl+A」を押したとき、記事の本文だけが選択されて余計な部分が選択されないようにしたいと思ったことはありませんか？この記事では、WordPressサイトで記事本文だけを選択できるようにするシンプルなCSS設定を紹介します。
1. なぜ記事本文だけを選択できるようにするのか
ウェブサイトの記事を読んでいるとき、その内容をコピーして保存したり、引用したりすることがあります。しかし、「Ctrl+A」でページ全体を選択すると、メニューやサイドバー、フッターなど、不要な部分まで選択されてしまいます。これは非常に煩わしいものです。
記事本文だけを選択できるようにすると、次のような利点があります：
- 必要な情報だけを簡単にコピーできる
- 余計なヘッダーやフッターを手動で削除する手間が省ける
- 引用や参照が格段に楽になる
2. user-selectプロパティとは
CSSには「user-select」というプロパティがあります。これはユーザーがテキストを選択できるかどうかを制御するものです。
値には主に以下のようなものがあります：
none：選択できないtext：選択できる（デフォルト）all：要素全体が一度に選択される
このプロパティを使って、ページの各部分の選択可否を設定していきます。
3. 記事本文だけを選択できるようにするシンプルなCSS
WordPressサイト（特にGeneratePressテーマ）で記事本文だけを選択できるようにするには、次のようなCSSが最も効率的です：
/* 最初にページ全体を選択不可に設定 */
body,
body * {
user-select: none;
}
/* 記事本文コンテンツだけを選択可能に設定 */
.entry-content,
.entry-content * {
user-select: text;
}
Code language: CSS (css)このCSSコードはとてもシンプルです。まず、ページ全体（bodyとその中のすべての要素）を選択不可に設定します。次に、記事本文（.entry-contentとその中のすべての要素）だけを選択可能に設定しています。
言わば「全部をいったん選択不可にして、必要な部分だけ選択可能に戻す」という方法です。これは家の中の電気をすべて消してから、必要な部屋の電気だけをつけるようなものです。
4. CSS設定の追加方法
WordPressサイトでこのCSSを追加するには、管理画面から「外観」→「カスタマイズ」→「追加CSS」に上記のコードを貼り付けるだけです。保存すると、すぐに効果が表示されます。
GeneratePress以外のテーマでも同様の方法で設定できますが、記事本文を指定するクラス名（.entry-content）が異なる場合があります。その場合は、ブラウザの開発者ツールを使って適切なクラス名を確認してください。
5. 特定の要素を例外として設定する
記事本文内でも、特定の要素（例えばボタンやソーシャルシェアボタンなど）を選択不可にしたい場合は、次のようにCSSを追加できます：
/* 記事内の特定要素を選択不可に */
.entry-content .non-selectable,
.entry-content .wp-block-buttons {
user-select: none;
}
Code language: CSS (css)これで、クラス名が「non-selectable」の要素やボタンブロックが選択できなくなります。
6. まとめ
たった2行のCSSコードで、ウェブサイトの記事本文だけを選択できるようになります。この設定を行うと、記事の内容をコピーする際の手間が大幅に減ります。
WordPressサイトのユーザビリティを向上させるためのシンプルな改善策として、ぜひ試してみてください。