はてなブログで「蛍光ペン風アンダーライン」をほぼコピペで引く

　蛍光ペン風アンダーライン

　こんな感じにアンダーラインが引かれているのをよく見かけるので、今回は強調したい部分をより分かりやすくするために、蛍光ペンを引いているかのように見せるカスタマイズをしてみた。

 蛍光ペン風アンダーラインの設定

article strong {
　margin:0 0.1em;
　padding:0.1em 0.2em;
　background:#CEF0EC !important;
　background:linear-gradient(to bottom, transparent 60%, #F8FFCF 60%) !important;
}

　上記のコードをデザインのカスタマイズにある『デザインCSS』にコピペし、次に対応させたいタグのコードを同じ場所に追加する。

article b {
　font-weight:bold !important;
}

　今回の場合は、太字を蛍光ペン風アンダーラインで表現したかったからBタグをカスタマイズ。斜体、打消、下線の場合は、各自の対応するタグで追加する。

アンダーラインの色を変更する方法

　background:linear-gradient(to bottom, transparent 60%, #F8FFCF 60%) のカラーコード部分を好きな色に書き換える。