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

はてなカスタマイズや旅行記、好きな事(サブカル)などを書いていきたいです。ゆるゆると書いていきます。

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


スポンサーリンク

f:id:twistinhaurin:20210612132746j:plain

ブログ作りに役立つカスタマイズ。

文章のこの部分を目立たせたい!

ユーザーに伝わる様に強調させたい!

と思う事はないでしょうか?

今回は、文章に蛍光ペン風アンダーラインを引く方法を紹介したいと思います。

 

 

 

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

CSSにコードを貼り付ける

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


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

 

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

f:id:twistinhaurin:20210612140722j:plain 

f:id:twistinhaurin:20210612140742j:plain

 

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

f:id:twistinhaurin:20210612140747p:plain

 

これで終わりではありません。

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

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

 

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

「HTML編集」画面を開き、

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

f:id:twistinhaurin:20210612140811p:plain

 

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

f:id:twistinhaurin:20210612140819j:plain

 

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

f:id:twistinhaurin:20210612140943j:plain

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

 

 

色と太さを変更する

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

(transparent 50%, #ffff00 50%)

 

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

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

90%だと 

f:id:twistinhaurin:20210612140951p:plain

30%だと

f:id:twistinhaurin:20210612141000j:plain

10%だと

f:id:twistinhaurin:20210612141005j:plain


 

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

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

 

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

f:id:twistinhaurin:20210612141024p:plain

ピンク色で濃さ90%だと

f:id:twistinhaurin:20210612141029j:plain

 

 

色のバリエーション

赤色(#ff0000)

f:id:twistinhaurin:20210612141032p:plain

青色(#0000ff)

f:id:twistinhaurin:20210612141051p:plain

紫色(#ee82ee)

f:id:twistinhaurin:20210612141056j:plain

緑色(#008000)

f:id:twistinhaurin:20210612141100j:plain

オレンジ(#ffa500) 

f:id:twistinhaurin:20210612141118p:plain

ライム(#00ff00)

f:id:twistinhaurin:20210612141122p:plain

アクア(#00ffff)

f:id:twistinhaurin:20210612141126p:plain

 

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

www.colordic.org

  

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

randamlife.hatenablog.com

 

あとがき

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

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

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

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