読者です 読者をやめる 読者になる 読者になる

bunoshi

働き方を考えるブログ

CSSで強調文字(太字)を蛍光ペンを引いたようにする方法

ブログ運営 ブログ運営-はてなブログカスタマイズ

CSSで強調文字(太字)を蛍光ペンを引いたようにする方法

色々なホームページを読んでいると見かけるこんな文字。

蛍光ペンでなぞったような表現

これがやりたくてやりたくて仕方がなかったんです。で、思わずどんな書き方をしているのかな?とHTMLを見てみると。

 「<strong>蛍光ペンでなぞったような表現</strong>」

あれ?強調文字? とくに背景を塗る表記は無かったんです。と、言うことはCSSで設定しているんですね。なるほど。

 

CSSを調べました

確かに文字を赤くして太くすれば目立ちますし、強調したい部分はそれで十分かもしれません。でもね。

 

これかっこよくないですか!?

 

目立つし。分かりやすい。ただ色を塗るよりも何倍も目立ちます!

はてなブログさん!ぜひ機能として追加してください!と、お願いしても追加されるのはいつになるのか分からないので、CSSを調べました。表記が分かれば応用も簡単。とは言えそのままコピーするわけにもいかないので、変更を加えています。

 

蛍光ペンのように見えるCSS

f:id:ranmaru-24mensou:20160131114733p:plain

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

()の中の表記ですが、transparenは透明と言う意味でbackground colorの初期値らしいです。つまりこの値を変えれば色を塗る範囲を変えられます。数値が大きくなるほど色を塗る範囲が狭くなります。

#ffafafは色の指定です。「CSS/HTML色見本」で好きな色を指定してください。

最後のパーセントはグラデーションの幅です。これは数値が大きくなるほど大きくなります。

 

コピーしてCSSに貼るだけ。サンプルをいくつか紹介

黄色のマーカー。仕事で良く使う色。

f:id:ranmaru-24mensou:20160131120159p:plain

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

 

 青のマーカー。色が濃かったのでグラデーション多め。

f:id:ranmaru-24mensou:20160131120403p:plain

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

 

 緑のマーカー。なんかきれいだな。

f:id:ranmaru-24mensou:20160131120615p:plain

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

 

 赤のマーカー。グラデーション多め。原色は濃いね。

f:id:ranmaru-24mensou:20160131123408p:plain

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

 

 オレンジのマーカー。この色は良く見るかも。

f:id:ranmaru-24mensou:20160131123615p:plain

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

 

 水色のマーカー。蛍光ペンぽい。

f:id:ranmaru-24mensou:20160131123757p:plain

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

 

紫のマーカー。

f:id:ranmaru-24mensou:20160131124007p:plain

strong {
background: linear-gradient(transparent 40%, #FF00FF 80%);

 

HTMLでも出来るけど・・・。

「蛍光ペンでなぞったような表現」

のようにHTMLでも出来ます。CSSを使えば、

「蛍光ペンでなぞったような表現」

と言うように強調文字じゃ無くても出来ますが、表記が面倒臭い。

 

「蛍光ペンでなぞったような表現」は、

<span style="background-color: #ffff00;">「蛍光ペンでなぞったような表現」</span>

と、HTMLで書いています。これだとその都度指定しないといけない。

 

「蛍光ペンでなぞったような表現」

<span class="kiirosen">「蛍光ペンでなぞったような表現」</span>

と、HTMLで書いていますが、事前にCSSで、

.kiirosen {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

と書いて、「strong」だったところを任意の言葉「kiirosen」に書き変え、線を引きたい文字を<span class="kiirosen"></span>で囲むことで使っています。

出来ないことは無いけどちょっと手間がかかる。ぼくははてなブログをつかっていますから、やっぱり強調文字一発で出来るのが簡単で良いですね。

 

おまけ(はてなブログ向け)

はてなブログでマーカーの色を確認する場合、記事作成画面のHTML編集に直接CSSを書くと楽です。

こんな感じ。

<style><!--
strong {
background: linear-gradient(transparent 40%, #FF00FF 80%);
}
--></style>

<stale></stale>で囲んであげればちゃんと反映されます。<!-- -->は書かなくても勝手に現れます 笑。

試してみましたが、反映されるのはCSSを書いた記事だけっぽいので、気分で色を変えたい人にはいいかも。(違ってたらごめんなさい)

気軽に使いたい方はカスタマイズの中にあるデザインCSSに追記しておけば、太字を選択するだけでマーカーが引けます。

ぜひおためしあれ。

 

※管理人はCSSの素人です。ご利用は自己責任でお願いします。


転職30代の転職派遣から正社員ニート・フリーターから正社員働き方コラム転職サイト転職エージェント雑記ブログ運営
免責事項

Presented by bunoshi