蛍光ペン・マーカー風の線を引くCSS

やっほー!パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

ブログの文章で強調して表現したい時ってありますよね。

例えばこうやって太字(ボールド)にしたり、大きさを変えてみたり色を変えてみたりするわけですが、こんな風に蛍光ペンを引いたように見せることもできます。

色も自由に変更することができ、見た目のインパクトも大きい蛍光ペン効果。

これをCSSで表現する方法をご紹介しますね。

蛍光ペンを表現するCSS、HTML

ネットで検索すると太字(ボールド)の機能に蛍光ペン効果を割り当てる人が多いのですが、僕は太字は太字で残しておきたいのであえてHTMLで指定する方法を選んでます。

それではさっそく見ていきましょう。

[aside type=”normal”]CSSをイジるその前に

これ以降はCSSに変更を加えます。下記を参考にして子テーマの導入とCSSを確実に反映させる方法を確認しておくことをおすすめします。

[kanren postid=”8147,7788″][/aside]

CSS

次のCSSをスタイルシートにコピペして保存しましょう。

[aside type=”boader”]

/* 蛍光ペン */
.keikou {
background: linear-gradient(transparent 60%, #ffff66 60%);
}[/aside]

画像で見るとこんな感じ。

Css

HTML

蛍光ペン効果を出したい場所で次のHTMLを使います。

[aside type=”boader”]<span class=”keikou”>xxx</span>[/aside]

このxxxのところに自分の好きな文章を書きましょう。

こんな風になります。

Ex

ほら、蛍光ペンが表現されました

[voice icon=”https://mukutto.com/wp-content/uploads/2017/03/e2482854f35fa76d8e3a1e868de0e73b.jpg” name=”” type=”l big”]うまく表現されない人はCSSやHTMLの記述間違いを疑ってみよう。CSSは古いキャッシュが残ってると反映されないことが多いよ。[/voice]

蛍光ペンをカスタマイズ

蛍光ペンは表示されるようになったけど色や太さを変えたい人もいるはず。

それでは次にカスタマイズ方法について紹介します。

蛍光ペンの色を変える

色を変更するにはCSSのこの部分を変更する必要があります。

Yellow

シャープ(#)から後ろのアルファベットと数字の部分ですね。

これは色をHTMLを使って表現した部分なので、こちらのページを参考にして自分の好きな色を設定しましょう。

赤色(#ff0000)の場合:

Red

Red2

青色(#0000ff)の場合:

Blue

Blue2

緑色(#00ff00)の場合:

Green

Green2

ね、簡単でしょ。

こうやって自分の好みの色を設定しましょう。

蛍光ペンの太さを変える

次は太さの変更です。

CSSを変更することで文字全体を色づけたり下半分だけにしたりと自由にカスタマイズできます。

太さを変更するにはCSSのこの2箇所を変更して下さい。

60

上の画像でいうと60%と書かれてある2箇所のことですね。

これを両方とも変更する必要があります。

0%の場合:

0

00

40%の場合:

40

400

60%の場合:

60

600

90%の場合:

90

900

どうでしょう、数字を変更すると蛍光ペンの太さがどんどん変わりますね。

僕の場合は好みで60%に設定しています。

まとめ

今回は簡単に見た目の印象を変える蛍光ペンCSSの紹介でした。

ココぞという時に使うとババーンと印象づけることができるのでポイントを押さえて使っていきたいですね。

あまり使いすぎると目がチカチカして読みづらくなってしまうので注意が必要です。

ゆーすけ(守屋祐輔)

ゆーすけ(守屋祐輔)

サラリーマン×ブログ×デザイン×講師×投資の5つの働き方・稼ぎ方を実践する複業2.0の体現者。▼経験から学んだノウハウや考え方、自分の人となりがわかる記事をお届けします。Apple好き。英語も好き。コーヒーも好き。

FOLLOW

カテゴリー:
関連記事