はてなブログ アンダーラインを蛍光マーカー風にカスタマイズする方法

どうも、マサ（@masa5care）です

みなさんのブログを読んでいて、これどうするんやろと気になってたものの中に、蛍光マーカーでなぞったみたいなアンダーラインがありまして

これ、単に太字にするよりも、重要な箇所を目立たせることできる上に、なんといってもオサレなんですよね

これはやってみたい、と思ってぐぐったら意外と簡単でしたのでその方法をご紹介ます

アンダーラインの引き方

まずは普通にブログを書きながら、アンダーラインを引きたい箇所を選択

「U」アイコンをクリックすると選択箇所がアンダーラインタグで囲まれたと思います

プレビューしてみるとこんな感じのアンダーライン

これはデフォルトの細い黒い線ですが、これをみなさんがやっている蛍光マーカー風にカスタマイズしていきます

完成図がこちら

自分のブログのイメージにあわせて薄い青色のマーカーにしてみました

今回もサルワカさんのブログを参考にさせていただきました

デザイン関連の記事ならここですね、教科書的な存在です

saruwakakun.com

では、設定方法を書いていきます

設定手順

コピペで簡単です、下記に特定のコードを貼り付けるだけです
コピペする場所に元々何か入っている場合は、その一番下に追記する形で追加してください

デザインCSS

「デザイン」→「カスタマイズ（スパナアイコン）」→「デザインCSS」に下記のコードをコピペしてください

article u{
    text-decoration: none;
    background: linear-gradient(transparent 50%, #a8eaff 50%);
}

以上です

簡単に説明しますと

text-decoration: none; →これで元々のノーマルの黒いアンダーラインを無効にしてます

background: linear-gradient(transparent 50%, #a8eaff 50%); →アンダーラインの色とかデザイン部分

となってます

デザインを変更したい場合transparent 50%, #a8eaff 50%←この部分をいじります

それぞれの意味はこうなってます

【A】→　マーカーの太さ（数値が大きいほど細くなります）
【B】→　マーカーの色
【C】→　マーカーの濃さ（数値が大きいほど薄くなります）

この辺をブログのデザインにあわせていじってみてください

今回作った当ブログのアンダーラインの場合、図解しますと

っという意味になります

カラーコードは↓こちらのようなサイトが参考にするといいかもです

www.colordic.org

最後に

ということで、今回はアンダーラインをええ感じにカスタマイズする方法でした

これ、調べたらグラデーションとかいろいろできそうなんですけど、今回はここまでにしておきます

CSSって面白いですよね、そんなことできんのん？　これってCSSだけでやってんの？　みたいな

今は先人さんの知識を参考に、見よう見まねでいじってますが、落ち着いたらこういうところじっくり頭に入れたいところです

デザインできるおっさんとかステキやん（センス無いやないか）

それではまた