はてなブログで、強調したいハイライト文字列に蛍光マーカーペンっぽい色付きのアンダーラインをつける方法。
【サンプル】
- 強調したいハイライト文字列
はてなブログで使える文字の装飾には、太字/ボールド、斜体/イタリック、アンダーラインがある。
HTMLではそれぞれ以下のようになる。
≪太字/ボールド≫
<strong>文字列</strong>
≪斜体/イタリック≫
<em>文字列</em>
≪アンダーライン≫
<span style="text-decoration: underline;">文字列</span>
- 〔デザイン〕→〔カスタマイズ〕→〔デザインCSS〕
のところに、CSSを追加すればよい。
「太字/ボールド」<strong>に、蛍光ペン風のアンダーラインを付けるなら以下を追加すればよい。
.entry-content strong { background: linear-gradient(transparent 70%, #FFFF00 70%); }
この設定は自分のブログすべての記事に反映される。過去に<strong>タグで太字にした文字列すべてに適用される。それが問題なら、class名を付けてCSSを追加する方法もある。その場合、HTML編集でclass名を個別に付ける必要があるので、面倒。<u>タグを使う方法もあるが、同様にHTML編集でタグを挿入しなければいけないので、面倒。
自分の場合、<em>タグの「斜体/イタリック」は過去に使っていない。ということで、<em>タグに蛍光ペン風のアンダーラインを付けることにした。<em>タグの斜体/イタリック指定も解除し、太字にしたいので、'font-style: normal;'と'font-weight: bold;'も追加。
.entry-content em { background: linear-gradient(transparent 70%, #FFFF00 70%); font-style: normal; font-weight: bold; }
<em>タグを使っている記事一覧 ↓↓↓