晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

はてなブログで文字列に蛍光ペン（マーカー）風のアンダーラインをつける方法。<em>タグで。（カスタマイズCSS）

ホームページ、Web作成 はてなブログ

はてなブログで、強調したいハイライト文字列に蛍光マーカーペンっぽい色付きのアンダーラインをつける方法。

【サンプル】

  • 強調したいハイライト文字列

はてなブログで使える文字の装飾には、太字/ボールド、斜体/イタリック、アンダーラインがある。

f:id:art2nd:20200505221518j:plain

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>タグを使っている記事一覧 ↓↓↓