CSS WordPress

2021.06.08

CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

主に記事やLPを作成する時に、borderで下線を引くだけでなくこのようにテキストにマーカーで線を引いたような見た目にしたくなることはありませんか?

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

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

基本の書き方

マーカーの線はCSSのbackgroundlinear-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.

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

WordPressを使用している場合はZEBLINE(ゼブライン)というプラグインを入れることで、CSSやjsを触らなくても簡単に動くマーカーを引くことができます!

マーカーのスピード、マーカーを点滅させる設定、マーカーの色などCSSではなく管理画面から設定することができるため、簡単かつ自由にカスタマイズすることができます!
詳しい使い方は公式サイトでしっかりと説明されており、カラーコードがわからない人向けにカラーピッカーも用意されているため、初心者の方でも簡単に使うことができます。

詳しくは下記公式サイトをご覧ください!

まとめ

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

おすすめ記事はこちら!

関連記事

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.08.17

    【WordPress】記事に紐付いたタクソノミータームを表示する方法

    WordPress

おすすめ記事

  • 2021.09.14

    【薄くて軽い!】超おすすめパソコンスタンド

    その他

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!