今回はWordPressの人気無料テーマのLuxeritas（ルクセリタス）の蛍光ペンのアンダーラインの色や透明度、太さなどをカスタマイズする方法を紹介します。
蛍光ペンのアンダーラインは下記の表現です。ルクセリタスだとこれらの蛍光ペンがエディタ上で簡単に付けることが出来ます。しかしこの蛍光ペンの色や太さなどの調整はある程度知識のある人でないと出来ない様になってる様です。
| 蛍光ペン（黄色） | 蛍光ペン（赤） |
| 蛍光ペン（青） | 蛍光ペン（緑） |
| 蛍光ペン（オレンジ） | 蛍光ペン（ピンク） |
そこで今回は、なるべく簡単にコピペとちょっとした編集で可能な様にします。
蛍光ペンのCSS
蛍光ペンのCSSは、外観→テーマエディタから「編集するテーマを選択」でLuxeritasを選択します。そこのStyle→luxe-blocks-style.min.css (styles/luxe-blocks-style.min.css)に記述があります。
そのCSSはminify（ミニファイ）化されているので一度整形しましょう。整形して蛍光ペン部分だけを取り出したCSSが下記です。
.luxe-hilight-yellow {
background: linear-gradient(transparent 60%, #fff352 60%)
}
.luxe-hilight-red {
background: linear-gradient(transparent 60%, #ea618e 60%)
}
.luxe-hilight-blue {
background: linear-gradient(transparent 60%, #b2cbe4 60%)
}
.luxe-hilight-green {
background: linear-gradient(transparent 60%, #a7d28d 60%)
}
.luxe-hilight-orange {
background: linear-gradient(transparent 60%, #fad09e 60%)
}
.luxe-hilight-pink {
background: linear-gradient(transparent 60%, #f5b2b2 60%)
}蛍光ペンの調整
上記で紹介したCSSを子テーマのスタイルシートにコピペして編集していきます。
background: linear-gradient(transparent 60%, #f5b2b2 60%)のプロパティと値について以下の表で説明いたします。
| background: | linear-gradient | (transparent 60%, | #f5b2b2 | 60%) |
| 背景を | グラデーションに | 60%を透明に | ピンク色を | 60% |
太くしたい場合は「transparent」の数値を低くすればOKです。同時に最後の数値も同じ値だけ低くします。
逆に細くしたい場合は、それらの数値を高くすればOKです。
また色を変えたい場合は「#f5b2b2」の部分のカラーコードを変更すれば可能です。
実際に下記の様に数値を90%/90%にするとこの様になります。
<p><span class="luxe-hilight-pink">テストテストテストテスト</span></p>
<style>
.luxe-hilight-pink {
background: linear-gradient(transparent 90%, #f5b2b2 90%)
}
</style>テストテストテストテスト
以上が「ルクセリタスの蛍光ペンの色と太さと透明度を変更する方法」でした。
自身のサイトの雰囲気に合わせて蛍光ペンも編集すると良いでしょう。
また、このCSSクラスを利用してホバーアニメーションやJSによるビューアクションなどが可能です。上級者の方は挑戦してみて下さい。
