HTML-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

にほんブログ村 科学ブログ 脳科学へ
にほんブログ村 子育てブログ 海外ワーキングマザー育児へ
PVアクセスランキング にほんブログ村