CSSだけでぼかした色鉛筆?っぽいアンダーライン(下線)を引いてみる 蛍光ペンよりも優しく柔らかく軽い!

この記事は約3分で読めます。

2017-03-14WordPressカスタマイズ

karigamb08 / Pixabay

文章中や見出しなどにつかう下線の装飾には色々あります。
代表的なのが蛍光ペンCSSでしょう。

しかし私の本サイトは手書き風の見出しを使っているのですが、残念ながらきつすぎて合わない。
もっと優しくて柔らかくて軽いタッチの下線が引きたい!

そこで色鉛筆やクレヨン風味のアンダーラインCSSを探してみました。
しかし、ない……いえ、クレヨンはありました。

画像使いたくありません(´・ω・`)

仕方ないので、それっぽく見せるCSSを作ってみました。
一行なので作ったというほどでもありませんが使い途はあると思います。

使用見本

コード

文章内で使う場合

プラグインAddQuicktag に登録しておくと便利に使えます。

上記画像の色(水色?)

See the Pen 色鉛筆(ぼかし)下線 水色? by 天満川鈴 (@kimoota) on CodePen.

黄色

See the Pen 色鉛筆(ぼかし)黄色下線 by 天満川鈴 (@kimoota) on CodePen.

ピンク

See the Pen 色鉛筆(ぼかし)下線 ピンク by 天満川鈴 (@kimoota) on CodePen.

見出しなどに使う場合

次のコードをstyle.cssに記述します。

See the Pen 色鉛筆見出し by 天満川鈴 (@kimoota) on CodePen.

蛍光ペンCSSとの比較

色鉛筆: 色鉛筆です。

蛍光ペン: 蛍光ペンです。

同じ色でも全く印象違うのがおわかりになるかと。
蛍光ペンのCSSはこちら。

See the Pen 蛍光ペン(比較用) by 天満川鈴 (@kimoota) on CodePen.

色鉛筆?風味なアンダーラインCSSの説明

box-shadowは複数の影を組み合わせることができる

これはbox-shadowで二つの影を作って組み合わせたもの。
カンマ区切りで組み合わせることができます。

box-shadow{【一つ目の影】,【二つ目の影】;}

box-shadowの値指定

今回のCSSではbox-shadow{a b c d 色コード inset;}においては5or6個の値を指定しています。

a:横方向の影。プラス指定で右、マイナス指定で左。
b:縦方向の影。プラス指定で下、マイナス指定で上。
c:影のぼかし距離
d:影の広がり距離
inset:影を外側ではなく内側につける。

これらを組み合わせて色鉛筆(?)ぽくしたわけです。
値を変えれば何となくクレヨンというか水彩ペンっぽくなります。
ただ影の広がりを抑え込むためにdをマイナス指定しないといけないので、線の端に段差ができてしまいます。
もう少しうまくやる方法はあるのでしょうが、そこまでCSSに詳しくないですし妥協しました。

色変更

<span style="box-shadow: 0px -6px 5px -5px #92FCFC inset,0px 8px 4px -8px #92FCFC;">色鉛筆です。</span>

色コードを変えれば好きな色にできます。
ただし上に挙げた通り淡い色系のみ。
原色系や濃い色は基本的にアウト、表示がおかしくなります。
(調整できるならいいのですが)

青色:

色鉛筆です。

赤色:

色鉛筆です。

まとめ

解答者の写真
よかったら使ってみて
あと、もっといい方法あれば知恵を貸していただけると嬉しいです