Someday Somewhere

A little something to say in my everyday life

マーカー風アンダーラインの設定で悩んだ末にとった方法

f:id:tsukisai:20190316143021j:plain

以前の設定

一番初めにマーカー風アンダーラインを使えるようにした時は、はてなブログの「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