たまに見かけるマーカー(蛍光ペン)風のアンダーライン。 シンプルなデザインだと、ちょっとアクセントが加わる感じがしていいなと思っていたので、やってみました。
参考にしたのはこのサイト(↓)。
とても簡単に設定することができます。 ここでは、強調表示(太字)にした箇所にマーカー風アンダーラインがつくようにしてあります。
ラインの色はカラーコードで調節しているのかと思ったら、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(太字)」にすると、ピンク色のマーカー風アンダーラインを表示することができます。 他にも、「斜線」や「下線」に他の色のマーカー風アンダーラインを設定することもできます(詳しくは上記サイトさんを参考にしてください)。