vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。

CSSで”蛍光ペン”っぽく文字にマーカー線を引く方法

      2016/02/22

css-marker
こんにちは、okutani(@okutani_t)です。Twitterでこんな質問を受けたので、取り急ぎ記事にしてみました。

というわけで、「CSSを使って蛍光ペンっぽく文字にマーカー線を引く方法」を記事にしてみたので、サクッと見ていきましょう!

スポンサーリンク

HTML側の準備

HTMLでは次のようにしてあげればOKです。HTMLがよくわからない人は、とりあえず投稿画面に次のように記述すればOKなのね、ぐらいに捉えておいてください。

また、WordPressを使っている人は「テキストモード」にしてから記述しましょうね。

・文字強調なし

<span class="gray-line">ここにマーカーを引きたいテキスト!</span>

・文字強調あり+SEOに影響なし

<b class="gray-line">ここにマーカーを引きたいテキスト!</b>

・文字強調あり+SEOに影響あり

<strong class="gray-line">ここにマーカーを引きたいテキスト!</strong>

文字強調あり・なしは「太字」か「そうでないか」の違いです。

SEOに影響あり・なしは「bタグ strongタグ 違い」とかでググってください。

よくわからない方は、どっち使っても大体OKです。ガシガシ使いたい場合はbタグを使っておけば問題ないかと思います。

でも、上のようにわざわざ書くのってめんどくさいですよね……!

ということで、WordPressを使っている人は「AddQuicktag」プラグインを使うと、ボタンひとつでかんたんに挿入できて便利なのでぜひ設定してみてください。

参考WordPressに「AddQuicktag」を導入してタグ入力を楽チンに! | vdeep

僕はこーんな感じで使ってます。

css-marker

今設定したclassに、CSSで装飾していけばOKです。

ちなみに、classの名前は自由につけられるので、「gray-line」「pink-line」「cho-kawaii-line」「line-ppoi-yatsu」とかなんでもいいです。分りやすい名前にしましょう。

次にCSSの解説をしていきます。

CSSで”linear-gradient”を使うとマーカー線が引ける

CSSが書けるところに、次のCSSコードを書いていきましょう。

WordPressだとstyle.cssとかですね。一番下の方に書いておけば、とりあえずOKかと思います。

マーカー線を引くときは「linear-gradient」を使いましょう。次のようにして使います。

background: linear-gradient(transparent 線の太さ(%), カラーコード(#xxxxxx) 0%);

linear-gradientはけっこういろいろなことができるのですが、上の形を頭に入れておけば、とりあえずマーカー線は作れます。

ちなみに、「線の太さは0%が一番太い」です。なので、90%とかにすると細い線になりますね。

カラーコードの後ろの%指定は「0%、もしくは線の太さと同じ%」にしてください。ここら辺はlinear-gradientの仕様がすこし難しいので、本記事では解説を省略しています。

ではでは、グレーの線を引いてみましょう。次のコードをstyle.cssに書いてみてください。

.gray-line {
  background: linear-gradient(transparent 60%, #e7e7e7 0%);
}

こんな感じになりました!

次にピンクの線を引いてみます。

.pink-line {
  background: linear-gradient(transparent 80%, #dd9dbf 0%);
}

あら、可愛らしい!

線の太さを80%にすることで、細めの線になりましたね。よりキュートらしさが出たのではないでしょうか。たぶん。

緑は……

.green-line {
  background: linear-gradient(transparent 30%, #c7ddae 0%);
}

さわやかぁぁーーっ!

線の太さを30%にしたのでけっこう太くなりましたね。そして言うほどさわやかじゃなかった

青……

.blue-line {
  background: linear-gradient(transparent 60%, #aabade 0%);
}

さわやかぁぁ2ぅぅーーっ!

これもあんまり(略)

黄色……

.pikachu-line {
  background: linear-gradient(transparent 10%, #fff001 0%);
}

ピカチュウぅカラーぁぁーーっ!

……すみませんすこしふざけました。特に反省はしてません。

色の変化は、#から始まるカラーコードが変更されていることに注目してください。

いろんな色のカラーコードがありますが、下記のサイトを見ればほぼほぼのカラーコードを選んで使うことができるので活用してみてください。

参考HTMLカラーコード

参考カラー配色で迷わない!シーン別配色見本32パターン | Web制作会社スタイル

これでマーカー線を引けるようになれば、サイトをオシャレに彩れますね!

CSSがうまく反映されない場合

CSSがうまく反映されない場合は、次の項目を見直してみてください。

WordPressを使っていて、テキストモードになっていない

css-marker2

HTMLで指定したclassと、CSSで設定した名前が一致していない(pink-lineとclassで名前をつけたら、CSSでもpink-lineと合わせる)

CSSの記述の際、頭に『.(ドット)』を付け忘れている

スペルミスがあるか確認する

ブラウザをF5などで更新してみる(古いCSSが読まれてる場合があるため)

もし、それでも解決しなかった場合はokutaniのTwitter(@okutani_t)に適当にリプ飛ばしてくれたら一緒に調べますよ( ´ ▽ ` )ノ

おまけ: 文字全体をマーカー線で引きたい場合

ただ単純に、文字全体をマーカーで引きたい場合は、linear-gradientを使わなくても引くことができます。

.purple-line {
  background: #cca9ca;
}

こんな感じで上から下までのラインが引かれます。

この場合、線の太さなんかは変更できませんが、お手軽にやってみたい場合は上の方法もおすすめです。

参考になれば幸いです。

okutani (@okutani_t) のヒトコト
CSSを覚えれば、サイトにオリジナリティを持たせることができていいですね。みなさんもマーカー線ぜひ試してみてください!

 - CSS

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

css-chat-design
[レスポンシブ対応] CSSでチャット風デザインを実装する

「好きなプログラム言語何?」と聞かれれば、ためらいなく「CSS」と答えるokut …

link-badge-white-space0
[CSS] リンクの頭に参考バッヂ付けたらレイアウト崩れた。white-spaceで解決

CSSで可愛いレイアウトが出来るとうれしくなりますよね。Webデザインのお勉強中 …

wp-i-shadow
WordPress記事内の画像に影をつける方法

こんにちは、okutani(@okutani_t)です。WordPressサイト …

pochireba-css
ポチレバをCSSで装飾してみた

こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vde …

sass-scss
Sassを導入する&初めてScssを使ってみる【Windows・Mac】

こんにちは、okutani(@okutani_t)です。今まで、Webコーディン …

wp-series-func
[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連 …

animate-wow
「Animate.css」と「wow.js」でWebサイトにアニメーションをつけてみよう

こんにちは、okutani(@okutani_t)です。みなさんはWebサイトに …

badge-css
CSSでリンク横に「参考・LINK」バッジをつけてみよう

こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSS …

h-tag-stripe-border-design
hタグ下に斜めのストライプボーダーを設置&ボーダー画像の作り方解説

デザインセンスが皆無、見よう見まねでWebデザインやってる僕okutani(@o …

kizisita-hitokoto-css
[WordPress] 記事下の一言コメントをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。以前、WordPress …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。