【CSS】たった3行！テキストを選択した時の色（ハイライト）をおしゃれに変える方法

パソコンやスマホでブログの文章をコピーしようと選択した時、テキストの背景が「標準の青色」になるのを見たことがあると思います。

もちろんそのままでも機能上は全く問題ありませんが、サイトのイメージカラーが「緑」や「オレンジ」なのに、選択した時だけ「青」になると、少しだけデザインの統一感が崩れてしまいますよね。

今回は、CSSをたった3行コピペするだけで、テキストを選択した時のハイライト色を自分好みにカスタマイズする方法を解説します。脱初心者を目指すなら、ぜひ押さえておきたい小技です！

コピペで完了！::selection を使おう

お使いのWordPressテーマの「追加CSS（またはstyle.css）」に、以下のコードをコピペしてください。

/* テキストを選択した時の色を変更する */
::selection {
    background-color: #7C974C; /* 背景色（好きな色に変更） */
    color: #ffffff; /* 文字色（白がおすすめ） */
}

たったこれだけです！
::selection というのは「ユーザーが選択した部分」を指定する特別なCSS（疑似要素）です。

色選びのちょっとしたコツ

ハイライトの色を決める時は、「サイトのメインカラー」または「アクセントカラー」に合わせるのがWebデザインの基本です。

ただし、あまりにもチカチカする蛍光色や、文字が読めなくなるような薄い色を指定するのはNGです。
基本的には「少し濃いめの背景色 ＋ 白文字（#ffffff）」、あるいは「淡いパステルカラーの背景色 ＋ 黒文字（#333333）」の組み合わせにすると、読者にストレスを与えず綺麗にまとまります。

特定の場所だけ色を変えることも可能

基本的にはサイト全体を統一すればOKですが、「この記事のこのボックスの中だけは別の色にしたい！」という場合は、以下のようにクラス名を指定して適用することも可能です。

/* .special-box の中だけ選択色をオレンジにする */
.special-box ::selection {
    background-color: #ff9900;
    color: #ffffff;
}

まとめ：細部のこだわりがサイトの信頼感を生む

「テキストの選択色なんて、誰も気にしていないのでは？」と思うかもしれません。しかし、こうした1つ1つの細部のデザインの積み重ねが、読者に「このブログは丁寧に作られているな」という無意識の安心感（信頼感）を与えます。

プラグインも不要で、サイトの表示速度にも全く影響しないカスタマイズですので、ぜひ今すぐサクッと設定してみてくださいね！