文章中や見出しなどにつかう下線の装飾には色々あります。
代表的なのが蛍光ペンCSSでしょう。
しかし私の本サイトは手書き風の見出しを使っているのですが、蛍光ペン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個の値を指定しています。
b：縦方向の影。プラス指定で下、マイナス指定で上。
c：影のぼかし距離
d：影の広がり距離
inset：影を外側ではなく内側につける。
これらを組み合わせて色鉛筆（？）ぽくしたわけです。
値を変えれば何となくクレヨンというか水彩ペンっぽくなります。
ただ影の広がりを抑え込むためにdをマイナス指定しないといけないので、線の端に段差ができてしまいます。
もう少しうまくやる方法はあるのでしょうが、そこまでCSSに詳しくないですし妥協しました。
色変更
<span style="box-shadow: 0px -6px 5px -5px #92FCFC inset,0px 8px 4px -8px #92FCFC;">色鉛筆です。</span>
色コードを変えれば好きな色にできます。
ただし上に挙げた通り淡い色系のみ。
原色系や濃い色は基本的にアウト、表示がおかしくなります。
（調整できるならいいのですが）
青色を例にとると、こんな感じになってしまいます。
色鉛筆です。
まとめ
よかったら使ってみてください！
「こんな風に使ってみました」とか「改良しました」とかありましたらSNSで教えてください！
私はConoHa以外を勧めない。
2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。
レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。
※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。