蛍光ペン風なマーカーのCSS

例えば、こんな感じに文字を装飾したい場合。

「黄色の蛍光ペン」

CSSにコードを追加

外観 → テーマエディター → 付随のCSSエディターを開く。

CSSを追加。

例えば、黄色で、テキストの半分をハイライトするようなマーカーを作りたい場合 ↓

.marker-yellow{
background: linear-gradient(transparent 40%, #ffffcc 40%);}

黄色で、テキスト全体をハイライトするようなマーカー ↓

.marker-yellow-all{
background: linear-gradient(transparent 0%, #FFFFCC 0%);}

ピンクのマーカー。ややアンダーライン風↓

.marker-pink{
background: linear-gradient(transparent 60%, #FFCCCC 80%);}

• %表示が高い程細く、低いほど太いマーカーになる。
• 色は色番号で。（今回は黄色の#ffffccを使用）

Webセーフカラー

Webセーフカラーとは、8ビットカラー256色のうち、各OS（Windows, Mac）で異なる40色を覗いた216色の事。

このWebセーフカラーは、「どのブラウザでも同じように見える」とされている色で、「短縮カラーコード」で表す事が可能。

短縮カラーコード

通常は16進法で表記される（eg.赤の場合、#FF0000）が、

各RGB二桁の隣接する同じ者同士を、各一桁に短縮して表記可能（eg. #F00）。

HTMLに目的のマーカーを表記

<span class="marker-yellow">黄色の蛍光ペン</span>

黄色の蛍光ペン

…完成。

 

<span class="marker-yellow-all">黄色の蛍光ペン（全ハイライト）</span>

黄色の蛍光ペン（全ハイライト）

…完成。

 

<span class="marker-pink">ピンクの蛍光ペン</span>

ピンクの蛍光ペン

…完成。

References

References