こんにちは！はなです。
今回はマーカー線のデザインについて解説しようと思います。
マーカー線の引き方はこちらを参照してください。
www.mattarimattari.com
今回はこのマーカー線の 色と太さ をカスタマイズしていきます。
まず基本となるのはこちらのコード。
このコードをデザインCSSに貼り付ける際に少しいじるだけで、マーカー線を好きにカスタマイズできます。
/*---------------------
蛍光ペン
-----------------------*/
article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #FFFF99 50%);
}
太さをカスタマイズ
太さを調整するには3行目の下記のマーカー部分をいじります。
background: linear-gradient(transparent 50%, #FFFF99 50%);
この50%の数字を変えると太さが変わります。
数字が大きいとマーカーは細くなり、数字が小さいほどマーカーは太くなる。
目安としてはこんな感じです。
細め：90%
中くらい：50%(わたしは50%の設定です）
太め：-200%
お好きな太さにしてみてください！
色をカスタマイズ
色を調整するには3行目の下記のマーカー部分をいじります。
background: linear-gradient(transparent 50%, #FFFF99 50%);
それぞれの色にコードが決まっているので、好きな色のコードに置き換えるだけ！
カラーコードがわかるおすすめのサイトがこちら。
www.colordic.org
実際のカラーコード例を挙げると、、
サーモンピンク（#fa8072）
スカイブルー（#87ceeb）
こんな風に簡単に色を変えられるので、試してみてくださいね。
まとめ
マーカーのデザインの仕方について説明しました。
太さや色を変えるだけで印象が大きく変わってくるので、自分のサイトにあった色にすることをお勧めします。
【%】と【色のコード】を変えるだけなので、5分もかからずにかえられるのであっという間です。
ぜひ試してみてくださいね。
ここまでご覧いただきありがとうございました。
にほんブログ村
