Advanced Editor Tools アンダーラインマーカーの色の変更方法

Advanced Editor Tools アンダーラインマーカーの色の変更方法をご紹介いたします。

※参考サイトは最下部にまとめております。

設定画面からは色の変更はできない？！

WordPress（ワードプレス）プラグイン “Advanced Editor Tools”（旧名 : TinyMCE Advanced）のアンダーラインマーカー（蛍光ペン）は、調べた限りでは 設定画面から色の変更はできないようです、、

であれば、アンダーラインマーカーのクラス名を調べて [外観] – [カスタマイズ] – [追加 CSS] 等に書き込んで変更するしかありません…

Google Developper Tool でクラス名を調べる

Google Developper Tool で調べると、マーカーの定義は以下の通りでした。

/* マーカー1 の定義 */
.marker {
    background: linear-gradient( transparent 60%, #ffcedb 0% ) !important;
}
/* マーカー2 の定義 */
.marker2 {
    background: linear-gradient( transparent 60%, #a9eaf2 0% ) !important;
}

「マーカー1」の色の変更は３行目の “#ffcedb” を、「マーカー2」の色の変更は７行目の “#a9eaf2” を、それぞれお好みの色に変更して [外観] – [カスタマイズ] – [追加 CSS] 等に貼り付ければ変更完了です。

エラーが発生する場合

WordPress JIN で「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」エラーが発生する場合には、CSS 内のコメントアウト「/*」～「*/」をすべて削除すると、エラーが表示されなくなる場合があります。

参考サイト

Advanced Editor Tools (previously TinyMCE Advanced)
https://ja.wordpress.org/plugins/tinymce-advanced/