副業と節約で貧乏脱出!お役立ち情報配信局!

貧乏を脱出する為のお役立ち情報や節約術、無料で楽しめるお得情報を配信していくブログです。

はてなブログで文字(文章)に蛍光ペン等のマーカーで線を引いたようにする方法!

本記事にはプロモーションが含まれています。

よくブログ等を読んでいると、文字(文章)に蛍光ペン等のマーカーで線を引いたような表現を見かけませんか?

 

こんなやつです。

 

上記の様な、文字にマーカーで線を引いたようにする方法を、解説していきたいと思います。

 

 

 

 

はてなブログで文字にマーカーで線を引いたようにする方法

 

『デザイン』の『カスタマイズ』から『{}デザイン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%(マーカーの濃さ)になります。

 

マーカーの色を変えるときは下記サイトを参照してくだい。

www.colordic.org

※例えば、#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日現在の内容です。実際のサービス内容等と異なる場合がありますので注意して下さい。