はてなブログで本文にマーカーをひく方法【コピペするだけ】

知識・経験０ゼロの私ががむしゃらに調べて「はてなブログpro」でブログを開設。

なーんも分からなかった私でもブログで収益をあげることが出来ています。

その時に参考にしたのが、既に収益をあげているブロガーさんのブログ作りを紹介している記事。

しかし、1つのブログだけでは情報収集しきれず、かなりの数の記事を読みました。

それがけっこうな労力で･･･（勉強させてもらう立場で生意気ですが。笑）

なので、これからブログを始めようと考えている皆様に向けて!!

このブログさえ見れば知識０の人でも稼げるブログが作れるよう、私の勉強した全てを紹介しちゃいます!!

このページでは「はてなブログで本文にマーカーをひく方法」について紹介します！！

f:id:moppy-and-movie:20210528160952j:plain

＜目次＞

マーカーを使用するメリット
本文にマーカーをひく方法
マーカーの使い方

マーカーを使用するメリット

はてなブログの標準仕様だと文字色・サイズを変更するか、太字にするかなどシンプルな加工しかできません。

しかし、これから紹介する超簡単なCSSコピペだけでマーカーを使えちゃう！！

マーカーを使うメリットは記事にメリハリがでることだと思います。

同じ文章でもマーカーを使うか使わないかで印象が全然違いますからね。

同じ文章でもマーカーを使うか使わないかで印象が全然違いますからね。

ね？笑

記事の内容によっては画像を使わずにしばらく文章だけが続くことがあります。

そういう時にただの文字だけだと、読んでる側からするとどこが見どころなのか分かりづらくて離脱されてしまう可能性も･･･

少しでも読み手が読みやすい記事になるように、効果的にマーカーを使うようにしましょう！！

本文にマーカーをひく方法

/* 緑色マーカー */
.entry-content em{
	background: -webkit-linear-gradient(transparent 60%, #00ff7f 60%)!important;
	background: -o-linear-gradient(transparent 60%, #00ff7f 60%)!important;
	background: linear-gradient(transparent 60%, #00ff7f 60%)!important;
}
/* 緑色マーカー終わり */


/* 黄色マーカー */
.entry-content strong{
background: -webkit-linear-gradient(transparent 60%, #ffff00 60%)!important;
background: -o-linear-gradient(transparent 60%, #ffff00 60%)!important;
background: linear-gradient(transparent 60%, #ffff00 60%)!important;
}
/* 黄色マーカー終わり */