読者です 読者をやめる 読者になる 読者になる

つばさのーと

つばさの日常を綴るのーと

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

f:id:tsubasa123:20170118164628j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

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

 

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でしか動作検証はしていませんのでご了承ください。

 

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

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

 

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

 

さいごに

 

いかがでしたでしょうか。まぁ、ただ色変えれるようにしてみただけですが、あんまりこーゆーことしてる人は見たことがない気がします。まぁ、ブログですからね、本来は記事書いてなんぼですよね。

 

ではでは、最後までお付き合いいただきありがとうございました。

 

関連記事

はてなブログでちょっとおしゃれに枠線と背景色を表示するカスタマイズ

コピペでどうぞ。CSSでカエレバ・ヨメレバのデザインをカスタマイズしました