【ワードプレス】カーソルで文字をなぞったときにでる背景色(ハイライト)の変更方法

wp-blue-150sam

もうすぐ旧ブログで使っているサーバーの使用期限がくるので
今更ならがら移行作業をしています。
「あの記事もう1回あげろ」という記事があったらご連絡ください。

文字選択時の色を変更-ワードプレス

おらもオサレ系になりたいっぺ。リアルではともかく、ネット上だけでも
イケイケになりたいっぺ。そーすればモテモテだぁ。
と、いうことでいろいろカスタマイズ。
今回は文字ハイライト部分を変更。

ハイライトと呼ぶらしいよ

はてなを見てもらえれば分かるとおもうけど、文字をカーソルでなぞった
ときに文字の背景が青になり、文字色が白くなってるんだ。
なかなかにオサレ。ウェブデザイナーやプログラマーや意識高い系な方の
ブログによく見かけるやつね。
僕はコンテンツ重視のお堅いアフィリばかりやってたので、オサレは
邪道だとおもっていたけどブログ形式だと見た目がとても重要らしい。
アダルトアフィリなんかも一昔前は画像連張りでなんとかなってたのに、
最近ではオサレ系が多くなってきた。ここでリアルでもネットでも田舎者の
僕はおもいたつ。オサレになりたいっぺよ~。

んで、参考にしたサイトさまはこちら。

[CSS]テキスト選択時のハイライトのカラーを変更するスタイルシート
ttp://coliss.com/articles/build-websites/operation/css/css3-text-selection-trick-by-egotaco.html-コリス

テキストハイライト(選択)時の背景色を変える
ttp://otani-webs.com/lab/css/100715.html
LabPad (ラボパッド)

さっそくテーマ編集からcssを変更。
こんな結果になりました。最初は。

hairait_0

コリスさんのcss記述をそのままコピペ→色変更をした結果。
青いハイライトは表示できたけど、なんかおかしい。
どうやら違和感を生じたのは文字色が変更されず黒色のままだったから。

LabPadさんのほうの記述をコピペして背景色(background)と
文字色にあたるcolor部分を変更した結果。

hairait_1

おお、「はてな」と似たような感じになった。
色が判明してないけどこれで満足。
同じようにしたいのなら次のコードをコピペすればいいわけです。

p::selection {
background: #69d2e7;
color:#fff;
}
p::-moz-selection {
background: #69d2e7;
color:#fff;
}

背景色を変えるのはbackgroundの:(コロン)と;(セミコロン)の
あいだに好きなカラーコードを挿入するだけです。
文字色の場合はcolorに挿入です。

一応画像で説明。

hairait_2

Firefoxユーザー向けの記述も忘れないように変更してください。

上記、設定をしてもリンク(link)・タイトル(hタグ)部分を
なぞるとまだデフォルトのままです。
全要素に反映させたいのならばpの部分を削ってください。

全要素適応

::selection {
background: #69d2e7;
color:#fff;
}
::-moz-selection {
background: #69d2e7;
color:#fff;
}

以上です。

コメントを残す

メールアドレスが公開されることはありません。