【CSS】コピペでOK！強調文字を蛍光ペン風にする方法

皆さんはブログで強調文字をどれくらい使用されているでしょうか？

強調文字というのは、タグでいえば＜strong＞。文章中では「特に強調すべき部分」に使用するものですよね。

これ、普通に使うと太字になるのですが、こんな感じで、

蛍光ペン風におしゃれにデザインする方法があります。

コピペでできるので是非やってみてください。

strongタグを蛍光ペン風にデザインする方法

直接、strong指定にしてしまいます。クラス名で指定してもいいのですが、それだと毎回クラス名を指定しなければならないこと、そして今までの記事は適用されないので、strongのタグを置換してしまいます。ただし、全ての強調タグに適用されるので色合いなどはチェックしてください。

場所はstyle.cssに追記します。Stinger3の場合はsmart.cssにも追記。

赤の蛍光ペン

赤の蛍光ペン風はこんな感じ。目立ちますね。

strong {
	background: linear-gradient(transparent 40%, rgb(255, 170, 170) 40%);
}

ピンクの蛍光ペン

ピンクの蛍光ペン風はこんな感じ。目を引きます。

strong {
    background: linear-gradient(transparent 40%, #ff99ff 40%);
}

黄色の蛍光ペン

黄色の蛍光ペン風はこんな感じ。いかにも蛍光ペン。

strong {
    background: linear-gradient(transparent 40%, #ffff66 40%);
}

緑の蛍光ペン

緑の蛍光ペン風はこんな感じ。受験生っぽい。

strong {
    background: linear-gradient(transparent 40%, #66FFCC 40%);
}

青の蛍光ペン

赤の蛍光ペン風はこんな感じ。勉強できそう。

strong {
    background: linear-gradient(transparent 40%, #66ccff 40%);
}

少し解説しておくと、linear-gradientの要素で前者の数字が蛍光ペンが始まる位置、後者がその色の透明度です。

色は好みの色に変えてもらってもOK。

あとは強調タグを使うだけ

好きな色をCSSに記述したら、あとは強調タグである＜strong＞タグを使うだけです。強調タグは

<strong>ここに文字列を入れる</strong>
というふうに使います。

簡単ですね！

今までの強調タグもすべて自動で変換されます。

参考にした記事

蛍光ペン風にテキスト上をマーカーするCSSを設定してみた | IT便利帳

itbenricho.com

強調文字をちょっとおしゃれにするCSSデザインサンプル – 初心者ブロガー指南：Naifix

ブログの本文で強調したい部分にはstrongやbを使いますが、デフォルトのスタイルではただの太字になるだけです。これだとちょっと味気ないなーと思うときは、CSSでデザイ…

naifix.com

ありがとうございます！

まとめ

こういう細かいサイトデザインが、ユーザービリティ的には必要だと思っているまなしばでした。

コピペでOKなので是非やってみてください。

ちなみに、この記事のアイキャッチ画像はこのジェネレーターで作成しました。

バナージェネレータ２

簡単にオリジナルの画像ジェネレーターが作れるサービス ジェネジェネ|バナージェネレータ２

genege.net

関連する記事