CSSで簡単！蛍光ペンっぽいアンダーラインを引く方法

2022.07.20

【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの？違...

制作

動画

簡単！蛍光ペンっぽいアンダーラインを引く方法

主に記事やLPを作成する時に、borderで下線を引くだけでなく、このようにテキストにマーカーで線を引いたようなデザインにしたくなることはありませんか？
一工夫があると大事なテキストや読んで欲しい内容を伝えやすくなります！

今回はCSSで作成する方法と、Wordpressのサイトでもっと簡単に作ることができるプラグインについてご紹介いたします！

CSSでマーカーを再現する方法

基本の書き方

マーカーの線はspanなどのインライン要素に対してCSSのbackground:linear-gradientで背景を指定し、再現します。

linear-gradientの使い方はこちら！

コーディング

2021.06.08

簡単！蛍光ペンっぽいアンダーラインを引く方法

主に記事やLPを作成する時に、borderで下線を引くだけでなく、このようにテキストにマーカーで線を引いたようなデザインにしたくなることはありませんか？一工夫が…

liner-gradientを使うことで、マーカーのような見た目かつ改行される場合にもしっかりと線が引かれる見た目を作ることができます。
下記の例ではtransparent 50%で上の透明部分を指定、#f2ae5a 50%で下の部分のオレンジ色を指定しています。

See the Pen PopapGW by spiqa design (@spiqa_design) on CodePen.

応用した書き方

linear-gradientの書き方を工夫することで、マーカーの太さを変えたり、グラデーションをかけることができます。

See the Pen LYWrWLE by spiqa design (@spiqa_design) on CodePen.

背景を透過させる方法

太さやグラデーションの指定だけでなく、色の指定をrgbaにすることで透過させることもできます。
指定方法の工夫次第で様々なパターンのマーカーを作ることが可能です！

See the Pen by spiqa design (@spiqa_design) on CodePen.

簡単に動くマーカーを引けるプラグインを使う方法

WordPressを使用している場合はZEBLINE（ゼブライン）というプラグインを入れることで、CSSやjsを触らなくても簡単に動くマーカーを引くことができます！
設定が簡単なだけでなく、CSSやjsの知識がない人でも簡単に設定することができる便利なプラグインです！

プラグインでできること

マーカーのスピード、マーカーを点滅させる設定、マーカーの色など管理画面から設定することができます。
管理画面上で設定ができるため、直感的に簡単かつ自由にカスタマイズすることができます！
また、カラーコードがわからない人向けにカラーピッカーも用意されているため、初心者の方でも簡単に使うことができます。

公式サイトにかなり詳しく説明が書かれているため、ぜひ公式サイトを見てみてください！