OTAPURE-日常彩り系ブログスマートフォン用の表示で見るOTAPURE-日常彩り系ブログアニメとかWebデザインとか好きなこと色々書きます。【CSS】テキスト選択したときの背景と文字の色を変更する方法2017-02-17【CSS】テキスト選択したときの背景と文字の色を変更する方法webTweetブログをある程度カスタマイズしていたら、細かいところまでカスタマイズしたくなります。その細かいとこをメモ的な形で残したいと思います。今回はテキスト選択時の色を変える方法です。CSSのみで可能なので楽チンです!あまり大きな変化は見られないですがカスタマイズが更に楽しくなります。細かいとこまでしたい、自己満足といったところでしょうね~。文章を選択時の色を変更する↓※サンプルとしてヤフーニュースさんのキャプチャです。文字のハイライトなどと呼ばれています。ブラウザにより多少異なりますが、デフォルトでは青い背景に白い文字になっています。みなさん見たことがありますよね。これじゃ面白くないですし、個性も出したいです。CSSをいじり、こうします。#fff;}この背景と文字の色はCSSで変更可能です。これでサイト全てに反映されます。指定次第では「記事本文だけ~」や「リンクのとこだけ~」なんてこともできます。::selectionの前に変更したい箇所を指定するだけです。記事本文だけハイライトを変更したい場合。#EDA184;}カスタマイズ次第では色々役に立ちそうな小技ですね。色選びはこことか役立ちます。www.colordic.orgはてなブログでのCSS設定方法カスタマイズをしたことがある方はご存知かと思います。管理画面から左メニューの「デザイン」→スパナアイコンの「カスタマイズ」→「デザインCSS」に貼り付けます。今回のカスタマイズに限らず、正しく設定してもうまく反映されなくて思わず「なんでや!」と言ってしまう場合もあるかと思います。ひとつの要因として、テーマ自体に設定がしてあり、こちら側で設定したことが反映されないこともあるようです。!important;}のように、後ろに!importantと追加してあげます。これがあると優先的にこのCSSが読み込まれるのです。はてなブログProごく普通のオタク。深夜枠のアニメが主食。