はてなブログ

【はてなブログ】文字を選択(ドラッグ)した時の背景色と文字色が変わるようにカスタマイズ

f:id:langnerdmom:20210314004322j:plain:w250

おはようございます。

本来、このブログは「英検1級」と「日本語教育能力検定試験」の勉強を記録するためのブログなのですが

はてなブログのカスタマイズにハマってしまい、色んなサイトを参考にして変更した記録になっています。

忘れる前に書いちゃいたい

参考記事だけを載せた方が早いのですが、はてなブログからWordPressに移る方も多く

参考元の記事が消えていることも多々…

使ったソースコードなどをブログにメモ書きとして残すことにしています。

ということで、今日の記事もカスタマイズ関連です。

勉強の記録を見に来てくださった方、本当にごめんなさい

ブログ/Webサイトで文字選択(ドラッグ)した時の色は変更ができる

ブログやニュースなどを読んだりする時、読んでる部分を選択(ドラッグ)しながら読む癖がある私

文字選択(ドラッグ)した場合、デフォルトではだいたい

  • 背景=青色
  • 文字色=黒

になっています。

色を変えられること自体知りませんでした。

\標準なお色/
デフォルトの青
こんな感じなんですが

\色をカスタマイズした版/
淡い紫の背景色

こんな風にしたい!

思っていたより簡単にできそうなので、さっそく試してみました♥

::selectionのお色を変えるだけ

調べてみると、デザインCSSに色のコードを追加するだけみたい。

参考記事【CSS】文字選択(ドラッグ)時に”文字色”や”背景色”をつける方法 | nuconeco

::selection
{
background: #000000;
color: #ffffff;
}
/* for Firefox */
::-moz-selection
{
background: #000000;
color: #ffffff;
}
  • 背景の色→background: #好きなカラーコード
  • 文字の色→color: #好きなカラーコード

で、変えられるそう。



このブログで使用しているコード

私は「UnderShirt」を「Milky Diary」に寄せてカスタマイズをしているので、「Milky Diaryのデモサイト」を参考にしました。

このブログで使ったコードがこちら↓

::selection {
background: #8EA1EDaa;
color: #fff
}
/* for Firefox */
::-moz-selection
{
background: #8EA1EDaa;
color: #ffffff;
}

  • 背景の色
  • 文字の色

2ヶ所ずつ変更してデザインCSSに貼り付けるだけ。

この記事で文字を選択(ドラッグ)したら、背景の色が淡い紫色に変わっていますよね?

※現在は違うブログテーマをを使用しているので、違うカラーが設定してあります。

とっても簡単なので、気になった方はぜひ試してくださいね♥