僕はワクワクしたい(/・ω・)/

社内であたふたしているSEのメモ帳

【CSS】ラインマーカーを引いて文章を強調する方法【はてなブログでも使えるよ】

ラインマーカーを引いて協調する方法です。

サンプル

水色のラインマーカー以外の色も使えます。
ラインマーカーの太さも変えれます。

 Q. 今年のアニメで気になっているのはありますか?
 A. 賭ケグルイ
   ようこそ実力至上主義の教室へ
   ナイツ&マジック
   です!

こんな感じですね。

やり方

CSS
CSSは以下のように書きます。

.yellow_linemarker {
  background: linear-gradient(transparent 60%, #FFFF00 0%);
}

はてなブログの場合は、
ブログ設定画面のデザイン -> カスタマイズ -> デザインCSS にコピペしてください。

・太さについて
60%と書いている部分の数字を変えるとラインマーカーの太さを調整できます。
0%が全塗りで100%がラインマーカーなしです。

・色について
#FFFF00をお好きなカラーコードに変えてください。

HTML
ラインマーカーを引きたいところに適用します。

見た目 今日もいい天気ですね。
書き方 今日も<span class="yellow_linemarker">いい天気</span>ですね。

いろいろ遊んでみてください(/・ω・)/