賢威7.0

賢威7:テキスト選択時の文字・背景色を変更する方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回は、WordPressテーマ:賢威7のテキスト選択時の色を変更する方法を紹介したいと思います。

カスタマイズ前

↓ カスタマイズ前は、テキストを選択すると薄い青でハイライト

select-text-before

カスタマイズ後

カスタマイズ 1

↓ テキストを選択時の背景をベージュに変更

select-text-after-2
カスタマイズ 2

↓ テキストを選択時の背景を黒、文字を白に変更

select-text-after-1
カスタマイズ 3

↓ テキスト選択時の色を蛍光ペン風にカスタマイズ

select-text-after-3

[ad]

1. カスタマイズ 1:選択時の背景をベージュに変更

まずはテキスト選択時の背景をベージュに変更してみます。

今回は見た目のカスタマイズなので、親テーマ(賢威7本体)の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加します。

::selection {
    background: #E4DAC5;
}

これでテキスト選択時の背景色が、デフォルトの薄い青からベージュに変わりました。

select-text-after-2

2. カスタマイズ 2:選択時の背景を黒、文字を白に変更

次はテキスト選択時の背景を黒、文字の色を白にしてみたいと思います。
先ほどと同じように以下のCSSコードを追加すると、、、

::selection {
    background: #333;
    color: #fff;
}

背景色が黒、文字が白になりました。

select-text-after-1

3. カスタマイズ 3:蛍光ペン風に選択色をカスタマイズ

最後にもう一つ、テキストの選択色を蛍光ペン風にする方法をご紹介します。

これも先ほどと同じように、お使いのCSSファイルに以下のコードを追加すると、、、

::selection {
    background: #FFFB90;
}

薄い黄色で文字がハイライトされるようになりました。

select-text-after-3

ここでは3パターンの紹介でしたが、紹介したCSSコードのカラーコードを変更すれば、別の色も同じように変更することができます。
ぜひお試し下さい!

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。