CSSで見出しに手書き風の二重下線を引く

こちらの記事でボーダーを歪ませる、といった手法を探している時に、こんな記事を見つけました。

まめわざでは、ブログの編集機能などと同じように、文字の一部のリンク化や強調ができます。この強調表現で、圏点(傍点・脇点)・蛍光マーカー・手書き風下線が使えるようになりました。 それぞれの強調表現は縦書きに対応しています。また、文字の大きさに応じて強調表...

これはぜひ当サイトに取り入れたい!と思い、見出しに蛍光ペンで引いたようなデザインを入れようかとトライしましたが、なんだかしっくり来なかったので手書き風の下線を表示することにしました。

ただ、1本線だとリンクと紛らわしいので、二重線にすることにしました。

投稿記事を書く時はSimplicityで準備されている「見出し2(<h2>になる)」を使います。

見出しです

こんな感じになります。

CSSはこちら。(Scssからコンパイルしてます)

Simplicityのスタイルを除去したりもしているので、場合によってはh2あたりの表記は不要かと思います。

二重線を表現するのに疑似要素(before・after)を使いました。

それぞれの線で雰囲気を少しだけ変更したかったので background-position を変えることで微妙な違いが表現できています。(たぶん)

色の指定なんかはもっと変数とかを駆使して簡単にできそうですが、とりあえずはこれで良いかな。

どこか他のところでマーカーに再トライしたいです!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク