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

更新日: 11,661 views






Css 強調 蛍光マーカー ペン

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

強調文字というのは、タグでいえば<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。

SPONSORED LINK

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

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

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

簡単ですね!

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

参考にした記事

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

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

naifix.com

ありがとうございます!

SPONSORED LINK

まとめ

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

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

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

バナージェネレータ2

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

genege.net

関連する記事

育児エルゴから新作抱っこひもが出ました。新生児から使える最強の抱っこ紐はこちら

この記事がよかったら
いいね!お願いします
ヽ(=´▽`=)ノ

ままはっくの最新情報を
お届けします

Twitterでまなしばをフォローしよう!

この記事を書いている「まなしば」って誰?

こちらの記事もよく読まれています

今日の人気記事

  • プロフィール画像
    2歳の娘とエンジニアの夫と3人暮らしの88世代のブロガー。産休中からブログ書いてたら、月間60万PVになったので、脱サラしてフリーランスでメディアを作ってます。趣味はPerfume、ポケモン。東京在住の大阪人/同志社
    詳しいプロフィール・お問い合わせはこちら

ままはっくについて

アクセスありがとうございます。
このブログは育児ブロガー・まなしばが、妊娠出産・子育て・WEBサービスについて書いている“ママ術”的ブログです。
よろしくどうぞ!ヽ(=´▽`=)ノ
まなしばの詳しいプロフィール
Twitter | Facebook
プライバシーポリシー

夫と開発したブロガー向けツール

iOSとAndroidアプリ両方を探して紹介できるアプリ紹介ツール:
アプリーチ

TOP