公開：2012.07.08 / 最終更新：2015.05.15

[Å] ドラッグして選択中のテキストの背景カラーを変更するスタイルシート

Color Pencils / scui3asteveo

こんにちは、たくさんのご意見によりあかめ（@mk_mizuho）に決定！よろしくお願いします。それにともないブログ内にあったアカメをあかめに変更。久々にスタイルシートを開いたので「選択中のテキストの背景カラーの変更」をやってみました！軽いお遊びです。

テキストの背景カラーの変更

通常のテキストの背景カラーはこんな感じ▼

よく見るちょい濃いめのブルーです。

それをこう変えた▼

白地の場面でテキストを選択することはないかなと思ってこのカラーを選択。

おそらく使われる場面はこういう時▼

なのでこういう時に見えるカラーでいいかなと。夏に向けて涼しげでいいし。

::selection{
	background:#D9F3FD;
}

::-moz-selection{
	background:#D9F3FD;
}

「-moz」はFirefox用です。残念ながらIEは対応していないです。IEの方には通常のが反映されます。

どうでもいいことかもしれませんが、せっかくの自分のブログなので色々とお遊びもして良くしていければいいなと思ってます。

WPを使用しているけど、スタイルシートって何？って方はstyle.cssの中に今のソースをそのまま貼り付けていただければ大丈夫です。カラーを変更したい方は「D9F3FD」を変更してくださいね。

カラーの指定は様々ですが、どうしたらいいかわからない方はこちらのカラーを参考にどうぞ▼

カラーコード変換 1.0（￥170）
カテゴリ: 仕事効率化, ユーティリティ
販売元: MIYAMOTO HIROTAKA – HIROTAKA MIYAMOTO（サイズ: 0.1 MB）
全てのバージョンの評価: （2件の評価）

▲これは色を選ぶというよりかは自分で好みのを作ってそれをコードにしてくれるアプリです。

またRGBで指定した場合にはこういうアプリも使えます▼

Color Chart Free 1.6（無料）
カテゴリ: 辞書／辞典／その他, ユーティリティ
販売元: NinjaQ – xiaohui qi（サイズ: 0.8 MB）
全てのバージョンの評価: （3件の評価）

Color Chart (カラーチャート) 1.2（￥85）
カテゴリ: 辞書／辞典／その他, 仕事効率化
販売元: NinjaQ – xiaohui qi（サイズ: 0.2 MB）
全てのバージョンの評価: （1件の評価）

RGB指定をした場合はスタイルシートが変わるので注意してくださいね。

::selection{
	background:rgb(217, 243, 253);
}

::-moz-selection{
	background:rgb(217, 243, 253);
}

ちょっとしたお遊びのご紹介でした。そこまで難しくないと思うので興味のある方はお試しください。自分のブログは楽しみながら続けたいですからね。どんどんオリジナル要素をこれからも出していきたいと思います。ではではー@mk_mizuhoをよろしくお願いします。

※ 環境の違いがあるため、今のスタイルシートが絶対有効というわけではありません。あくまでも参考程度でお願いします。

ブログ運営者をフォローする！

＼この情報を周りの人にも教える／

[Å] ドラッグして選択中のテキストの背景カラーを変更するスタイルシート

この記事が気に入った方はいいね！で
更新情報を受け取る！