[ミニ知識] ブログの文字に蛍光ペンをひく

ソース編集に切り替える。



<span style="background: linear-gradient(transparent 60%, #ffd9ec 0%);">蛍光ペンのサンプル</span>と入力する。






緑色の蛍光ペンのサンプル（80%）

緑色の蛍光ペンのサンプル（60%）

緑色の蛍光ペンのサンプル（20%）

蛍光ペン（ピンク）
 <span style="background: linear-gradient(transparent 60%, #ffd9ec 0%);">
 蛍光ペン（黄色）
 <span style="background: linear-gradient(transparent 60%, #feffa0 0%);">
 蛍光ペン（水色）
<span style="background: linear-gradient(transparent 60%, #bae5ff 0%);">
蛍光ペン （緑色）
<span style="background: linear-gradient(transparent 60%, #3eb370 0%);">
蛍光ペン 終わり
</span>
60%を小さくすると太くなる


本来はテーマファイル（CSS（Cascading Style Sheets））に蛍光ペンを追加する方が便利です。
以下は以前使っていたGoogle Bloggerの設定
-----
/* 文字全体の上から60%は透明の背景 (太さ、数値が大きいほど細くなる） */
lgreen { /* lgreenは緑のペン (名前は使われていない単語なら何でもいい) */
background: linear-gradient(transparent 60%, #66ffcc 0%);
}
lpink { /* lpinkはピンクのペン */
background: linear-gradient(transparent 60%, #ff99ff 0%);
}
lyellow { /* lyellowは黄色のペン */
background: linear-gradient(transparent 60%, #ffff66 0%);
}
/* ここまで */
----
使うときは記事の中で<lgreen>文字列</lgreen>の様に書く。


おまけ
WEB色見本 原色大辞典 - HTMLカラーコード