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

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

カスタムシリーズです。

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

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

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

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

ＣＳＳにコードを貼り付ける

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

/* 文字に蛍光ライン */
article u{

    text-decoration: none;

    background: linear-gradient(transparent 50%, #ffff00 50%);

}

２、「デザイン」➡「カスタマイズ（スパナマーク）」➡「デザインＣＳＳ」にコードを貼り付ける。

 

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

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

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

ＨＴＭＬ編集画面にコードを入力します

ＨＴＭＬ画面にコードを入れアンダーラインを表示させる 

１、みたままモードで「ＨＴＭＬ編集」画面を開く。

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

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

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

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

色と太さを変更する

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

(transparent 50%, #ffff00 50%)

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

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

９０％だと 

３０％だと

１０％だと

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

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

 ピンク色（#ff00ff）で濃さ１０％だと

ピンク色で濃さ９０％だと

色のバリエーション

赤色（#ff0000）

青色（#0000ff）

紫色（#ee82ee）

緑色（#008000）

オレンジ（#ffa500） 

ライム（#00ff00）

アクア（#00ffff）

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

www.colordic.org

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

randamlife.hatenablog.com

あとがき

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

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

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

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

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