無料はてなブログでもできる♪　カワいいピンクマーカーを引く方法

f:id:navira:20190905104618j:plain

単なるアンダーラインでは味気ない。。。
よく見かける、マーカーで線を引いたみたいなヤツ、できないかな？

↓

できましたっ！！

簡単なので、お試しあれ～

但し、スマホ版では反映されず。。。（汗

例えば、こんなピンクマーカーを引く場合

先ず、マーカーが引けるように、デザインCSSをいじります

「ダッシュボード」→「デザイン」→「カスタマイズ（スパナのマーク）」→「デザインCSS」

下記コードを「デザインCSS」に記述

↓

/*ピンクマーカーの表示*/
article u{
text-decoration: none;
background: linear-gradient(transparent 0%, #ffc0cb 100%);
/*ピンクマーカーの表示　終わり*/

「変更を保存する」をクリック

※「 /*　*/」で囲っているコメントはCSSに影響しませんので、追加した記述がどこからどこまでなのか、わかるようにメモしてます

※うまくいかなかった時のために、元々あった記述はメモ帳などにコピーしておいた方が無難です

次に、記事の「HTML編集」をいじります

マーカーを引きたい部分を　＜u＞　と　＜/u＞　でタグで挟んで、完了っ

こんな感じ

↓

＜u＞こんなピンクのマーカーを引く場合＜/u＞

「編集　見たまま」で見ると、単なるアンダーラインが表示されますが、「プレビュー」で見ると、しっかり薄いピンクのマーカーが引かれていますね～（*＾＾*

コードの中のピンク文字の部分を変更すると、線の太さ・濃さの調節ができます

青文字の部分「＃」から始まる色コードを変更すると、好きな色にできます

↓

background: linear-gradient(transparent 0%, #ffc0cb 100%);

基本の色コードはこちらをご参考にしてくださいね～

↓

他の色数種類使い分けしたくて、色々試してみたんですが。。。

今のところ、この記事に描いたコードしか反映されず。。。

どなたか、数種類の色の設定方法知ってたら、教えて欲しいです（＾＾；

私が独学で色々試してみてOKだったコードなんで、よく解っている方から見たら、ここ変とか、無駄なコード入れてる、とかって箇所があるかもしれません（＾＾；

ま、なってればいいのだ～（*＾＾*b

無料はてなブログだけど、もうちょっとアレンジしたいけどわっから～んっ、て方の、ご参考にして頂けたら嬉しいです♪

navira’s diary