ハウリンの雑念だらけで生きている

ゆるゆると書いていきます

はてなブログ【蛍光ペン風のアンダーラインを引く】カスタマイズを紹介!


スポンサーリンク

こんにちは、ハウリンです (*^^*)

カスタムシリーズです。

他の方のブログなどを見ていて、文章や強調したい単語にアンダーラインを引けたら・・・、

私も引いてみたい!と 思った事はないでしょうか。

今回は、蛍光ペン風のアンダーラインを引く方法を紹介したいと思います(*^^*) 

f:id:twistinhaurin:20200912141139p:plain

 

 

 

やり方は凄く簡単です(^O^)/

 

CSSにコードを貼り付ける

こちらのコードをコピーします。


/* 文字に蛍光ライン */
article u{ text-decoration: none; background: linear-gradient(transparent 50%, #ffff00 50%); }

 

「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」にコードを貼り付ける。

f:id:twistinhaurin:20200602155233p:plain

f:id:twistinhaurin:20200602154654p:plain 

とりあえずこれで準備完了。

最後に「変更を保存する」を忘れずクリック。

f:id:twistinhaurin:20200522165623p:plain


CSSにコードを入れただけではアンダーラインは表示されません。

HTML編集画面にコードを入力します

 

HTML画面にコードを入れアンダーラインを表示させる 

みたままモードで「HTML編集」画面を開く。

f:id:twistinhaurin:20200904135420p:plain

 

アンダーラインを引きたい文字、文章を<u>と</u>で囲む。

f:id:twistinhaurin:20200912144803p:plain

 

みたまま画面に戻してみると、普通のアンダーラインで表示されていますが、

f:id:twistinhaurin:20200912145821p:plain

 

プレビュー画面で見てみると

f:id:twistinhaurin:20200912151805p:plain

ちゃんと黄色のアンダーラインが表示されますよ(太字と組み合わせてます)

 

 

色と太さを変更する

CSSに貼ったコードの下の部分を変更します。

(transparent 50%, #ffff00 50%)

 

「transparent 50%」の方の数値を変えると太さが変わります。

数値が大きいほど細くなります。

90%だと 

f:id:twistinhaurin:20200913190503p:plain

30%だと

f:id:twistinhaurin:20200913185707p:plain

10%だと

f:id:twistinhaurin:20200913190015p:plain


 

「#ffff00 50%」は色と色の濃さです。

色の濃さは数値が大きいほど薄くなります。

 

 ピンク色(#ff00ff)で濃さ10%だと

f:id:twistinhaurin:20200914141543p:plain

ピンク色で濃さ90%だと

f:id:twistinhaurin:20200914141126j:plain

 

 

色のバリエーション

赤色(#ff0000)

f:id:twistinhaurin:20200914142202p:plain

青色(#0000ff)

f:id:twistinhaurin:20200914142220p:plain

紫色(#ee82ee)

f:id:twistinhaurin:20200914143030p:plain

緑色(#008000)

f:id:twistinhaurin:20200914143045p:plain

オレンジ(#ffa500) 

f:id:twistinhaurin:20200914144248p:plain

ライム(#00ff00)

f:id:twistinhaurin:20200914144305p:plain

アクア(#00ffff)

f:id:twistinhaurin:20200914144326p:plain

⇩こちら他にもいろんな色が載っています。

www.colordic.org

  

 こちらのサイトを参考にさせて頂きました。

randamlife.hatenablog.com

 

あとがき

改めてこの記事を作成してみて、蛍光アンダーラインの色や太さ、濃さで印象がかなり違う事が分かりました。

好きな色で個性を出して下さい(*^^*)

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。 

 

 

 

\読者登録してもらえると嬉しいです/