まぁちゃんの𝕥𝕣𝕚𝕡執事

元ホテルマンのOL女子が自由気ままな優雅なホテルプランをご提案❤︎

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

      12 色韓国蛍光ペンデュアル先端 mildliner マーカーパステル fosforlu kalem 学校弾丸ジャーナル用品  markeerstiften|Highlighters| - AliExpress

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

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

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

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

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

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

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

WordPressなら

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

です。

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

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

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

www.color-sample.com

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

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

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

HTML
<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>
CSS
.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;
}

HTML
<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>
CSS
.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;
}

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

HTML
<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>
CSS
.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%);
}

HTML
<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>
CSS
.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;
}

グラデーションマーカー

HTML
<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>
CSS
.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%);
}

HTML
<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>
CSS
.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;
}

細めのストライプマーカー

HTML
<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>
CSS
.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);
}

HTML
<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>
CSS
.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;
}

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

HTML
<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>
CSS
.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;	
}

HTML
<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>
CSS
.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;	
}

丸みを帯びたマーカー

HTML
<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>
CSS
.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;
}

HTML
<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>
CSS
.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カスタマイズ記事もおすすめです。

 

maachantriphotel0314.hatenadiary.jp

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TOP