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

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

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

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

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

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

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

スポンサーリンク

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

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

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

CSSをイジるその前に

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

子テーマを使おう!STORK(ストーク)に子テーマをインストールする方法

2017.03.07

CSSの変更が反映されない時の6つの対処法、教えます!

2017.03.02

CSS

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

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

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

Css

HTML

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

<span class=”keikou”>xxx</span>

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

こんな風になります。

Ex

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

うまく表現されない人はCSSやHTMLの記述間違いを疑ってみよう。CSSは古いキャッシュが残ってると反映されないことが多いよ。

 

蛍光ペンをカスタマイズ

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

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

蛍光ペンの色を変える

色を変更するには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の紹介でした。

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

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

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サービス開始から半年たらずで100件以上のオーダーをいただいています。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!