小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

カスタマイズ&プラグイン
この記事は約3分で読めます。

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

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

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

いえ、クレヨンはあったのですが、

http://k-1production.com/design/crayon/ (リンク切れ)

質問者の写真

画像ファイルは使いたくないよ……

仕方ないので、それっぽく見せる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>

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

青色を例にとると、こんな感じになってしまいます。

色鉛筆です。

スポンサーリンク

まとめ

解答者の写真
よかったら使ってみて
もっといい方法あれば教えていただけると嬉しいです
ブログやサイトを始めたい・引っ越したい方へ

レンタルサーバーWING。
KUSANAGI&WEXALが使えるVPS。
どちらでも高速でコスパに優れたConoHaで始めるのがおすすめです。
もっと知りたい方はボタンをクリックしてください。
(ボタン経由で入会した場合、1000円分のクーポンがもらえます)

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
カスタマイズ&プラグイン
スポンサーリンク
きもおたねっと。

コメント

タイトルとURLをコピーしました