CSSで文字選択の背景色を変える

文字を選択(ドラック)すると文字と背景の色が変わります。

Windowsであれば文字は白、背景は青です。

 

しかし、この色を変えてあるWebページもあります。

なんかカッコイイので試してみました。

 

やり方

はてなブログではCSSの編集は

ダッシュボード>デザイン>カスタマイズ(レンチ)>デザインCSS

から行えます。

 

そこに↓をコピペします。

::selection {
background:#111111;
color:#111111;
}
::-moz-selection {
background:#111111;
color:#111111;
}

 

 

#のところで色を指定しているので、

好きな色のものに置き換えます。

backgroundが背景。

colorが文字の色です。

(2つあるのはSafariChrome用、Firefox用と必要なため)

 

こういうサイトに色の見本があります。参考に。

WEB色見本 原色大辞典 - HTML Color Names

CSS/HTML色見本

Adobe Color CC

 

ちなみに前にもやろうとしたのですがうまくできなかったのです。

その理由が今回やっと分かりました。

前にやったときは「::」を使うべきところを「.」にしていたんです。

CSSとかHTMLとか良く分からずにやっているせいです。

この「.」って特に意味のないものだと思っていました。

「.」はclassを指定するときに使い、

「::」は疑似要素を指定するときに使うようです。

さらに「:」は疑似クラス、「#」はidを指定するときに・・・。

なるほど。調べてみると色々出てきて訳が分かりません。

ちゃんと勉強するべきですかね?

関連記事もどうぞ

はてなブログにナビゲーションメニューをつけよう - CarbonCopy’s diary

Go Top