サラリーマンの雑記帳

様々なことをまとめている雑記ブログ。あなたに役に立つ情報がきっとある!

ブログ
副業
インカムハウス
インカムハウス住んでみて
北陸おでかけ
大東建託
人材派遣
受験
モッピー
映画
雑記帳

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

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

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

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

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

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

 

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

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

 

 

 

 

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

 

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;
}
/* 黄色マーカー終わり */

 

これを「デザイン」→「スパナマーク」→「{}デザインCSS」に貼り付け!!

 

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

 

こうするだけでマーカーを使用できるようになります。

早速使ってみましょう!!

 

 

 

マーカーの使い方

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

 

記事の編集画面で

「B(太字)」を押せば黄色マーカー

「i(斜め文字)」を押せば緑色マーカー

が使えるようになります!!

 

ここまで読んだ人はわかると思いますが「B」「i」の機能を書き換えた形なので、本来の「B」「i」の機能だけでは使えません!!!!笑

 

「B」「i」の機能を使う=強制的にマーカーが付く

と思っておいてください。

 

ちなみに「B」「i」両方押すと・・・

「B」→「i」の順で押す

「i」→「B」の順で押す

先に押した方の色が優先されるようです。

 

これであなたもマーカーマスター♪

 

この方法・コードは「パソコンガイド」さんのはてなブログ・コピペで1分!蛍光マーカーで文字を装飾・強調するカスタマイズを参考にさせていただきました!

   

このブログでは、はてなブログ開設~Googleアドセンスで稼げるようになるまでのフローを全て公開しているので是非他の記事もご覧ください♪

 

 

 

 

▼オススメ記事▼

 

 

 

【はてなブログカスタマイズ一覧】へ戻る

 

ブログTOPへ戻る

 

 
***ブログを始めるなら「はてなブログ」***