よくブログ等を読んでいると、文字（文章）に蛍光ペン等のマーカーで線を引いたような表現を見かけませんか？
こんなやつです。
上記の様な、文字にマーカーで線を引いたようにする方法を、解説していきたいと思います。
はてなブログで文字にマーカーで線を引いたようにする方法
『デザイン』の『カスタマイズ』から『｛｝デザインCSS』に下記を入力または貼り付けてください。
.marker{
background: linear-gradient(transparent 0%, #ff69b4 0%);
}
次にHTML編集で
<span class="marker">見本</span>と入力します。
見本
上記のようになりました。
CSSに入力した
.marker{
background: linear-gradient(transparent 0%, #ff69b4 0%);
}
の.markerはHTML上でclassという扱いになります。
つまり.以降は任意の名前がつけられ、例えば.markerは.marker-pinkでも問題ありません。
※その際HTML編集に入力する値は上記例だと<span class="marker-pink">見本</span>になります。
また、
.marker{
background: linear-gradient(transparent 0%, #ff69b4 0%);
}
のtransparent以降は0%（マーカーの大きさ）, #ff69b4（マーカーの色） 0%（マーカーの濃さ）になります。
マーカーの色を変えるときは下記サイトを参照してくだい。
※例えば、#ff69b4を#0000ffに書き換えるとhotpinkからblueになる。
マーカーの線の大きさ（太さ）と色の濃さを変えてみよう
では実際にマーカーの大きさとマーカーの濃さをかえてみましょう。
まず、『デザイン』の『カスタマイズ』から『｛｝デザインCSS』に先ほど入力した
.marker{
background: linear-gradient(transparent 0%, #ff69b4 0%);
}
のtransparent以降の 0%, #ff69b4 0%を 80%, #ff69b4 60%に変更します。
.marker{
background: linear-gradient(transparent 80%, #ff69b4 60%);
}
次に『記事を書く』から『HTML編集』で
<span class="marker">見本</span>と入力します。
見本
上記のようになりました。
マーカーの大きさ（太さ）と色の濃さの比較
最初に入力したものと並べてみましょう。
最初に入力した見本
後で入力した見本
どうですか？違いがお分かりいただけたでしょうか？
マーカーの大きさは明らかに違い後で入力した見本は下線（アンダーライン）のような形になっています。
色の濃さに関しては若干薄いですが、マーカーの線が細くて分かりにくい為、マーカーの線の太さを同じにして更に色を薄くしたものと並べてみます。
最初に入力した見本
マーカーの線を太くした見本
まとめ
今回は文字にマーカーで線を引いたようにする方法をお伝えしました。
色の濃さに関してはわかりにくいですが、最後の見本でなんとなくお分かりいただけたでしょうか？
是非文字にマーカーで線を引いたようにする方法を実際に活用してみてください。
※記事は2020年7月22日現在の内容です。実際のサービス内容等と異なる場合がありますので注意して下さい。
