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

Web制作

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

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

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

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

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

スポンサーリンク

蛍光ペン風マーカー(ガーリーなマーカー)の使い方・コピペ場所

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

WordPressなら
HTML:記事投稿のテキストタブ
CSS:ダッシュボードの外観 → テーマの編集 → style.css
です。

色の変更

色は全てスタイルシート内で設定してますので、デザインそのままでお好みの色にご自身で変更することが可能です。
#から始まる6桁(もしくは3桁)の英数字の箇所を変更すればOKです。

おしゃれなマーカー デザイン・ソースコード一覧

それぞれ通常パターン(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の下記の箇所を変更お願いします。

#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で表示したら上半分がグレーになってしまった件

 

おすすめ記事セレクション
シンプルなインテリアを目指す方へ → 買ってよかったホワイトの生活家電・生活用品まとめ
おしゃれな写真は誰でも撮れます → ブログ映えするオシャレな写真撮影&加工テクニック
デキる大人への第一歩 → 私のEvernoteの活用術・10個の事例【初心者でもできる活用法】
意識を変えるだけで貯まる! → 年収300万円のOLが8年で1000万円以上貯めた方法と習慣

この記事を読んだ人は他にこんな記事も読んでいます