以前の設定
一番初めにマーカー風アンダーラインを使えるようにした時は、はてなブログの「headに要素を追加」という箇所にコードを記述する方法でした。（マーカー風のアンダーラインをつける - Someday Somewhere）
この時は、ツールバーの「B」である太字（<b>〇〇</b>）でテキストを挟むとマーカー風アンダーラインが現れるように設定したので、太字にしたテキスト全てに「もれなくマーカー風アンダーラインも付いてきます」といった状態でした。
ただね、やっぱり、太字だけで表示したい場合もある。 マーカー風アンダーラインまでは要らないなという時も。
そして、最近、Markdown編集画面で記事を書くことが多くなり、太字にだけする場合は〇〇で、マーカー風アンダーラインを引く場合は△△で、だけどマーカー風アンダーラインのみにはできなくて･･･、となんだかこんがらがってきてしまったので、headに追加したコードを削除してしまいました。
次にとった方法
記事編集時にHTMLを直接書き込む
たま～にマーカー風アンダーラインを引くだけなら記事内に直接書き込んでしまおうかと思い、記事を書いている途中に以下のようなコードをHTML編集画面の方に書き込んでみたこともあります（CSS内には何も記述せず）。
<span style="border-bottom: solid 5px #ffa6d1;">アンダーライン</span>アンダーライン
ちなみに、上記コードの簡単な説明をすると、
solid：実線
5px：線の太さ
#ffa6d1：線の色
例えば、線をもっと細くしたければ5pxを3pxに変えるとか、実線を点線にしたい場合はsolidをdottedにするなど、デザインを変えることができます。
<span style="border-bottom: dotted 5px #ffa6d1;">アンダーライン</span>アンダーライン
CSSに記述するシンプルなコード
上記のように記事にHTMLを直接書き込んでもいいのですが、たまにとはいえ面倒だったり。
そこで、もっとシンプルなコードをCSSに書き加えました。
/*マーカー風アンダーライン*/article u{
text-decoration: none;
background: linear-gradient(transparent 70%, #ffff99 50%);
}
70%：ラインの太さ（数値が大きいほど細くなる）
#ffff99：ラインの色
50%：ラインの濃さ（数値が大きいほど薄くなる）
ここで、一つ気になることが。
それは、上記コード先頭に「article u」とあるように、ここで設定したものは通常の下線（<u>〇〇</u>）をマーカー風アンダーライン用として使用しているということ。
ということは、テキストを<u>〇〇</u>で挟むと、ただの細い実線ではなくマーカー風になるということで、細い実線のアンダーラインは表示できないことになります。
そこで、細い実線のアンダーラインを使う時があるかどうかはおいといて、「article u」を「article z」に書き換えてしまいました。
マーカー風
<z>アンダーライン</z>細い実線
<u>アンダーライン</u>アンダーライン
こうすれば、ツールバーにある普段使う装飾とかぶることなくマーカー風アンダーラインが引けることになります。
今回参考にさせて頂いたサイトさんはこちら（↓）
saruwakakun.com
