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でテキストを目立たせたい時にとても便利です!
ぜひご活用ください!

おすすめ記事はこちら!

0

関連記事

  • 2021.06.02

    【IEバグ】flex-direction: column;を指定した時に画像の下に余白ができるバグ解消【CSS1行……

    CSS

    HTML5

  • 2021.05.19

    【CSS】英単語の間隔を調整できるword-spacing

    CSS

  • 2021.05.14

    【CSS】backgroundで行う背景画像の複数指定

    CSS

おすすめ記事

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.06.08

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

    CSS

    WordPress

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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