読者です 読者をやめる 読者になる 読者になる

にちじょうみだれがき

役立ち情報から雑記まで幅広いジャンルを展開するブログ。

【はてなブログ】蛍光ペンでチェックしたような下線をCSSで表現する

f:id:ChihaYuu:20170406184257j:plain

蛍光ペンでチェックしたような下線

標準のアンダーライン「u」要素を弄ろうとしたけど上手くいかなかった。
視点を変えて「strong」要素をCSSで弄ったら表現できました。

設定→詳細設定→headに要素を追加に以下のコードをコピペで蛍光ペンでチェックしたような下線を実装できますよ。

<style type="text/css">
/* 蛍光ペン風に */
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:linear-gradient(to bottom, transparent 70%, rgba(252,252,50,0.8) 70%);
}
</style>

background~の所で下線の幅やら色やらを指定しているのですが、好みの色に調整するまで時間がかかりました。簡潔に色を変更する方法があると思いますが、勉強不足で実装できませんでした。

実装してみると、強調したい文を簡単に目立たせられるので便利、便利。

参考サイト

www.htmq.com

www.webcreatorbox.com

上記サイトに画像にグラデーションを重ねる応用が載っているので、勉強して使いこなせるようになりたい。おしゃれなブログ作れそうだし。