こんにちは～こなゆです。
今日は文章中にマーカーを引く方法を解説します！
といっても、ＣＳＳを書いていくだけなんですけどね。。。笑
それでは早速以下をご覧ください！
（覚えたばかりで使いまくりの小学生感）
使い方
マーカーを引くＣＳＳ
background: linear-gradient(transparent 70%,#98fb98 70%);
font-style: normal;
}
これをCSSに記述します。
このコードは文字を斜体にしたとき、斜体になる代わりにマーカーが引かれるように設定したコードになっています。
はてなブロガーは、こうしてマーカー引く用に斜体を設定しているんですよね！
この理由として、斜体の使用頻度がかなり低いことが関係しています！
はてなブログの編集画面（下の画像）に太字と斜体のボタンがあるので、それをうまく利用しているんですよね。
また今回の設定だと斜体ですが、上記コードの .entry-content em{ の部分を
.entry-content strong{
に変更することで、太字の代わりに（上記Ｂを押すと）マーカーを引くことが出来るようになります！
マーカーの色を変えるには
上記コードの、#9BB8FF の部分を変更します。
参考に以下のコードをどうぞ。
springgreen #00ff7f
palegreen #98fb98
violet #ee82ee
darkviolet #9400d3
skyblue #87ceeb
aqua #00ffff
pink #ffc0cb
orangered #ff4500
その他、カラーコードはこちらを参考にどうぞ(´･ω･｀)
マーカーの太さを変えるには
上記コードの中にある、
background: linear-gradient(transparent 70%,#98fb98 70%);
このコードの、数字の部分をいじります。
linear-gradient(transparent 20%,#98fb98 20%);
linear-gradient(transparent 40%,#98fb98 40%);
linear-gradient(transparent 50%,#98fb98 50%);
linear-gradient(transparent 70%,#98fb98 70%);
linear-gradient(transparent 90%,#98fb98 90%);
こんな感じですね。
基本的には、例で示した70％でいいと思いますが、好みに応じて変えてみてくださいね(´･ω･｀)
まとめ
今回はマーカーを引く方法を解説しました。
ブログ始めたての人は、ただコピペするだけでいいですので、ぜひ使ってみてくださいね！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ブログ村に参加しています！ポチっとお願いします(*'▽')
