コピペでどうぞ。CSSでテキストの下線をちょっとオシャレにみせるカスタマイズ

こんにちは、つばさ（@tsubasa123）です。

今日はカスタマイズにちょっとした遊び心を付け加えてみました。お時間がある方は遊んでみてください。

CSSで下線をオシャレにしたい
色を選ぼう！
さいごに
関連記事

CSSで下線をオシャレにしたい

shiromatakumi.hatenablog.com

先日公開されたシロマティさんのカスタマイズ、デザイナーさんってすごいですね。これからのはてなブログ界隈ではこの囲みのデザインを色んなサイトで見かけるようになるのでしょうか。

囲みも確かによく使いますが、同じくらい文字の装飾も使うものなのかな、と。文字自体の色の変更機能ははてなブログにデフォルトでついていますし、文字に下線をつける機能もありますが、下線にだけ色を付ける機能はないみたいなんですよね。というか、HTMLタグだけじゃできないのかな、多分。

たまに導入しているブログを見かけますが、CSSを使えば下線にだけ色を付けることもできますし、下線の太さもある程度調整することができたりします。

CSSで下線を引きます。

こんな感じ。HTMLとCSSはとてもシンプル。

<style>
span.marker {
background: linear-gradient(transparent 60%, #ffff33 0%);
}
</style>
<p><span class="marker">ここのテキストの下線の色が変わります。</span></p>

<span>タグに任意のクラスをつけて文字を囲んであげるとその部分に下線が引かれるようになります。

色を選ぼう！

で、この手のカスタマイズはコピペでできるのが便利なところなのですが、たまには色を選びたくなるものです。16進数のカラーコードになじみがある方ならいいのですが、まぁ苦手な方もいるわけで。

今回のカスタマイズはたったの1行だったのでさすがに寂しいと思って色を自由に選べるようにしてみました。

下記のテキストエリアの左下にあるボタンをクリックすると色を選ぶダイアログが表示されるのでそこから好きな色を選択してください。テキストエリア内のコードと、その上の「ここのテキストの下線の色が変わります。」という部分の下線の色に選択した色が反映されるようになっています。※Google Chromeでしか動作検証はしていませんのでご了承ください。

ここのテキストの下線の色が変わります。

span.marker {<br /> background: linear-gradient(transparent 60%, #ffff33 0%);<br /> }

←このボタンから色を変更してください。

お好みのスタイルができましたら、テキストエリア内のコードをコピーしてご自身のブログの設定に追記してください。クラス名（markerの部分）を変更していただければ好きなだけ色の数を増やすこともできますので、カラフルなサイトにしたい方はいくつか試してみてください。ただし、あまり色数を使いすぎると逆に見にくいサイトになりますので用法容量を守って適切にお使いください。