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

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

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

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

基本の書き方

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

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

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の知識がない人でも簡単に設定することができる便利なプラグインです!

プラグインでできること

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

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

まとめ

CSSだけで簡単に引くこともできますが、プラグインを使うことでより簡単かつ動かすこともできるため、記事やLPでテキストを目立たせたい時にとても便利です!
ぜひご活用ください!

おすすめ記事はこちら!

この記事をシェアする

関連記事

  • 2022.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    CSS

    HTML5

    コーディング

    制作

  • 2022.11.15

    Wordpressで多言語対応をする方法

    コーディング

    制作

  • 2022.10.24

    超簡単!?たった15分でカウントダウンを作成する方法

    コーディング

    制作

おすすめ記事

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

×