CSS WordPress

2021.06.08

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

主に記事や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.06.09

    この世界はコードでできている#1

    CSS

    HTML5

    その他

    制作

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    CSS

    コーディング

    制作

  • 2022.03.07

    【抜粋文字数が思い通りにならない問題を解消!】投稿本文の抜粋方法(WordPress)

    WordPress

おすすめ記事

  • 2022.04.11

    Photoshopの「ワークスペース」とは?【Webデザイナーおすすめの設定をご紹介します!】

    Photoshop

    デザイン

    制作

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    CSS

    コーディング

    制作

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    その他

×