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

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

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

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

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

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

やり方は凄く簡単です。 

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

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

/* 文字に蛍光ライン */
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

あとがき

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

好きな色で個性を出して下さい。

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

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