当サイトはアフィリエイト広告を利用しています

【CSS】テキストを彩る蛍光ペン風やガーリーなマーカー12種類×7色【コピペでOK】

2018-07-08Web制作

見出しと強調部分だけの流し読みで、話を大まかにわかるようにするのがブログの基本です。

強調部分とは、こんな感じの太字やマーカーで装飾された部分のこと。

強調部分は太字だけでも伝わりますが、「もっとおしゃれにできたらな～」なんて、思いませんか？

そんな方のために、コピペだけで簡単に装飾できる蛍光ペン風のマーカーを作成しました。

デザインは12種類。色はそれぞれ7色用意しましたので、きっとあなたのブログに合うマーカーが見つかるはず！

蛍光ペン風マーカー（ガーリーなマーカー）の使い方・HTML&CSSコピペ場所

使い方ですが、下記にあるそれぞれのHTMLとスタイルシートを、指定の場所にコピペします。

WordPressなら

  • HTML：記事投稿のテキストタブ
  • CSS：ダッシュボードの外観 → テーマの編集 → style.css

です。

 

マーカーの色の変更について

色は全てスタイルシート内で設定してますので、デザインそのままでお好みの色にご自身で変更することが可能です。

#から始まる6桁（もしくは3桁）の英数字の箇所を変更すればOKです。

 

おしゃれな蛍光ペン風マーカー　デザイン・CSSソースコード一覧

それぞれ通常パターン（class="marker〇a"）と、文字に白い影があるパターン（class="marker〇b"）（ちょっと読みやすい）があります。お好みの方をどうぞ。

オーソドックスな蛍光ペン風マーカー

<span class="marker1a-red">赤のマーカー</span>
<span class="marker1a-orange">橙のマーカー</span>
<span class="marker1a-yellow">黄のマーカー</span>
<span class="marker1a-green">緑のマーカー</span>
<span class="marker1a-blue">青のマーカー</span>
<span class="marker1a-purple">紫のマーカー</span>
<span class="marker1a-pink">桃のマーカー</span>
.marker1a-red {
	background-color: #FADBDA;
}
.marker1a-orange {
	background-color: #FEECD2;
}
.marker1a-yellow {
	background-color: #FFF9C9;
}
.marker1a-green {
	background-color: #D5EAD8;
}
.marker1a-blue {
	background-color: #D3EDFB;
}
.marker1a-purple {
	background-color: #D2CCE6;
}
.marker1a-pink {
	background-color: #FFE2EF;
}

 

<span class="marker1b-red">赤のマーカー</span>
<span class="marker1b-orange">橙のマーカー</span>
<span class="marker1b-yellow">黄のマーカー</span>
<span class="marker1b-green">緑のマーカー</span>
<span class="marker1b-blue">青のマーカー</span>
<span class="marker1b-purple">紫のマーカー</span>
<span class="marker1b-pink">桃のマーカー</span>
.marker1b-red {
	background-color: #FADBDA;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker1b-orange {
	background-color: #FEECD2;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker1b-yellow {
	background-color: #FFF9C9;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker1b-green {
	background-color: #D5EAD8;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker1b-blue {
	background-color: #D3EDFB;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker1b-purple {
	background-color: #D2CCE6;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker1b-pink {
	background-color: #FFE2EF;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}

 

細めの蛍光ペン風マーカー

<span class="marker2a-red">赤のマーカー</span>
<span class="marker2a-orange">橙のマーカー</span>
<span class="marker2a-yellow">黄のマーカー</span>
<span class="marker2a-green">緑のマーカー</span>
<span class="marker2a-blue">青のマーカー</span>
<span class="marker2a-purple">紫のマーカー</span>
<span class="marker2a-pink">桃のマーカー</span>
.marker2a-red {
	background: linear-gradient(#fff 60%, #FADBDA 0%);
}
.marker2a-orange {
	background: linear-gradient(#fff 60%, #FEECD2 0%);
}
.marker2a-yellow {
	background: linear-gradient(#fff 60%, #FFF9C9 0%);
}
.marker2a-green {
	background: linear-gradient(#fff 60%, #D5EAD8 0%);
}
.marker2a-blue {
	background: linear-gradient(#fff 60%, #D3EDFB 0%);
}
.marker2a-purple {
	background: linear-gradient(#fff 60%, #D2CCE6 0%);
}
.marker2a-pink {
	background: linear-gradient(#fff 60%, #FFE2EF 0%);
}

 

<span class="marker2b-red">赤のマーカー</span>
<span class="marker2b-orange">橙のマーカー</span>
<span class="marker2b-yellow">黄のマーカー</span>
<span class="marker2b-green">緑のマーカー</span>
<span class="marker2b-blue">青のマーカー</span>
<span class="marker2b-purple">紫のマーカー</span>
<span class="marker2b-pink">桃のマーカー</span>
.marker2b-red {
	background: linear-gradient(#fff 60%, #FADBDA 0%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker2b-orange {
	background: linear-gradient(#fff 60%, #FEECD2 0%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker2b-yellow {
	background: linear-gradient(#fff 60%, #FFF9C9 0%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker2b-green {
	background: linear-gradient(#fff 60%, #D5EAD8 0%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker2b-blue {
	background: linear-gradient(#fff 60%, #D3EDFB 0%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker2b-purple {
	background: linear-gradient(#fff 60%, #D2CCE6 0%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker2b-pink {
	background: linear-gradient(#fff 60%, #FFE2EF 0%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}

 

グラデーションマーカー

<span class="marker3a-red">赤のマーカー</span>
<span class="marker3a-orange">橙のマーカー</span>
<span class="marker3a-yellow">黄のマーカー</span>
<span class="marker3a-green">緑のマーカー</span>
<span class="marker3a-blue">青のマーカー</span>
<span class="marker3a-purple">紫のマーカー</span>
<span class="marker3a-pink">桃のマーカー</span>
.marker3a-red {
	background: linear-gradient(#fff 30%, #FADBDA 70%);
}
.marker3a-orange {
	background: linear-gradient(#fff 30%, #FEECD2 70%);
}
.marker3a-yellow {
	background: linear-gradient(#fff 30%, #FFF9C9 70%);
}
.marker3a-green {
	background: linear-gradient(#fff 30%, #D5EAD8 70%);
}
.marker3a-blue {
	background: linear-gradient(#fff 30%, #D3EDFB 70%);
}
.marker3a-purple {
	background: linear-gradient(#fff 30%, #D2CCE6 70%);
}
.marker3a-pink {
	background: linear-gradient(#fff 30%, #FFE2EF 70%);
}

 

<span class="marker3b-red">赤のマーカー</span>
<span class="marker3b-orange">橙のマーカー</span>
<span class="marker3b-yellow">黄のマーカー</span>
<span class="marker3b-green">緑のマーカー</span>
<span class="marker3b-blue">青のマーカー</span>
<span class="marker3b-purple">紫のマーカー</span>
<span class="marker3b-pink">桃のマーカー</span>
.marker3b-red {
	background: linear-gradient(#fff 30%, #FADBDA 70%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker3b-orange {
	background: linear-gradient(#fff 30%, #FEECD2 70%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker3b-yellow {
	background: linear-gradient(#fff 30%, #FFF9C9 70%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker3b-green {
	background: linear-gradient(#fff 30%, #D5EAD8 70%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker3b-blue {
	background: linear-gradient(#fff 30%, #D3EDFB 70%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker3b-purple {
	background: linear-gradient(#fff 30%, #D2CCE6 70%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker3b-pink {
	background: linear-gradient(#fff 30%, #FFE2EF 70%);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}

 

細めストライプマーカー

<span class="marker4a-red">赤のマーカー</span>
<span class="marker4a-orange">橙のマーカー</span>
<span class="marker4a-yellow">黄のマーカー</span>
<span class="marker4a-green">緑のマーカー</span>
<span class="marker4a-blue">青のマーカー</span>
<span class="marker4a-purple">紫のマーカー</span>
<span class="marker4a-pink">桃のマーカー</span>
.marker4a-red {
	background: repeating-linear-gradient(-45deg, #FADBDA, #FADBDA 1px, #fff 0, #fff 3px);
}
.marker4a-orange {
	background: repeating-linear-gradient(-45deg, #FEECD2, #FEECD2 1px, #fff 0, #fff 3px);
}
.marker4a-yellow {
	background: repeating-linear-gradient(-45deg, #FFF9C9, #FFF9C9 1px, #fff 0, #fff 3px);
}
.marker4a-green {
	background: repeating-linear-gradient(-45deg, #D5EAD8, #D5EAD8 1px, #fff 0, #fff 3px);
}
.marker4a-blue {
	background: repeating-linear-gradient(-45deg, #D3EDFB, #D3EDFB 1px, #fff 0, #fff 3px);
}
.marker4a-purple {
	background: repeating-linear-gradient(-45deg, #D2CCE6, #D2CCE6 1px, #fff 0, #fff 3px);
}
.marker4a-pink {
	background: repeating-linear-gradient(-45deg, #FFE2EF, #FFE2EF 1px, #fff 0, #fff 3px);
}

 

<span class="marker4b-red">赤のマーカー</span>
<span class="marker4b-orange">橙のマーカー</span>
<span class="marker4b-yellow">黄のマーカー</span>
<span class="marker4b-green">緑のマーカー</span>
<span class="marker4b-blue">青のマーカー</span>
<span class="marker4b-purple">紫のマーカー</span>
<span class="marker4b-pink">桃のマーカー</span>
.marker4b-red {
	background: repeating-linear-gradient(-45deg, #FADBDA, #FADBDA 1px, #fff 0, #fff 3px);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker4b-orange {
	background: repeating-linear-gradient(-45deg, #FEECD2, #FEECD2 1px, #fff 0, #fff 3px);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker4b-yellow {
	background: repeating-linear-gradient(-45deg, #FFF9C9, #FFF9C9 1px, #fff 0, #fff 3px);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker4b-green {
	background: repeating-linear-gradient(-45deg, #D5EAD8, #D5EAD8 1px, #fff 0, #fff 3px);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker4b-blue {
	background: repeating-linear-gradient(-45deg, #D3EDFB, #D3EDFB 1px, #fff 0, #fff 3px);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker4b-purple {
	background: repeating-linear-gradient(-45deg, #D2CCE6, #D2CCE6 1px, #fff 0, #fff 3px);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker4b-pink {
	background: repeating-linear-gradient(-45deg, #FFE2EF, #FFE2EF 1px, #fff 0, #fff 3px);
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}

 

女子力高めなストライプマーカー

<span class="marker5a-red">赤のマーカー</span>
<span class="marker5a-orange">橙のマーカー</span>
<span class="marker5a-yellow">黄のマーカー</span>
<span class="marker5a-green">緑のマーカー</span>
<span class="marker5a-blue">青のマーカー</span>
<span class="marker5a-purple">紫のマーカー</span>
<span class="marker5a-pink">桃のマーカー</span>
.marker5a-red{
	position: relative;
}
.marker5a-red:before{
	background: repeating-linear-gradient(-45deg, #FADBDA, #FADBDA 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5a-red:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5a-orange {
	position: relative;
}
.marker5a-orange:before{
	background: repeating-linear-gradient(-45deg, #FEECD2, #FEECD2 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5a-orange:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5a-yellow {
	position: relative;
}
.marker5a-yellow:before{
	background: repeating-linear-gradient(-45deg, #FFF9C9, #FFF9C9 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5a-yellow:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5a-green {
	position: relative;
}
.marker5a-green:before{
	background: repeating-linear-gradient(-45deg, #D5EAD8, #D5EAD8 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5a-green:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5a-blue {
	position: relative;
}
.marker5a-blue:before{
	background: repeating-linear-gradient(-45deg, #D3EDFB, #D3EDFB 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5a-blue:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5a-purple {
	position: relative;
}
.marker5a-purple:before{
	background: repeating-linear-gradient(-45deg, #D2CCE6, #D2CCE6 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5a-purple:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5a-pink {
	position: relative;
}
.marker5a-pink:before{
	background: repeating-linear-gradient(-45deg, #FFE2EF, #FFE2EF 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5a-pink:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

 

<span class="marker5b-red">赤のマーカー</span>
<span class="marker5b-orange">橙のマーカー</span>
<span class="marker5b-yellow">黄のマーカー</span>
<span class="marker5b-green">緑のマーカー</span>
<span class="marker5b-blue">青のマーカー</span>
<span class="marker5b-purple">紫のマーカー</span>
<span class="marker5b-pink">桃のマーカー</span>
.marker5b-red{
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker5b-red:before{
	background: repeating-linear-gradient(-45deg, #FADBDA, #FADBDA 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5b-red:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5b-orange {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker5b-orange:before{
	background: repeating-linear-gradient(-45deg, #FEECD2, #FEECD2 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5b-orange:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5b-yellow {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker5b-yellow:before{
	background: repeating-linear-gradient(-45deg, #FFF9C9, #FFF9C9 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5b-yellow:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5b-green {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker5b-green:before{
	background: repeating-linear-gradient(-45deg, #D5EAD8, #D5EAD8 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5b-green:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5b-blue {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker5b-blue:before{
	background: repeating-linear-gradient(-45deg, #D3EDFB, #D3EDFB 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5b-blue:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5b-purple {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker5b-purple:before{
	background: repeating-linear-gradient(-45deg, #D2CCE6, #D2CCE6 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5b-purple:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

.marker5b-pink {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker5b-pink:before{
	background: repeating-linear-gradient(-45deg, #FFE2EF, #FFE2EF 3px, #fff 0, #fff 6px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}
.marker5b-pink:after{
	background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;	
}

 

丸みを帯びたマーカー

<span class="marker6a-red">赤のマーカー</span>
<span class="marker6a-orange">橙のマーカー</span>
<span class="marker6a-yellow">黄のマーカー</span>
<span class="marker6a-green">緑のマーカー</span>
<span class="marker6a-blue">青のマーカー</span>
<span class="marker6a-purple">紫のマーカー</span>
<span class="marker6a-pink">桃のマーカー</span>
.marker6a-red {
	position: relative;
}
.marker6a-red:before {
	border-bottom: 10px solid #FADBDA;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6a-orange {
	position: relative;
}
.marker6a-orange:before {
	border-bottom: 10px solid #FEECD2;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6a-yellow {
	position: relative;
}
.marker6a-yellow:before {
	border-bottom: 10px solid #FFF9C9;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6a-green {
	position: relative;
}
.marker6a-green:before {
	border-bottom: 10px solid #D5EAD8;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6a-blue {
	position: relative;
}
.marker6a-blue:before {
	border-bottom: 10px solid #D3EDFB;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6a-purple {
	position: relative;
}
.marker6a-purple:before {
	border-bottom: 10px solid #D2CCE6;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6a-pink {
	position: relative;
}
.marker6a-pink:before {
	border-bottom: 10px solid #FFE2EF;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

 

<span class="marker6b-red">赤のマーカー</span>
<span class="marker6b-orange">橙のマーカー</span>
<span class="marker6b-yellow">黄のマーカー</span>
<span class="marker6b-green">緑のマーカー</span>
<span class="marker6b-blue">青のマーカー</span>
<span class="marker6b-purple">紫のマーカー</span>
<span class="marker6b-pink">桃のマーカー</span>
.marker6b-red {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker6b-red:before {
	border-bottom: 10px solid #FADBDA;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6b-orange {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker6b-orange:before {
	border-bottom: 10px solid #FEECD2;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6b-yellow {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker6b-yellow:before {
	border-bottom: 10px solid #FFF9C9;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6b-green {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker6b-green:before {
	border-bottom: 10px solid #D5EAD8;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6b-blue {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker6b-blue:before {
	border-bottom: 10px solid #D3EDFB;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6b-purple {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker6b-purple:before {
	border-bottom: 10px solid #D2CCE6;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.marker6b-pink {
	position: relative;
	text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
.marker6b-pink:before {
	border-bottom: 10px solid #FFE2EF;
	border-radius: 5px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

 

蛍光ペン風マーカーを使うにあたってのCSSにおける注意点

このページで配布しているマーカーは白背景向きです。

黒背景の場合は、CSSの下記の箇所を変更お願いします。

  • #fff　→　#000
  • rgba(255,255,255,1)　→　rgba(0,0,0,1)
  • rgba(255,255,255,0)　→　rgba(0,0,0,0)

transparentで透過させる方法もありますが、Safariで見ると上半分が黒ずんでしまうので、このような処置をとってます。

参考マーカー風に線を引くCSSをSafariで表示したら上半分がグレーになってしまった件

 

その他の記事装飾におけるCSSカスタマイズ記事もおすすめです。

 

スポンサーリンク

おすすめ記事セレクション

CSS,HTML