【WordPress】yStandardカスタマイズ、テキスト反転時の色を変える

2019年10月21日

今回は、テキスト選択時に反転した文字の色を変えるカスタマイズをしてみたいと思います。

使用テーマはyStandardです。

yStandard

変更は追加cssで

反転時テキストのカスタマイズは追加cssで行います。

テキスト反転時の色を変える

テキストを選択すると、このように選択した部分が反転します。

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

::-moz-selection {
  background: #add8e6;
  color: #fff;
}

反転時の変更は::selectionで指定します。
backgroundで背景の色を、colorで色を指定します。

このカスタマイズはfirefox用に::-moz-selectionも一緒に指定します。
お忘れなく。

::selection {
  background: none;
  color: #da4453;
}

::-moz-selection {
  background: none;
  color: #da4453;
}

backgroundをnoneにして消し、colorで文字の色を変えると、選択した部分だけ色を変えることもできます。

サイトのテーマカラーに合わせて、テキスト反転時の色も変えるとより整ったサイト作りができると思います。
是非試してみてください。

その他のyStandardカスタマイズ

スポンサーリンク