Someday Somewhere

A little something to say in my everyday life

マーカー風のアンダーラインをつける

f:id:tsukisai:20190321052927j:plain

たまに見かけるマーカー(蛍光ペン)風のアンダーライン。 シンプルなデザインだと、ちょっとアクセントが加わる感じがしていいなと思っていたので、やってみました。

参考にしたのはこのサイト(↓)。

とても簡単に設定することができます。 ここでは、強調表示(太字)にした箇所にマーカー風アンダーラインがつくようにしてあります。

ラインの色はカラーコードで調節しているのかと思ったら、rgbaを使っていました。 rgbaのコード表で検索するとすぐ見つかります。 ちなみに、わたしが利用させて頂いたサイト(↓)はこちら。

ブログ管理画面の「設定」→「詳細設定」→「headに要素を追加」と進み、以下のコードを貼り付けました。 マーカーの色はピンクに設定してあります。

<style type="text/css">
/* 強調表示を蛍光ペン風に */
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(255,219,255,1) 60%) !important;
}
/* bタグは太字 */
article b{
font-weight:bold !important;
}
</style>

これで、記事編集画面上で範囲指定した箇所を「B(太字)」にすると、ピンク色のマーカー風アンダーラインを表示することができます。 他にも、「斜線」や「下線」に他の色のマーカー風アンダーラインを設定することもできます(詳しくは上記サイトさんを参考にしてください)。