【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。
SPONSERD LINK
あとは強調タグを使うだけ
好きな色をCSSに記述したら、あとは強調タグである<strong>タグを使うだけです。強調タグは
<strong>ここに文字列を入れる</strong> というふうに使います。
簡単ですね!
今までの強調タグもすべて自動で変換されます。
参考にした記事
強調文字をちょっとおしゃれにするCSSデザインサンプル – 初心者ブロガー指南:Naifix
ブログの本文で強調したい部分にはstrongやbを使いますが、デフォルトのスタイルではただの太字になるだけです。これだとちょっと味気ないなーと思うときは、CSSでデザイ…
naifix.com
ありがとうございます!
SPONSERD LINK
まとめ
こういう細かいサイトデザインが、ユーザービリティ的には必要だと思っているまなしばでした。
コピペでOKなので是非やってみてください。
ちなみに、この記事のアイキャッチ画像はこのジェネレーターで作成しました。
関連する記事
この記事がよかったら
いいね!お願いします
ヽ(=´▽`=)ノ
ままはっくの最新情報を
お届けします
Twitterでまなしばをフォローしよう!
Follow @manami1030こちらの記事もよく読まれています
今日の人気記事
【まとめ】抱っこ紐試着レポ!どれがおすすめ?人気ブランド別ランキング比較
出産手当金と育児休業給付金はいつ貰える?振込金額とスケジュール
おむつ比較。どれがおすすめ?テープおむつランキング
Yモバイルのスマホ・Nexus5にMNP。評判、料金とMNPした理由
iPhoneに飽きたらXperia Z3 Compactがおすすめ。1ヶ月使用したレビュー[口コミ]
【LINE】知らない人からトークが来た!なぜ届く?その理由と仕組み
2014年製ルンバ比較。870と622を使ってわかった口コミと評判
【初心者まとめ】ドコモXperia Z3 Compact白ロムをSIMフリーにしてYモバイルのNexus5用SIMで使用する方法