【CSS】テキスト選択したときの背景と文字の色を変更する方法

ブログをある程度カスタマイズしていたら、細かいところまでカスタマイズしたくなります。なので、その細かいとこをメモ的な形で残したいと思います。今回はテキスト選択時の色を変える方法です。CSSのみで可能なので楽チンです！

あまり大きな変化は見られないですがカスタマイズが更に楽しくなります。細かいとこまでしたい、自己満足といったところでしょうね～。

文章を選択時の色を変更する

↓※サンプルとしてヤフーニュースさんのキャプチャです。

文字のハイライトなどと呼ばれています。ブラウザにより多少異なりますが、デフォルトでは青い背景に白い文字になっています。多分みなさん見たことがありますよね。でもこれじゃ面白くないですし、個性も出したいです。

なので、CSSをいじり、こうします。

::selection {
	background: #EDA184;
	color: #ffffff;
}
::-moz-selection {
	background: #EDA184;
	color: #fff;
}

この背景と文字の色はCSSで変更可能です。たったのこれだけです。これでサイト全てに反映されます。また、指定次第では「記事本文だけ～」や「リンクのとこだけ～」なんてこともできます。::selectionの前に変更したい箇所を指定するだけです。

例えば、記事本文だけハイライトを変更したい場合。

.entry-content::selection {
	background: #EDA184;
}
.entry-content::-moz-selection {
	background: #EDA184;
}

カスタマイズ次第では色々役に立ちそうな小技ですね。

色選びはこことか役立ちます。

www.colordic.org

はてなブログでのCSS設定方法

カスタマイズをしたことがある方はご存知かと思います。

管理画面から左メニューの「デザイン」→スパナアイコンの「カスタマイズ」→「デザインCSS」に貼り付けます。

これでテキスト選択時の色変更、完了です！

うまく反映されない場合の対処法

今回のカスタマイズに限らず、正しく設定してもうまく反映されなくて思わず「なんでや！」と言ってしまう場合もあるかと思います。

ひとつの要因として、テーマ自体に設定がしてあり、こちら側で設定したことが反映されないこともあるようです。その場合は･･･

::selection {
	background: #EDA184 !important;
	color: #ffffff !important;
}
::-moz-selection {
	background: #EDA184 !important;
	color: #fff !important;
}

のように、後ろに!importantと追加してあげます。これがあると優先的にこのCSSが読み込まれるのです。

たかな的まとめ

カスタマイズは楽しい！良きブログライフを！